25. HTML 반응형 웹 디자인

 

반응형 웹 디자인이란 무엇일까요?

---

반응 형 웹 디자인은 HTML 및 CSS를 사용하여 웹 사이트의 크기를 자동으로 조정, 숨기기, 축소 또는 확대하여 모든 장치 (데스크톱, 태블릿 및 전화)에서 보기 좋게 보이도록 합니다.

See the Pen 00.Resize the browser window by heunho (@heunho) on CodePen.

참고 : 해당 방법을 사용하면 모든 장치에서 웹 페이지가 이쁘게 잘 보입니다.

 

뷰포트 설정

---

반응형 웹 페이지를 만들 때는 모든 웹 페이지에 다음 <meta> 요소를 추가하세요.

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

그러면 페이지의 뷰포트가 설정되어 페이지의 크기와 크기를 제어하는 방법에 대한 브라우저 지침이 제공됩니다.

 

다음은 뷰포트 메타 태그가 없는 웹 페이지와 뷰포트 메타 태그가 있는 동일한 웹 페이지의 예시입니다.

viewport <meta>태그가 없는 경우	viewport <meta>태그가 있는 경우

 

 

 

 

반응형 이미지

---

반응형 이미지는 모든 브라우저 크기에 맞게 확장할 수 있는 이미지입니다.

 

width 속성 사용

CSS width 속성을 100%로 설정하면 이미지가 반응형으로 인식하고 브라우저 크기에 따라 확대 및 축소됩니다.

위 이미지의 코드는 다음과 같습니다.

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

해당 예제는 이미지를 원본 크기보다 크게 확대될 수도 있습니다.

(이렇게 되면 이미지 화질이 깨지는 현상이 생길 수도 있습니다.)

 

그래서 대부분의 경우 max-width 속성으로 대체하는 것이 더 나은 솔루션이 될 수도 있습니다.

---

max-width 속성 사용

max-width 속성을 100%로 설정하면 이미지가 필요한 경우 축소되지만 원래 크기보다 크게 확대되지는 않습니다.

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

---

브라우저 너비에 따라 다른 이미지 표시하기

HTML <picture> 요소를 사용하면 브라우저 창 크기마다 다른 이미지를 정의할 수 있습니다.

너비에 따라 아래 이미지가 어떻게 변경하는지 보려면 브라우저 창 크기를 조정해보세요.

<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>

 

 

반응형 텍스트 크기

---

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

vw 단위로 설정하게 되면 텍스트 크기가 브라우저 창의 크기에 따라 변경됩니다.

See the Pen 01.Responsive Text Size by heunho (@heunho) on CodePen.

뷰포트는 브라우저 창 크기입니다. 1vw = 뷰포트 너비의 1 % 뷰포트의 너비가 50cm 인 경우 1vw는 0.5cm입니다.

 

 

 

 

미디어 쿼리

---

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

미디어 쿼리를 사용하면 다양한 브라우저 크기에 맞게 완전 다른 스타일을 정의할 수 있습니다.

See the Pen 02.Media Queries by heunho (@heunho) on CodePen.

 

 

 

 

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

---

반응형 웹 페이지는 큰 데스크톱 화면과 작은 스마트폰에서 잘 보입니다.

See the Pen 03.Responsive Web Page - Full Example by heunho (@heunho) on CodePen.

 

 

 

 

반응형 웹 디자인 - Framework

---

반응형 디자인을 제공하는 CSS 프레임워크가 많이 있습니다. 여기서 나오는 프레임워크는 무료이며 사용하기 쉽고 편리합니다.

 

 

 

 

W3.CSS Framework 사용하기

---

반응형 디자인을 만드는 가장 좋은 방법은 W3.CSS와 같이 반응형 스타일 시트를 사용하는 것입니다. W3.CSS를 사용하면 모든 규모의 멋진 사이트를 쉽게 개발할 수 있습니다. 데스크톱, 노트북, 태블릿 또는 스마트폰까지 손쉽게 개발 가능합니다.

See the Pen 04.Using W3.CSS by heunho (@heunho) on CodePen.

 

 

 

 

Bootstrap Framework 사용하기

---

널리 사용되는 또 다른 프레임 워크는 Bootstrap이며 HTML, CSS 및 jQuery를 사용하여 반응 형 웹 페이지를 만들 수 있게 제공합니다.

See the Pen 05.Bootstrap by heunho (@heunho) on CodePen.

 

 

 

 

---

틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.

---

대부분의 내용의 저작권은 w3schools에 있습니다.

HTML Responsive Web Design