-
[HTML]html 문서 구조프로그래밍/HTML&CSS 2021. 12. 17. 15:35
HTML 문서구조 HTML 문서는 크게 head 영역과 body 영역으로 나뉜다.
head 영역은 웹 페이지 상에 나타나지 않으나 웹 페이지를 설명해주는 부분이며,
body 영역은 웹 페이지 상에서 보여지는 본문 부분이다.
1. <!docytype html>이 문서가 HTML 문서인 것을 선언해주는 것으로 모든 HTML 문서의 첫 시작은 <!doctype html>로 시작해야 한다.
2. <html>
doctype 선언 후 <html>과 </html>로 문서의 시작과 끝을 감싸준다.
국내 웹 페이지는 <html lang="ko">로 시작하는 경우가 있는데, 사이트가 한국어로 만들어졌다고 알려주는 의미이다.
※페이지에 숫자 0, 1, 2가 쓰여있다면, <html lang="ko">는 음성 출력시 영, 일, 이라 말하고, <html lang="en">은 zero, one, two라고 말한다.3. <head>
<head>와 </head> 사이에는 메타 태그, 타이틀, 스타일시트가 들어간다.
메타 태그는 웹 페이지에 대한 정보를 검색 엔진에게 알려주는 태그이다.
코드 작성자 이름, 검색 키워드 등에 대한 정보를 담을 수 있는데, 보통은 웹 페이지의 인코딩 방식을 나타내는 meta charset만 사용한다.
charset은 character set의 줄임말로 글자 깨짐 현상을 방지하기 위해 쓰인다.※다국어를 지원하는 meta charset="UTF-8"로 통일되는 추세이다.
타이틀은 웹 페이지의 제목으로, 브라우저의 최상단에 노출되는 것이다.
<title>코린이 성장일기</title>이라고 입력하면 파일명 대신 태그에 쓰인 대로 바뀐 것을 볼 수 있다.
스타일시트는 웹 페이지를 꾸미기 위한 폰트, 색상 등의 스타일을 정한다.
html 태그로 꾸밀 수도 있지만, 주로 CSS 파일로 스타일을 만들어 참조한다.4. <body>
웹 페이지에 보이는 영역으로,와태그 사이에 본문 외에도 스크립트 영역이 있어 어떤 기능을 추가, 제어하기도 한다. <script> 태그를 이용해 문서 내에서 정의하기도 하지만, js(java script) 파일을 참조하는 추세다.
+
Atom에서는 ht까지만 입력하고 옆에 뜨는 html 태그를 누르면 자동으로 아래와 같이 코드가 입력된다.
저기서 <html lang="ko">로 변경하고(상황에 따라 변경하지 않아도 된다.) dir="ltr"은 지워도 무방하다.
* dir은 direction의 줄임말로 문서의 방향을 나타내는 속성인데, ltr은 left to right의 줄임말로 "문서 방향이 왼쪽에서 오른쪽"임을 의미한다. 현재 사용하는 HTML5에서는 지원하지 않기에 지워도, 그대로 나둬도 상관없다.+
오늘 포스팅 한 내용은 가장 많이 쓰이는 32개의 태그 중에서도 TOP5에 랭크된 태그이다.오늘도 공부하느라 애쓴 자기 자신에게 칭찬 한 마디 쓱 던져주자
출처 https://www.advancedwebranking.com/seo/html-study/ '프로그래밍 > HTML&CSS' 카테고리의 다른 글
[CSS]css 박스 모델 (0) 2021.12.21 [CSS]css 시작 - style 속성,<style> 태그 / 선택자 (0) 2021.12.20 [HTML]html 태그 - 자주 쓰이는 기본 태그 (0) 2021.12.18 [HTML]html 속성, <img>태그 (0) 2021.12.17 [HTML]html이란? HTML 태그 (0) 2021.12.17