▶ 반응형 웹 디자인은 모든 장치에서 잘 보이는 웹 페이지를 만드는 것이다.

▶ 반응형 웹 디자인은 다양한 화면 크기와 뷰포트에 맞게 자동으로 조정된다.

 

■ 반응형 웹 디자인이란?

▶ 반응형 웹 디자인은 HTML과 CSS를 사용하여 웹 사이트의 크기를 자동으로 조정, 숨기기, 축소 또는 확대하여 모든 장치에서 보기 좋게 만든다.

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_page 

 

■ 뷰포트 설정하기

▶ 반응형 웹 디자인을 만드려면 모든 웹 페이지에 다음 <meta> 태그를 추가한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_viewport 

 

▶ 페이지의 크기와 배율을 제어하는 방법에 대한 Browser 지침을 제공하는 페이지의 뷰포트가 설정된다.

▶ 아래의 이미지는 뷰포트 매타 태그 없고, 있고 차이다.

 

■ 반응형 이미지

▶ 반응형 이미지는 모든 Browser 크기에 맞춰 적절한 배율을 가지는 이미지이다.

□ "width" 속성 사용하기

▶ CSS "width" 속성이 100% 로 설정되어 있으면 이미지가 반응하고 확대/축소가 된다.

<img src="img_girl.jpg" style="width:100%;">

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_image 

 

▶ 이미지를 원래 크기보다 크게 확대할 수 있다.

▶ 대부분의 경우 더 나은 솔루션은 "max-width" 속성을 대신 사용하는 것이다.

 

□ "max-width" 속성 사용하기

▶ "max-width" 속성이 100%로 설정되어 있으면 이미지의 크기가 축소되어야 하지만 원래 크기보다 크게 확대되지는 않는다.

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_image_maxwidth 

 

■ Browser 너비에 따라 다른 이미지 표시

▶ HTML <picture> 요소를 사용하면 다른 Browser 창 크기에 대해 다양한 이미지를 정의할 수 있다.

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_picture 

 

■ 반응형 텍스트 크기

▶ 텍스트 크기는 "뷰포트 너비"를 의미하는 "vw" 단위로 설정할 수 있다.

▶ 텍스트 크기가 Browser 창의 크기를 따른다.

<h1 style="font-size:10vw">Hello World</h1>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_text 

 

※ 뷰포트는 Browser 창 크기다.

※ 뷰포트 너비의 1vw = 1%이다.

※ 뷰포트의 너비가 50cm 이면, 1vw은 0.5cm 이다

 

■ 미디어 쿼리

▶ 텍스트와 이미지의 크기를 조정하는 것 외에도 반응형 웹 페이지에서 미디어 쿼리를 사용하는 것도 일반적이다.

▶ 미디어 쿼리를 사용하면 다양한 Browser 크기에 대해 완전히 다른 스타일을 정의할 수 있다.

▶ 예 : Browser 창의 크기를 조정하여 아래 예시의 세 개의 div 요소가 큰 화면에서는 가로로 표시되고 작은 화면에서는 세로로 쌓인다.

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query 

 

■ 반응형 웹 페이지 - 전체 예시

▶반응형 웹 페이지는 큰 데스크톱 스크린과 작은 모바일 폰에서 보기 표시되어야 한다.

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query3 

 

■ 반응형 웹 디자인 - Frameworks

▶ 모든 인기있는 CSS Frameworks는 반응형 디자인을 제공한다.

▶ 사용하기 쉽고 무료이다.

□ W3.CSS

▶ W3.CSS는 기본적으로 데스크톱, 태블릿, 모바일 디자인을 지원하느 현대 CSS Framework이다.

▶ W3.CSS는 유사한 CSS Frameworks 보다 작고 빠르다.

▶ W3.CSS는 jQuery 또는 기타 Javascript 라이브러리와 독립적으로 설계됬다.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_w3css 

 

■ Bootstarp

▶ 다른 인기있는 CSS Frameworks는 Bootstrap이다.

▶ Bootstarp은 반응형 웹 페이지를 만들기 위해 HTML, CSS와 jQuery를 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>

실습 : https://www.w3schools.com/html/html_layout.asp

 

출처 : https://www.w3schools.com/html/html_responsive.asp

 

HTML Responsive Web Design

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

'HTML' 카테고리의 다른 글

HTML / (43) Semantic 요소  (0) 2023.02.25
HTML / (42) 컴퓨터 Code 요소  (0) 2023.02.24
HTML / (40) 레이아웃 요소 및 기술  (0) 2023.02.24
HTML / (39) head 요소  (0) 2023.02.24
HTML / (38) 파일 경로  (0) 2023.02.24

+ Recent posts

티스토리툴바