반응형 웹에서는 px(고정된 크기)를 사용하는 것은 좋지 않습니다. 큰 화면에서나 작은화면에서나 고정된 크기를 보여주는 px단위 대신 em이나 rem을 사용합니다. em이란? 부모 요소의 글꼴을 기준으로 글자 크기의 영향을 받습니다. (바로 한단계위인 요소) 부모 요소의 글꼴크기가 기본이면 대문자 M의 너비를 1em으로 지정한 것으로 1em = 16px입니다. 부모 요소 폰트 사이즈가 20px일 경우 2em = 40px이 됩니다. 부모 요소의 글자크기에 따라 em 수치가 달라지는 것이 단점이라고하면 단점입니다. rem이란? em의 단점 부분을 보안하기위해 만들어진 단위이며 rem에 r은 루트를 뜻하고 부모요소의 폰트크기와 상관없이 루트요소의 폰트크기에만 영향을 받습니다.
HTML4때 까지는 div태그에 id나 클래스이름으로 보여주는 화면의 부분을 나누어 사용했으나 이로인해 검색엔진은 웹페이지를 제대로 식별하지 못했습니다.그것을 보안하고자 의미적 요소의 태그들이 HTML5에 등장한 것입니다. 이런 식의 구조로 만들면 스크린 리더나 웹 소스를 보면 태그만 보아도 이부분이 어디에 위치하며 무슨 의미를 정의하고 있는지 바로 알 수 있습니다. Semantic Elements in HTML5제목, 로고(아이콘), 저자 정보 등을 포함합니다. 탐색 링크를 정의합니다. 콘텐츠를 주제별로 묶고 싶을 경우 사용 독립적으로 사용할 수 있는 내용을 정의합니다. 사이드 바 부분에 메인 내용과 상관없는 광고나 내용들을 정의합니다. 웹페이지의 가장 아래부분에 속하며 저자, 저작권, 연락처, 사이트..