[HTML5 & CSS3] 실습 - 고양이 분양 페이지 (심화)

<소스>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>고양이 분양</title>
<style>
   * {
      margin: 0; /* 외부 여백 */
      padding: 0; /* 테두리와 내용 사이의 여백 */
      box-sizing: border-box;
   }
   #container {
      width: 100%; /* 너비 */
   }
   header {
      width: 100%; /* 너비 */
      height: 80px; /* 높이 */
      margin: 0; /* 외부 여백 */
   }
   a {
      text-decoration: none; /* 글자 꾸밈 */
   } 
   nav {
      height: 50px; /* 높이 */
      background:skyblue; /* 배경 색 */
   }
   #main-nav {
      list-style: none;
      margin-bottom: 10px;
      padding: 10px; /* 테두리와 내용 사이의 여백 */
      text-align: center;
   }
   #main-nav li {
      display: inline-block;    
      color: #fff;
      font-family: "맑은 고딕", 돋움;
      font-size: 0.9em;
      margin: 5px 15px; /* 외부 여백 */
   }
   nav a:link, a:visited {
      color: #fff;
   }
   nav > ul > li {
      width: 15%; /* 너비 */
      height: 40px; /* 높이 */
      margin-top: 30px; /* 요소 주변 여백 */
      position:relative; /* 원래 자신이 있어야될 위치를 기준으로 배치 */
      float:center; /* 정렬 */
   }
   nav > ul > li > a {
      display: block; /* 형태 */
      width: 25%px; /* 너비 */
      height: 40px; /* 높이 */
      text-align: center; /* 가운데 정렬 */
      line-height: 40px; /* 줄 간격 */
      font-size: 18px; /* 글자 크기 */
      color:black /* 글자 색 */
   }
   nav > ul > li > a:hover {
      background-color: gray; 
      color: floralwhite;
   }  
   #menus {
      width: 100%; /* 너비 */      
   }
   #menus > div {
      height: 400px; /* 높이 */
      margin-bottom: 10px; /* 요소 주변 여백 */
      position: relative;
   }
   #menu1, #menu2, #menu3, #menu4, #menu5 {
      width: 100%; /* 너비 */
   }
   #menus .caption h4 {
      position: absolute;
      padding: 5px; /* 테두리와 내용 사이의 여백 */
      font-size: 20px;
      color:white;
      text-shadow: 3px 3px 5px black;
      left: 35%;
      bottom: 150px;
   }
   #menu1 {
      background:url("cat1.png") no-repeat center;
      background-size: cover;
   }
   #menu2 {
      background:url("cat2.png") no-repeat center;
      background-size: cover;
   }
   #menu3 {
      background:url("cat3.png") no-repeat center;
      background-size: cover;
   }
   #menu4 {
      background:url("cat4.png") no-repeat center;
      background-size: cover;
   }
   #menu5 {
      background:url("cat5.png") no-repeat center;
      background-size: cover;
   }
   footer {
      width: 100%; /* 너비 */
      background:#373737; /* 배경 색 */
      height: 200px; /* 높이 */
   }
   footer p {
      font-size: 1.2em; /* 글자 크기 */
      color:#eee; /* 색깔 */
      text-align: center; /* 가운데 정렬 */
      line-height: 200px; /* 줄 간격 */
   }

   @media all and (min-width:768px) {
      #menus {
         display: flex; /* 플렉서블 박스 레이아웃 적용 */
         -ms-flex-wrap: wrap;
         -webkit-flex-wrap: wrap;
         flex-wrap: wrap; /* 여러 줄에 걸쳐 표시 */
         justify-content: space-between; /* 화면 양쪽에 바짝 붙이기  */
      }
      #menu1, #menu2, #menu3, #menu4 {
         width: 49%; /* 너비 */
      }
      #menu5 {
         width: 100%; /* 너비 */
      }
   }

   @media all and (min-width:992px) {
      #menu1, #menu2, #menu3, #menu4, #menu5 {
         width: 33%; /* 너비 */
      } 
      #menu5 {
         margin-left: 0.5%; /* 요소 주변 여백 */
         -ms-flex: 2 2 0;
         -webkit-flex: 2 2 0;
         flex: 2 2 0;
      }
   }

   .button {
      cursor: pointer;
      background: #000; /* 배경 */
      text-decoration: none; /* 글자 꾸밈 */
      color: #666; /* 색깔 */
   }

   .curl-top-left {
      display: inline-block; /* 형태 */
      position: relative; /* 원래 자신이 있어야될 위치를 기준으로 배치 */
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   }

   .curl-top-left:before {
      pointer-events: none;
      position: absolute;
      content: '';
      height: 0; /* 높이 */
      width: 0; /* 너비 */
      top: 0;
      left: 0;
      background: white; /* 배경 */
   /* IE9 */
      background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
   /*For IE7-8-9*/
      z-index: 1000;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); /* 박스 그림자 */
      transition-duration: 0.3s;
      transition-property: width height;
   }

   .curl-top-left:hover:before {
      width: 16px; /* 너비 */
      height: 16px; /* 높이 */
   }

   #menu1:hover .caption, #menu2:hover .caption, #menu3:hover .caption, #menu4:hover .caption, #menu5:hover .caption {
      opacity: 1;
      -moz-transform: translateY(-50px);
      -ms-transform: translateY(-50px);
      -o-transform: translateY(-50px);
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      margin:0;
      padding:0;
      float:left;
      z-index:5;
   }  

   #menu1 .caption, #menu2 .caption, #menu3 .caption, #menu4 .caption {
      position:absolute;
      width: 635px; /* 박스 너비 */
      height:400px; /* 박스 높이 */
      padding-top: 20px;
      background: rgba(0,0,0,0.6);
      opacity: 0;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition:all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      z-index: 10;
   }       

   #menu5 .caption {
      position:absolute;
      width:1300px; /* 박스 너비 */
      height:400px; /* 박스 높이 */
      background: rgba(0,0,0,0.6);
      opacity: 0;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition:all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      z-index: 10;
   }       
