HTML 반응 형 웹 디자인 [뷰포트 설정&반응형 이미지]

반응 형 웹 디자인이란 무엇입니까?

반응 형 웹 디자인을 사용하면 웹 페이지를 모든 장치 (데스크톱, 태블릿, 휴대 전화)에서 잘 보이게 할 수 있습니다.

반응 형 웹 디자인은 HTML 및 CSS를 사용하여 화면의 모양이 잘 보이도록 내용의 크기를 조정, 숨기기, 축소, 확대 또는 이동하는 방법입니다.

뷰포트 설정하기

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

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

뷰포트 메타 태그가없는 경우 :

뷰포트 메타 태그 사용 :

반응 형 이미지

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

width 속성 사용

width 속성을 100 %로 설정하면 이미지가 반응하고 크기가 조정됩니다.

max-width 속성 사용

max-width 속성을 100 %로 설정하면 원본 크기보다 커야하지만 확대되지 않는 이미지는 축소됩니다.