[HTML5 & CSS3] 실습 - 고양이 분양 페이지 만들기

조건) 이미지 최소 3장 이상. 텍스트: 품종, 성별, 나이, 분양가

<내가 한 것>

<소스>

<!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 h4 {
      position: absolute;
      padding: 5px; /* 테두리와 내용 사이의 여백 */
      font-size: 20px;
      color:white;
      text-shadow: 3px 3px 5px black;
      right: 3%;
      bottom: 10px;
   }
   #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, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover {
      opacity: 0.2;
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -o-transform: translateY(0px);
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
   }            
</style>
</head>
<body>
<div id="container">
<header>
<nav>
   <ul id="main-nav">
      <li><a href='#'><b>사이트 소개</b></a></li>          
      <li><a href='#'><b>고양이 분양</b></a></li>
      <li><a href='#'><b>고양이 자랑</b></a></li>
      <li><a href='#'><b>고객센터</b></a></li>
   </ul>
</nav>
</header>
<section id="menus">
   <div id="menu1">
      <h4>
         품종 : 러시안블루<br>
         성별 : 남<br>
         나이 : 1살<br>
         분양가 : 100만원
      </h4>
   </div>
   <div id="menu2">
      <h4>
         품종 : 아메리칸 숏헤어<br>
         성별 : 여<br>
         나이 : 3개월<br>
         분양가 : 50만원
      </h4>
   </div>
   <div id="menu3">
      <h4>
         품종 : 코리안 숏헤어<br>
         성별 : 남<br>
         나이 : 2살<br>
         분양가 : 5만원
      </h4>
   </div>
   <div id="menu4">
      <h4>
         품종 : 페르시안고양이<br>
         성별 : 남<br>
         나이 : 1살<br>
         분양가 : 1000만원
      </h4>
   </div>
   <div id="menu5">
      <h4>
         품종 : 브리티쉬숏헤어<br>
         성별 : 남<br>
         나이 : 1살<br>
         분양가 : 20만원
      </h4>
   </div>
</section>
</div>
</body>
</html>

저작자표시

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

[HTML5 & CSS3] 실습 - 고양이 분양 페이지 (심화) (0)	2021.02.15
[HTML5 & CSS3] 실습 - 고양이 자랑 페이지 만들기 (0)	2021.02.15
[HTML5 & CSS3] 과제 (0)	2021.02.15
[HTML5 & CSS3] 플렉스 박스 항목 배치를 위한 속성들 (2)	2021.02.15
[HTML5 & CSS3] 플렉스 박스 레이아웃 (0)	2021.02.14

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 실습 - 고양이 분양 페이지 만들기

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

댓글

티스토리툴바

[HTML5 & CSS3] 실습 - 고양이 분양 페이지 만들기

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

관련글

댓글

티스토리툴바