반응형 웹 기초

1. 메타 태그 추가

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

위 메타 태그를 추가하지 않으면, 모바일에서 글씨가 아주 작게 보인다.

절대단위	px
상대단위	em, rem, %

em과 rem은 텍스트 요소의 크기를 지정할 때 사용하는 상대단위이며, %는 요소의 높이, 너비 등을 지정할 때 사용한다.

em : 부모요소의 글꼴 크기를 기준으로 한다.

rem : 루트요소(html)의 글꼴 크기를 기준으로 한다., 기본값 16px

예를들어 위와 같이 지정했다면, 부모요소의 글자크기의 1.5배로 지정한다는 의미이다. 따라서 부모요소의 글자크기가 20px이었다면, 위의 스타일을 지정한 요소의 글자크기는 30px이다.

여기서 주의할 점! 만약, em, rem으로 padding이나 margin을 지정하면 기준이 자기자신의 글자크기다.