w3스쿨즈 HTML(11) - 반응형 웹디자인

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

반응 형 웹 디자인은 화면 크기와 뷰포트에 따라 자동으로 조정됩니다.

 

반응 형 웹 사이트를 만들려면 모든 웹 페이지에 다음 <meta> 태그를 추가하십시오.

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

 

Responsive Images(반응형 이미지)

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

• CSS width 속성을 100 %로 설정하면 이미지가 반응형이고 확대 및 축소됩니다.

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

 

• 위의 예에서 이미지를 원래 크기보다 크게 확대 할 수 있습니다. 대부분의 경우 더 나은 솔루션은 max-width 속성을 대신 사용하는 것입니다.

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

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

 

width, max-width의 차이

width: 100%로 지정한 경우 :

width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만,

max-width 속성은 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않는다.

width: 100%로 지정한 경우에는 창의 크기를 줄이거나 늘리면 창의 너비에 맞춰 크기가 충실히 증감한다.

 

max-width: 100% 로 지정한 경우

창의 크기를 줄이면 줄인만큼 충실히 줄어들지만, 크기를 키울 때는 원래 이미지 사이즈보다 커지지는 않는다.

가로 너비 값을 아무 것도 지정하지 않은 경우 창의 크기를 줄여도 이미지 크기에 아무런 변화도 없다.

 

Resopnsive Text size(반응형 텍스트 사이즈)

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

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

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

*테스트 결과 화면이 커지면 글자도 커지고 화면이 작아지면 글자도 작아진다.

 

Media Query(미디어 쿼리)

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

 

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

ex )3 개의 div 요소가 큰 화면에 가로로 표시되고 작은 화면에는 세로로 쌓일수 있다.

 

 

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

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

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>