| 참고할 내용은 필요에 따라 더 추가할 예정인 게시글 입니다. |
1. DOCTYPE "문서타입을 지정"
: 문서타입을 지정하는 것이다. 만일 <!DOCTYPE html>과 같이 지정하면 HTML5로 작성된 문서임을 나타낸다.
: 보통 IE9 이전 버전의 브라우저를 제외하고는 이를 명시하지 않아도 HTML5로 인식하지만 혹시 모를 문제를 예방하고 일관된 렌더링을 위해서는 문서타입을 명시하는 것이 중요하다. 그래서 일반적으로 문서타입 지정이 처음 문단에 입력된다.
2. <html>
<html> 태그는 문서의 루트 지점을 명시하는 태그다. 이 태그를 작성할 때 lang 속성을 해당 서비스 국가에 맞게 넣는 것이 중요하다. lang 속성 지정을 통해 이 문서의 언어가 스크린 리더 등의 장치에서 일관되게 판단되도록 해야 한다. 이러한 점에서 다국어를 지원하는 서비스가 있다면 그 언어에 따라 속성을 변경해야 한다.
|
<!DOCTYPE html>
<html lang="ko"> ko 는 한국어 식별자로 lang 속성에 할당한다.
</html> |
3. <head> "문서 제목, 문서 인코딩 형식 등 지정, 스타일 지정도 가능"
<head> 태그는 문서의 제목이나 문서의 인코딩 형식 등을 지정한다. 자주 사용되는 요소들을 정리해보면 다음과 같다.
1) <title> 제목 </title>
이 요소는 문서의 제목을 나타낸다. 문서 당 한 개의 제목 요소가 있어야 하며, 사용자 북마크 검색엔진에서 식별하는 기준으로 사용된다.
2) <meta ~ />
메타 태그에서는 메타 데이터를 다룬다. 메타 데이터는 데이터에 대한 데이터 혹은 어떤 목적으로 만들어진 데이터의 의미하고, 주로 기계가 읽고 이해하는 정보이다. 이 태그를 통해서 인코딩 형식(UTF-8 등), 뷰포트 지정뿐 아니라 다양한 작업이 가능하다.
(1) charset "인코딩 형식 지정"
문서의 인코딩 형식을 지정하는 것으로 지정 하지 않으면 문자 깨짐 현상이 발생할 수 있다.
(2) http-equiv
추가로 메타 태그 내에 http-equiv와 content 속성을 이용해서 IE의 렌더링 사양을 좀 더 세밀하게 조정할 수 있다. X-UA-Compatible 값을 IE-Edge로 지정한다면 렌더링 시 최신 Edge 모드를 사용한다.
4. body "실제 웹페이지에 보여줄 내용이 들어가는 곳"
바디 태그는 문서의 내용이 들어가며, 일반적으로 <head> 태그 다음에 들어간다. 즉, 웹페이지를 이용하는 사람이 실제 인식하게 되는 내용들을 나타내는 공간이다.
5. 그 외 주요 요소들(시맨틱 요소)
| HTML을 작성할 때는 제일 중요한 것은 의미있는 태그를 사용해서 작성해야 한다. 이를 Semantic 이라 한다. |
1) <h1> ~</h1> 등 "각 섹션의 제목 역할"
각 섹션의 제목을 나타낸다. 각 제목 구획의 단계 즉 크기는 h1이 가장 높고 h6이 가장 낮다.
2) <header> ~</header> " 제목, 대표이미지가 들어가는 곳"
제목이나 대표 이미지가 들어가는 요소다. <body> 의 하위에 작성되면 웹 페이지의 전체 헤더를 정의하는 영역이 된다. 그외 <artcle> 또는 <section> 등 Sectioning Content의 하위로 사용되면 해당 영역의 헤더를 의미한다.
3) <footer> ~ </footer> "바닥글로서 작성자, 관련문서 링크, 라이선스, 이메일 등을 입력하는 곳"
header 요소와 마찬가지로 전체 문서 또는 Sectioning Content의 바닥글로 사용된다. 이 영역에는 작성자나 관련 문서의 링크, 라이선스, 색인 등의 데이터가 들어간다.
4) <main> "페이지의 콘텐츠 영역"
페이지의 콘텐츠 영역을 의미한다. 이 요소는 페이지 당 한 번 사용하며, <body>아래에 직접 추가 해서 사용한다. 이 요소는 페이지 당 하나만 존재해야 하므로 다른 요소와 중첩되지 않도록 하는 것이 중요하다.
5)<article> ~</article> " 관련 있는 내용 중 독립적으로 구성된 글을 별로도 묶음"
이 요소 자체가 하나의 이미 있는 컨텐츠 블록 영역이 된다. 즉 이 요소만으로 단일 게시물을 나타낼 수 있을 때 활용한다. 따라서 이 요소를 통해 작성된 내용은 독립적으로 배포되거나 재사용된다. 보통 블로그 항목이나 게시물, 기사, 위젯 등에서 사용된다.
6)<section> ~ </section> " 유사한 내용을 하나로 묶는 역할을 하는 요소"
이 요소는 5)의 요소와 비슷하지만 페이지의 단일부분을 그룹화 하는 데 유용하게 사용되는 요소이다. 예를 들어 기사의 헤드라인을 묶거나 각 블로그의 피드 정보가 나타나는 영역으로 사용한다.
- 요소의 콘텐츠를 묶는 것이 합리적일 때는 <article> 대신에 이 요소를 활용하는 것이 좋다. 다만 이 요소는 일반 컨테이너 요소가 아니므로 단순 스타일링을 위한 목적이라면 <div>와 같은 의미없는 요소를 활용하는 것이 좋다.
- 추가로 section은 article 보다 조금 더 포괄적이다.
7) <aside>
기본 콘텐츠와는 직접 관련이 없지만 간접적으로 관련된 추가 정보를 포함시킬 때 활용하는 요소이다. <nav> 요소나 광고, 인용처럼 분리된 콘텐츠를 나타낼 때 유용하다.
8) <nav> "이동 링크를 나타낼 때 쓰는 태그"
다른 페이지 또는 내 문서의 특정 영역으로 이동시키는 링크를 나타낼 때 활용한다. 즉, <a href=" "> ~</a>와 같이 링크를 나타내는 요소들을 하나로 묶어서 나타낼 때 활용한다. <li><a href=" "> ~</a></li> 와 같이 리스트 형식 요소로 묶어 주면 목록형태로 나타나게 된다.
댓글