HTML과 CSS
프런트엔드 개발을 집 짓는 것에 비유한다면 HTML은 기둥을 만들고 CSS는 꾸미는 역할을 하며 자바스크립트는 여러 시설을 동작하게 한다고 할 수 있다.
-
HTML은 마크업 구성에 가장 많이 사용되는 언어로, W3C, WHATWG 두 조직이 합의 하면서 현재 HTML의 표준은 과거와 달리 살아 있는 표준형태로 발전한다.
살아있는 표준은 웹 개발자, 벤더사, 이해당사자 등에게 피드백을 받으면서 지속적으로 업데이트 되는 표준을 의미한다. -
HTML은 다른 언어보다 느슨한 문법을 가지고 있다. 에러없이 요소가 렌더링 되고 에러 또한 노출되지 않는다. 그렇다 보니 표준을 준수하지 않고 코드를 작성하면, 예상치 못한 문제가 발생해 유지 보수 비용이 커진다.
요소는 크게 세가지
- Content(내용)
- Start Tag(시작 태그)
- End Tag(종료 태그)
로 나뉘며 이 3가지 구조를 합쳐 Element(요소)라고 부른다.
Start Tag와 End Tag
시작과 끝을 의미하는 태그.
태그는 <> 로구성되며 End Tag는 / 가 포함된다.
대부분의 요소는 Start Tag와 End Tag를 쌍으로 갖는다.
Void 요소
하지만 input 이나 hr, meta, link 처럼 End Tag가 없는 태그도 존재한다.
이러한 요소를 Void요소라고 부른다.
Void 요소는 End Tag를 작성하지 않아도 일반 요소처럼 작동한다.
Start Tag 내에 / 를 넣어 input/ 처럼 작성하기도 하는데, 이런 방식을 Self-closing 이라고 부른다.
Content와 Element
Content는 Start Tag와 End Tag 사이의 내용을 의미한다.
Attributes (속성)
속성은 태그의 동작을 제어하도록 사용자가 지정하는 값을 의미한다.
input disabled /
id 나 class, style 처럼 모든 요소가 사용할 수 있는 속성도 있지만, checked나 autoplay처럼 HTML 요소의 종류에 따라 사용하는 속성이 정해지기도 한다.
HTML 요소 분류하기
첫 번째 분류 방법은 HTML 4.01 사용하던 방법이고,
두 번째 분류 방법은 HTML5 에서 사용하는 방법이다.
과거의 구분법을 설명하는 이유는 레이아웃을 설계할 때 이해를 돕기 위함이다.
인라인 요소와 블록 요소
인라인 요소와 블록 요소로 HTML 요소를 구분하는 방식은 HTML 4.01 에서 사용한다.
요소가 문서에서 차지하는 영역을 기준으로 구분된다.
- 인라인(inline) 요소 : 태그가 할당된 크기에 맞는 필요한 공간만을 차지한다. 높이나 너비를 지정할 수 없으며 줄 내부 어디서든 시작한다.
span 이나 button, img 등이 대표적인 인라인 요소다.
- 블록(block) 요소 : 태그가 시작되면 이전 요소와 상관없이 개행해 새로운 줄에서 시작합니다. 너비는 좌우 양쪽으로 부모 요소의 100%를 차지하며, 왼쪽에서부터 오른쪽으로 확장된다.
div나 article, form 과 같은 요소들이 대표적인 블록 요소다.
블록 요소는 인라인 요소와 블록 요소를 모두 포함하지만, 인라인 요소는 인라인 요소만을 포함할 수 있다.
콘텐츠모델 (Contents Model)
HTML 5 에서는 요소가 어떤 콘텐츠를 표현할 수 있는지, 어떤 하위 요소를 가지는지에 따라 Contents Model(콘텐츠 모델)로 분류한다.
요소는 어떤 그룹에도 속하지 않거나 여러 그룹에 동시에 속한다.
시맨틱(Semantic)
Semantic이라는 단어는 의미의, 의미론적인 으로 해석된다.
즉 의미에 맞는 태그를 사용해 문서를 작성하는 것을 말한다.
즉 의미가 없는 div 태그를 대신에 section, article, footer, nav, aside 처럼 의미있는 태그를 상황에 따라 사용하는 것이다.
시멘틱하게 HTML을 작성하면 요소에 쉽게 의미를 부여할 수 있다. 각 요소가 자체적인 의미를 가지기 때문에 가독성이 높아지고 유지보수가 쉬워진다.
또한 장치에서 콘텐츠의 계층구조를 더 쉽게 이해할 수 있다.
검색 엔진은 HTML의 계층 구조에 따라 키워드들의 중요도를 파악하기 때문에 시맨틱하게 작성된 HTML 구조는 크롤러에 더 구체화한 정보를 제공할 수 있다.
어떻게 해야 시맨틱하게 작성하는 것일까?
아래 열거된 태그 및 기타 태그들을 적절히 활용하여 의미가 있는 태그를 쓴다.
h1 ~ h6
각 세션의 제목을 나타낸다. h1 이 제일 높고, h6 이 제일 낮다.
header
제목이나 대표 이미지가 들어가는 요소. body의 하위로 작성되면 웹 페이지의 전체 헤더를 정의하는 영역이며, article 또는 section 등 Sectioning Content의 하위로 사용되면 해당 영역의 헤더를 의미한다.
일반적으로 h1 .. h6 등의 요소나 로고 등을 포함한다.
footer
header 요소와 마찬가지로 전체 문서 또는 Sectioning Content의 바닥글로 쓴인다. 이 영역에 는 작성자나 관련 링크, 라이선서, 색인 등의 데이터가 들어간다.
main
페이지의 콘텐츠 영역을 의미한다. main은 페이지당 한 번 사용하며 body 아래 직접 추가한다. 이 요소는 다른 요소 내에 중첩되지 않아야 한다.
article
요소 자체가 하나의 의미 있는 콘텐츠 블록 영역이다. 즉 이 요소만으로 단일 게시물을 나타낼때 사용한다.
이 요소의 내용은 독립적으로 배포하거나 재사용된다.
블로그 항목이나 게시물, 기사, 위젯 등에 사용된다.
section
article과 유사하지만 페이지의 단일 부분을 그룹화하는 데에 유용한 요소다. 예를 들어 기사의 헤드라인을 모으거나 각 블로그의 피드 정보가 나타나는 영역으로 사용된다.
요소의 콘텐츠를 함께 묶는 것이 합리적일 때 article 대신 section 요소를 사용하는 것이 좋다.
다만 색션은 일반 컨테이너 요소가 아니기 때문에, 단순 스타일링을 위한 요소로 사용할 때는 div를 사용하는 것을 권장한다.
aside
기본 콘텐츠와는 직접 관련이 없지만 간접적으로 관련된 추가 정보를 표함하는 요소이다.
Nav 요소나 광고, 인용처럼 분리된 콘텐츠를 나타낼 때 사용한다.
nav
다른 페이지 또는 내 문서의 특정 영역(탐색 링크가 있는 섹션)으로 이동시키는 링크를 나타낸다.
