내 블로그 목록

2018년 6월 27일 수요일

[HTML] 버튼 만들기 실습


[버튼 만들기]





<!DOCTYPE html>
<html>
   <head>
       <title>버튼 만들기</title>
       <style>
           .box_struc{
               width: 200px;
               height: 100px;
               background-color: crimson;
               
               border: 10px solid red;
               border-radius: 30px;
               box-shadow: 5px 5px 5px #A9A9A9;
               margin: 50px 50px;
           }
           
           .box_font{
               text-align: center;
               line-height: 100px;
               font-size: 40px;
               font-style:italic;
               font-weight: bold;
           }
           
           .backg{
               background-image: url('bg4.jpg');
               background-repeat: no-repeat;
           }
           
           .box_backg{
               background-image: url('bg5.jpg');
               background-size: 150px;
           }
           
           #inside>a{
               color: red;
               text-decoration:none;
               
               display:block;
           }
           
           #outside{
               width:100%;
               height: 650px;
           }
       </style>
   </head>
   <body>
      <div id="outside" class="backg">
       <div id="inside" class="box_struc box_font box_backg">
           <a href="http://naver.com">Click Me</a>
       </div>
      </div>
   </body>
</html>

댓글 없음:

댓글 쓰기