[HTML5 & CSS3] 미디어 쿼리를 사용해 웹 문서 만들기

▶ 미디어 쿼리를 사용해 웹 문서 만들기

*레이아웃 구상하기

반응형 웹 디자인은 화면 해상도에 따라 화면 요소들을 옮길 수 있어야 하므로 처음부터 레이아웃을 잘 구상하고 옮길 부분을 결정해야 한다. 이때 주로 모바일 화면부터 시작해 태블릿과 PC 화면 순서대로 구상하면 편하다.

*미디어 쿼리 중단점 결정하기

미디어 쿼리를 사용하려면 중단점을 먼저 결정해야 한다. 여기에서 만들어 볼 문서는 화면 너비에 따라 카드를 가로로 배치하거나 세로로 배치하기 때문에 카드 너비 값만 정하면 미디어 쿼리 중단점을 정할 수 있다.

모바일 화면일 경우 이미지와 텍스트를 세로로 배치하기 때문에 이미지 너비 값을 기준으로 카드 너비 값을 결정하면 된다. 사용할 이미지의 너비가 300px이므로 카드의 너비도 300px로 지정하면 된다.

태블릿 화면일 경우 이미지와 텍스트를 나란히 배치한 카드의 너비를 정하면 되는데 여기에서는 550px로 하겠다. 이렇게 하면 왼쪽 이미지의 너비는 300px이 되고 오른쪽 텍스트의 너빈느 250px정도가 된다. 표시해야 할 텍스트 양이 많다면 카드 너비 값을 크게 지정하면 된다.

데스크톱 화면에서는 카드 3개를 나란히 배치하려고 한다. 카드 너비가 550px짜리 세 개와 카드마다 마진을 각각 10px로 지정할 생각이라면 최소한 화면 너비가 1710px 이상이어야 한다.

*태그로 구성하기

웹 문서의 다른 요소들에 영향을 주지 않으면서 위치를 바꾸려면 미디어 쿼리의 영향을 받는 요소를 <div> 태그로 묶어줘야 한다.

<HTML>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>INSPIRATIONAL QUOTES</title>
<link rel="stylesheet" href="css/style-result.css">
</head>
<body>
<div id="container">
<div class="card">
<img src="images/1.jpg">
<div class="words">
<h2>일 분 전만큼 먼 시간은 없다.</h2>
<h3>- Jim Bishop</h3>
</div>
</div>
<div class="card">
<img src="images/2.jpg">
<div class="words">
<h2>웃음은 마음의 조깅이다.</h2>
<h3>- Norman Cousins</h3>
</div>
</div>
<div class="card">
<img src="images/3.jpg">
<div class="words">
<h2>낡은 옷은 그냥 입고 새 책을 사라.</h2>
<h3>- Austin Phelps</h3>
</div>
</div>
</div>
</body>
</html>

<CSS>

   * {
   margin:0;
      padding:0;
      box-sizing: border-box;
   }
   body {
      background:rgb(9, 100, 160);
   }
   #container {
      width:320px;
      margin:50px auto;
   }
   .card {
      position:relative;
      width:300px;
      height:500px;
      margin:20px 10px;
      border:1px solid #0f0f0f33;
      background-color:#ffffff;
   }
   .words {
      position:absolute;
      left:10px;
      top:300px;
      padding:10px;
      text-align:center;
   }

   @media screen and (min-width:768px) and (max-width:1719px) {
      #container {
         width:570px;
         margin:50px auto;
      }
      .card {
         position:relative;
         width:550px;
         height:250px;
         margin:20px 10px;
         border:1px solid #0f0f0f33;
         background-color:#ffffff;
      }
      .words {
         position:absolute;
         left:310px;
         top:50px;
         text-align:center;
         width:200px;
      }
   }

   @media screen and (min-width:1720px) {
      #container {
         width:1710px;
         margin:50px auto;
      }
      .card {
         position:relative;
         float:left; /* 카드를 가로로 배치 */
         width:550px;
         height:250px;
         margin:10px;
         border:1px solid #0f0f0f33;
         background-color:#ffffff;
      }
      .words {
         position:absolute;
         left:310px;
         top:50px;
         text-align:center;
         width:200px;
      }
   }

저작자표시

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

[HTML5 & CSS3] 플렉스 박스 항목 배치를 위한 속성들 (2)	2021.02.15
[HTML5 & CSS3] 플렉스 박스 레이아웃 (0)	2021.02.14
[HTML5 & CSS3] 미디어 쿼리 이해하기 (미완성) (0)	2021.02.14
[HTML5 & CSS3] 가변 레이아웃과 가변 요소 (0)	2021.02.14
[HTML5 & CSS3] 가변 그리드 레이아웃 (0)	2021.02.14

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 미디어 쿼리를 사용해 웹 문서 만들기

▶ 미디어 쿼리를 사용해 웹 문서 만들기

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

댓글

티스토리툴바

[HTML5 & CSS3] 미디어 쿼리를 사용해 웹 문서 만들기

▶ 미디어 쿼리를 사용해 웹 문서 만들기

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

관련글

댓글

티스토리툴바