아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다.
HTML은 웹 사이트, 혹은 웹 애플리케이션 문서의 구조를 담당하고 있다. 이 구조는 자유롭게 작성이 가능하지만, tag의 의미와 사용법을 무시한 채 디자인만 생각하고 작성하는 경우가 많다는 것이다. 물론 tag의 의미와 사용법을 무시하더라도, 디자인에는 영향이 없는 경우도 있다. 때문에 이 부분을 더 소홀하게 여기는 경우가 많은 것 같다. 하지만 시맨틱 한 웹 환경과 웹 접근성까지 고려한다면 이 부분에 대해서 한 번쯤 생각해볼 필요가 있다. (엘리먼트들을 전부 외워둘 필요는 없지만, 어떤 엘리먼트들이 있는지 정도는 한번쯤 체크해두어야 나중에 찾아볼 수 있을 것이므로 확인해두는 것이 필요하다.)
엘리먼트는 아래의 카테고리에 속할 수 있다. 또한 하나의 엘리먼트가 여러개의 카테고리에 중복으로 속할수도 있다.
구분 | 설명 |
---|---|
metadata (메타데이터) | 엘리먼트가 감싸고 있는 데이터의 성격을 정의하거나 문서를 설명함. |
flow content (플로우 컨텐츠) | body 엘리먼트 하위에서 사용되는 엘리먼트들이나 응용프로그램(애플리케이션)에서 사용되는 엘리먼트들의 대부분을 말함. flow content는 문자나 컨텐츠를 자식으로 가져야 하고, 여기서 말하는 컨텐츠는 img 엘리먼트와 같이 외부의 자원을 문서에 삽입할 때 사용하는 엘리먼트들을 의미한다. (audio, canvas, embed, iframe 등) |
section content (섹션 컨텐츠) | 기능이나 의미에 따라서 구간을 구분짓는 엘리먼트. ex) nav 엘리먼트는 문서 안에서 네비게이션에서 사용되는 엘리먼트들을 감싸서 네비게이션 영역을 분류할 수 있다. |
heading content (헤딩 컨텐츠) | 제목을 표현할 때 사용하는 엘리먼트. (h1 ~ h6, hroup) |
phrasing content (구문 컨텐츠) | 문자나 구문을 표시하는 엘리먼트. 구문 컨텐츠가 모여서 문단(paragraphs)를 만든다. |
embedded content (포함된 컨텐츠) | 다른 자원을 문서에 삽입하는 엘리먼트를 의미한다. |
interactive content (대화형 컨텐츠) | 사용자와 상호작용을 하기 위한 엘리먼트. (a, input, button과 같은 엘리먼트들이 있다.) |
head Element 내부에서 사용하는 Elemente들은 문서를 작성하는 필요한 외부 문서를 불러오는데 사용하거나, 문서의 정보를 브라우저가 확인할 수 있도록 알려주는 기능을 담당한다.
Element | 설명 |
---|---|
title |
문서마다 유일한 내용 (tip : 페이지와 웹사이트 정보를 함께 표기하는 것이 좋다.) |
link |
head element 내부에만 위치할 수 있으며, 스타일시트, 파비콘 등 외부 문서를 불러올 때 사용한다.
|
base |
상대경로 작성 시 기준 URL. 각 문서에 한번 작성하며 일부에서만 사용할 경우 문제가 될 수 있기 때문에 주의해야 한다. |
charset
: 문자의 인코딩 방식을 선언한다.<meta charset="UTF-8">
name
과 content
특성을 함께 사용해서 문서의 메타데이터를 제공한다.
keyword
: 웹페이지의 홍보수단으로 검색 키워드를 지정 가능하며, ,
로 구분하여 선언한다.<meta name="keyword" content="HTML, tag, element, Frontend">
subject
: 문서의 제목정보<meta name="subject" content="HTML tag">
description
: 웹페이지 요약 정보, 제작자 정보(autuor), 저작권 정보(copyright)<meta name="description" content="HTML tag 정리">
author
: 문서의 저작자<meta name="author" content="Kim Kyuree">
viewport
: 반응형 설정을 위한 정보<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3">
width
: 가로크기height
: 세로크기initial-scale
: 초기렌더링 비율user-scalable
: 축소.확대 기능maximum-scale
: 최대확대비율minimum-scale
: 최소축소비율