</style>
</head>
<body>
<div id="container">
<header>
   <nav>
      <ul id="main-nav">
         <li><a href='#'><b>사이트 소개</b></a></li>          
         <li><a href='catinfo.html'><h1>고양이 분양</h1></a></li>
         <li><a href='catshow.html'><b>고양이 자랑</b></a></li>
         <li><a href='#'><b>고객센터</b></a></li>
      </ul>
   </nav>
</header>
<section id="menus">
<div id="menu1">
   <div class="caption">
      <h4>
         품종 : 러시안블루<br>
         성별 : 남<br>
         나이 : 1살<br>
         분양가 : 100만원<br>
      </h4>
   </div>       
</div>
<div id="menu2">
   <div class="caption">
      <h4>
         품종 : 아메리칸 숏헤어<br>
         성별 : 여<br>
         나이 : 3개월<br>
         분양가 : 50만원<br>
      </h4>
   </div>       
</div>
<div id="menu3">
   <div class="caption">
      <h4>
         품종 : 코리안 숏헤어<br>
         성별 : 남<br>
         나이 : 2살<br>
         분양가 : 5만원<br>
      </h4>
   </div>
</div>
<div id="menu4">
   <div class="caption">
      <h4>
         품종 : 페르시안고양이<br>
         성별 : 남<br>
         나이 : 1살<br>
         분양가 : 1000만원<br>
      </h4>
   </div>
</div>
<div id="menu5">
   <div class="caption">
      <h4>
         품종 : 브리티쉬숏헤어<br>
         성별 : 남<br>
         나이 : 1살<br>
         분양가 : 20만원<br>
      </h4>
   </div>
</div>
</section>
</div>
</body>
</html>
caption으로 글자를 묶어서 관리했다.
id에는 #를, class에는 .를 쓰는게 아직 헷갈려서 조금 헤맸다.
저작자표시
'HTML5 & CSS3' 카테고리의 다른 글

[HTML] html과 기본 tag (0)	2021.11.20
[생활코딩-WEB1] 웹사이트 완성 (0)	2021.06.20
[HTML5 & CSS3] 실습 - 고양이 자랑 페이지 만들기 (0)	2021.02.15
[HTML5 & CSS3] 실습 - 고양이 분양 페이지 만들기 (0)	2021.02.15
[HTML5 & CSS3] 과제 (0)	2021.02.15
🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 실습 - 고양이 분양 페이지 (심화)

'HTML5 & CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML5 & CSS3] 실습 - 고양이 분양 페이지 (심화)

'HTML5 & CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바
