l HTML
- HTML
HTML = Hyper Text Markup Language의 약자
웹 페이지는 HTML 문서라고도 불림, HTML 태그들로 구성
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용
- HTML 태그 (tag)
HTML tag = 태그 이름을 <>로 감싸서 표현
<태그 이름> // 시작 태그
</태그 이름> // 종료 태그
보통 시작 태그 (start tag, opening tag)와 종료 태그 (end tag, closing tag)의 한 쌍으로 구성
종료 태그 = 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시 (/)가 존재
태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 존재
+ <img>, <br>, <hr>등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그 (empty tag)라고 함
- HTML 작성
윈도우의 메모장, 리눅스의 vi와 같은 기본 에디터로도 작성 가능
HTML 문서이 작성을 마친 후에 확장자를 .html로 저장 > 웹 브라우저에서 바로 확인 가능
- HTML 버전
인터넷이 발전에 따라 HTML 버전 또한 발전을 거듭
HTML 1.0 – 1991년, 팀 버나스리 (Tim Berners-Lee)가 발표한 최초의 HTML
HTML 2.0 – 1995년, 국제 표준으로 제정된 최초의 HTML
HTML 3.2 – 1997년, W3C에 의해 제정된 최초의 HTML
HTML 4.01 – 1999년,
<!DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
XHTML 1.0 – 2000년,
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
HTML 5 – 2014년, <!DOCTYPE html>
- W3C
World Wide Web Consortium의 약자
W3C = 월드 와이드 웹 (WWW)을 위한 표준을 제정, 관리하는 중립적인 기관
W3C가 관리하는 대표적인 웹 표준
1. HTML
2. CSS
3. DOM
4. SVG
5. XHTML
6. XML
l HTML 기본 구조
<!DOCTYPE html>
현재 문서가 HTML5 문서임을 명시
<html>
HTML 문서의 루트 (root) 요소를 정의
<head>
HTML 문서의 metadata (메타데이터)를 정의
- Metadata란?
HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보
이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base> 태그 등을 이용해 표현 가능
<title>
HTML 문서의 제목 (title)을 정의
- 웹 브라우저의 툴바(toolbar)에 표시
- 웹 브라우저의 즐겨찾기 (favorite)에 추가할 때 즐겨찾기의 제목이 됨
- 검색 엔진의 결과 페이지에 제목으로 표시
<body>
웹 브라우저를 통해 보이는 내용(content) 부분
<h1>~<h6>
제목(heading)을 나타냄
<p>
단락(paragraph)을 나타냄
l HTML 요소 구조
HTML 요소(element) = 여러 속성을 가질 수 있으며, 이러한 속성 (attribute)은 해당 요소에 대한 추가적인 정보를 제공, 또한 HTML 요소는 시작 태그로 시작해서 종료 태그로 끝
속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의, 속성 이름과 속성값(value)으로 표현
<태그이름 속성이름 = “속성값”>
- 속성 이름은 언제나 소문자로 작성
HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 사용
하지만 W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자로 작성하도록 권장
또한, XHTML에서는 속성 이름을 더욱 엄격하게 소문자로만 사용해야 함
- 속성값은 언제나 따옴표로 감싸기
HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않음
하지만 속성값을 따옴표로 감싸지 않으면, 예상지 못한 오류 발생할 수 있음
속성값에 띄어쓰기가 들어가게 되면, 반드시 따옴표를 사용해야 정확한 값 저장 가능
속성값을 감쌀 때는 보통 큰따옴표(“”)가 사용, 작은 따옴표(‘’)도 사용할 수 있음
+ <img>태그의 alt 속성은 이미지를 불러올 수 없는 상황에서 이미지 대신 보이는 문자열 설정 가능
'HTML' 카테고리의 다른 글
| HTML 기본 요소 (0) | 2022.06.30 |
|---|---|
| HTML Text 요소 (0) | 2022.05.24 |