[HTML5 & CSS3] 과제

과제) PC, 태블릿, 모바일에서 화면이 각각 다르게 보이게 출력하라. (반응형 웹)

<내가 한 것>

<소스>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>반응형 웹</title>
<style>
   * {
      width:100%; /* 너비 */
      padding:0; /* 테두리와 내용 사이의 여백 */
      margin:0; /* 외부 여백 */
   }
   body {
      margin: 0 auto;  /* 외부 여백 */
      width:100%; /* 너비 */
   }
   header {
      width:100%; /* 너비 */
      height:100px; /* 높이 */
   }
   header h1 {
      width:20%; /* 너비 */
      height:100px; /* 높이 */
      padding-top:30px; /* 위에서부터 얼만큼 띄울건지 */
      float: left; /* 정렬 */
   }
   li {
      list-style:none; /* 목록 스타일 */
   }
   a {
      text-decoration:none; /* 글자 꾸밈 */
      color:inherit; /* 부모 객체의 속성을 그대로 사용 */
   }
   img {
      border:none; /* 테두리 */    
   }
   #logo {
      height:40px; /* 높이 */
   }
   .mnav {
      width:80%; /* 너비 */
      height:100px; /* 높이 */
      float: left; /* 정렬 */
   }
   .mnav > ul > li {
      width:25%; /* 너비 */
      height: 40px; /* 높이 */
      margin-top:30px; /* 요소 주변 여백 */
      position:relative; /* 원래 자신이 있어야될 위치를 기준으로 배치 */
      float:left; /* 정렬 */
   }
   .mnav > ul > li > a {
      display:block; /* 형태 */
      width:25%px; /* 너비 */
      height:40px; /* 높이 */
      text-align:center; /* 가운데 정렬 */
      line-height: 40px; /* 줄 간격 */
      font-size: 18px; /* 글자 크기 */
      color:black /* 글자 색 */
   }
   .mnav > ul > li > a:hover {
      background-color: gray; /* 메뉴에 마우스 대면 뜨는 메뉴 배경색 */
      color:#fff /*마우스 갖다댔을때 폰트 색*/
   }
   #main {
      width:100%; /* 너비 */
      position: relative; /* 원래 자신이 있어야될 위치를 기준으로 배치 */
      margin-bottom: 10px; /* 요소 주변 여백 */
   }
   #main ul {
      width:100%; /* 너비 */
      height:380px; /* 높이 */
      position: absolute; /* 가장 가까운 상위요소 기준으로 배치 */
   }
   #menus {
      width:100%; /* 너비 */
      height:400px; /* 높이 */
   }
   #menus > div {
      height: 400px; /* 높이 */
      margin-bottom: 10px; /* 요소 주변 여백 */
   }
   #menu1, #menu2, #menu3, #menu4 {
      width:100%; /* 너비 */
   }
   #menu1 {
      background:url("photo2.png") no-repeat center; /* 배경 이미지 반복 안함. 중앙 */
      background-size:cover; /* 가로 세로 비율 유지 */
   }
   #menu2 {
      background:url("photo3.png") no-repeat center; /* 배경 이미지 반복 안함. 중앙 */
      background-size:cover; /* 가로 세로 비율 유지 */
   }
   #menu3 {
      background:url("photo4.png") no-repeat center; /* 배경 이미지 반복 안함. 중앙 */
      background-size:cover; /* 가로 세로 비율 유지 */
   }
   #menu4 {
      background:url("photo5.png") no-repeat center; /* 배경 이미지 반복 안함. 중앙 */
      background-size:cover; /* 가로 세로 비율 유지 */
   }
   .clearfix:before, .clearfix:after {
      display: block; /* 요소가 어떻게 보여지는지 여부 */
   }
  
   @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%; /* 너비 */
      }
   }

   @media all and (min-width:992px) {
      #menu1, #menu2, #menu3 {
         width:33%; /* 너비 */
      }
      #menu4 {
         width:100%; /* 너비 */ 
      }
   }
</style>
</head>
<body>
<header>
   <nav class="mnav">
      <ul>
         <li>
            <a href='#'>학교 소개</a>
         </li>
         <li>
            <a href='#'>모집 과정</a>
         </li>
         <li>
            <a href='#'>과정 소개</a>
         </li>
         <li>
            <a href='#'>입학 상담</a>
         </li>
      </ul>
   </nav>
</header>
<div id="main clearfix">
   <ul>
      <li>
         <a href="#">
            <img src="photo1.png" alt="사진1">
         </a>
      </li>
   </ul>
</div>
<div id="menus">
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
<div id="menu4"></div>
</div>
</body>
</html>

저작자표시

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

[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] 미디어 쿼리를 사용해 웹 문서 만들기 (0)	2021.02.14

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 과제

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

댓글

티스토리툴바

[HTML5 & CSS3] 과제

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

관련글

댓글

티스토리툴바