모든 디바이스에서 작동하는 무언가를 만들기 위해 브라우저의 크기의 변화에 반응하는 웹 사이트를 만들 때 사용되는 용어입니다.
<meta>
태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있다.<meta name="viewport" content="width=device-width, initial-scale=1">
고정 너비를 정하면 그 너비 이하로 줄어들 수 없기 때문에
width
를max-width
나min-width
로 바꾸는 것이 좋다.
화면이 작아질 때 해당
div
안의 콘텐츠가 넘칠 수 있다.
height
를min-height
로 변경하면 해결된다.
margin
과padding
을 사용하면 내부 콘텐츠의 내용에 관계없이 요소를 유연하게 유지할 수 있다.
일반적으로 너비가 작을수록 고정하는 것이 좋다.
ex)32px
사이즈의 아이콘, 사이드바, 헤더, 푸터
percentage를 사용하지 않아도 대부분의 요소는 이미 뷰포트에 반응한다.
요소의 너비를 정의하기 위해 percentage 대신 정적 여백(margin)을 사용하자!
화면 크기가 변경됨에 따라 카드 양쪽의 여백이 변경된다.
object-fit
과 background-size
의 주요 차이점은 무엇인가요?
object-fit
은img
나video
태그에 사용되고,background-size
는 배경 이미지가 있는 요소에 작동하는 속성이고,img
태그에서는 동작하지 않습니다.
object-fit
,background-size
사용
- 모바일 화면의 경우 큰 이미지를 삽입할 필요가 없다.(대역폭이 낭비된다)
img
와 srcset
vs picture
을 사용하고 싶나요?성능 향상이 필요할땐
img
, 디자인 컨트롤이 필요할 땐picture
을 사용한다.