HTML 문서 작성을 위한 기본 내용
HTML의 기본 구성 요소
1. 태그
태그는 구성 요소를 정의하는 역할을 하며, HTML 문법을 이루는 가장 작은 단위이다
기본 형식: (< >)
2. 속성
속성은 태그에 어떤 의미나 기능을 보충하는 역할을 한다. (=옵션)
속성명과 속성값으로 구성됨
형식: <태그명 속성명="속성값">
- 속성명은 따옴표 없이 작성하고 값은 " " 안에 작성함.
- 속성값이 여러 개인 경우 " , , " 형식으로 쉼표로 구분하여 나열
<html> 만 사용했다면 'HTML 문서의 시작' 이라는 의미
<html lang="ko"> 로 사용한다면 '주 언어(lang)가 영어(en)로 된 HTML 문서의 시작'이라는 구체적인 의미
3. 문법
HTML은 태그와 속성으로 문법을 구성함.
문법은 콘텐츠(content)가 있는 문법과 없는 문법으로 나뉨.
- 콘텐츠가 있는 문법
콘텐츠 앞뒤를 태그로 감싼다.
앞에 넣는 태그를 시작 태그(open tag), 뒤에 넣는 태그를 종료 태그(close tag)라고 한다.
시작태그와 종료태그, 콘텐츠를 합쳐서 요소(element)라고 한다.
- 콘텐츠가 없는 문법
내용이 비어 있다는 의미로 빈 태그(empty tag)라고 한다.
콘텐츠가 없는 문법은 시작 태그가 요소이므로 다음 문법에서 br태그는 br요소라고 할 수 있다.
*HTML5부터는 슬래시로 종료 태그를 표시하지 않아도 됨. (HTML5 이전에는 <br/>로 종료 태기 명시 함)
4. 주석
주석(comment)는 코드에 대한 메모나 설명
(웹 브라우저의 소스 보기로 볼 수 있으므로 보안상 중요한 내용 넣으면 안된다)
5. HTML의 기본 구조
HTML은 일정한 기본 구조 안에서 코드를 작성하고, 태그를 추가하여 하나의 HTML 문서를 만든다.
- DTD (Document Type Definition)
HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것, HTML 문서 작성 처음에 넣어야 한다
- <html> 태그
html 태그는 HTML 문서의 시작과 끝을 의미한다. 모든 태그는 html 태그 안에서 작성해야 한다.
- <head> 태그
head 태그는 HTML 문서의 메타데이터(metadata)를 정의하는 영역이다.
메타데이터란 HTML문서에 대한 정보(data)로, 웹 브라우저에는 직접 노출 되지 않는다. 보통 meta, title, link, style, script 등의 태그를 사용한다.
head 태그는 HTML 문서 서문의 시작과 끝을 알리는 태그이다.
- <title> 태그
title 태그는 HTML 문서의 제목을 지정하는 데 사용된다.
- <body> 태그
body 태그는 웹 브라우저에 노출되는 내용을 작성하는 영역이다
6. 블록 요소와 인라인 요소
hn 태그나 p 태그처럼 공간과 상관없이 항상 줄 바꿈되는 태그로 작성한 코드를 블록 요소라고 한다.
<-> a 태그나 span 태그처럼 공간이 부족할 때만 줄 바꿈되는 태그로 작성한 코드를 인라인 요소라고 한다.
7. 부모, 자식, 형제 관계
HTML은 태그 사용 위치에 따라 부모, 자식, 형제 관계가 성립된다.
<A<B><C>> : A는 B와 C의 부모, B와C는 형제 관계
8. 줄 바꿈과 들여쓰기
HTML 태그를 작성할 때, 줄 바꿈과 들여쓰기가 의무는 아니지만, 가독성을 높이므로 적절하게 사용함