OCEAN-WARD BOUND

CSS로 스타일링을 진행할 때 어떤 요소의 크기 값을 지정하는 일이 매우 자주 일어납니다. 저는 주로 px로 크기를 지정했는데, 다른 사람의 코드를 보다 보면 크기 지정을 px이 아닌 rem과 em을 사용하는 분들이 많더라구요. 저는 계속 px로 사용하면서 불편한 부분을 못느꼈지만, CSS를 만든 사람들이 rem과 em을 도입했다면 분명히 합당한 이유가 있겠죠? 오늘 확실히 정리해서 그 이유를 알아보겠습니다. rem, em이란? 우선 rem과 em은 상대적 단위라는 공통 분모가 있습니다. 상대적 단위를 이해하기 위해서 반의적인 절대적 단위를 먼저 보겠습니다. px은 절대적 단위입니다. 만약 어떤 엘리먼트의 font-size를 16px로 지정했다면, 그 엘리먼트는 어떠한 일이 있어도 16px로 고정되는 것..

HTML과 CSS에서는 모든 요소들은 박스 형태로 구성된다. 이러한 박스 형태로 레이아웃을 구성하거나 레이아웃의 크기 및 모양 등을 수정할 수 있게 한다. 이러한 개념을 Box Model이라고 한다. CSS에서는 크게 두가지 유형(Block, Inline)의 Box Model이 있다. Block 1. 너비를 100%로 줄 경우, 상위 콘테이너의 영역 만큼 인라인 방향(가로)으로 연장되어 공간을 채운다. 2. 같은 행에 여러 개가 들어갈 수 없다. (줄바꿈) 3. width, height를 설정할 수 있다. 4. margin, padding, border로 인해 다른 요소들이 밀려난다. 이런 block 유형의 요소로는 , , , 등이 있다. Inline 1. 요소들이 한 행에 여러 개가 들어갈 수 있다. ..

시맨틱 HTML(Semantics HTML)은 HTML5에서 제시된 특징 중 가장 대두되는 것이다. 시맨틱(Semantics)을 직역하자면, 의미론적이란 뜻이다. 따라서 시맨틱 HTML이란 의미론적 HTML이란 뜻이다. 그럼 의미론적 HTML이란 무엇일까? 하나의 웹페이지를 구성하는 HTML 태그에는 다양한 종류가 있다. 태그는 paragraph란 뜻의 태그이며, 하나의 문단을 나타낸다. 태그는 division이란 뜻이며, 웹페이지에서 구역을 분리시킬 때 사용한다. 태그는 Anchor란 뜻이며, 하이퍼링크를 사용해서 다른 페이지나 같은 페이지의 다른 위치로 이동할 때 주로 사용한다. 해당 태그들의 특징은, 그 태그의 이름이 해당 웹페이지에서 어떤 역할을 하고 있는지 나타내지 않는다는 특징이 있다. 아래의..

HTML 문서에서 태그는 태그와는 다르게 웹페이지에 보이지 않는 내용을 담고 있습니다. 웹페이지의 주된 Content(내용)가 아닌, 해당 웹페이지를 설명해주는 메타데이터가 기록되는 곳이 바로 태그입니다. 메타데이터란? 메타데이터의 가장 단순한 정의는 데이터들을 위한 데이터라고 하며, 문서의 직접적인 내용이 아닌 문서의 작성자, 문서의 설명, 문서의 대표 이름과 같은 데이터를 설명해주는 데이터의 모음을 뜻한다. 그럼 태그에서 사용되는 대표적인 기능들을 알아보겠습니다. 1. 문서 전체의 제목을 표현하기 위한 메타데이터, 웹브라우저 탭에 표현되며 다양한 검색 엔진(구글, 야후)에서 검색 결과 요소로 사용된다. 2. html에서 메타데이터를 저장하기 위해 기본적으로 제공하는 키워드이다. 여러 가지 속성을 이용..