HTML 시작
1. HTML 개요
📢 HTML은 웹 페이지를 만드는 데 사용하는 언어이다.
2. HTML 기초
HTML이란?
- HTML은 HyperTextMarkup Language의 약자이다.
웹페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다.
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용된다.
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<p>단락1</p>
<p>제목2</p>HTML 태그(tag)
- HTML 태그는 태그 이름을 꺽쇠 괄호(<>)로 감싸서 표현한다.
<태그이름> // 시작 태그
</태그이름> // 종료 태그-
HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성된다.
종료 태그는 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시(/)가 존재한다.
태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 존재한다. -
<img>``<br>``<hr>등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(empty tag)라고 합니다.
W3C
-
W3C는 World Wide Web Consortium의 약자이다.
W3C는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관이다.
이러한 W3C가 관리하는 대표적인 웹 표준은 다음과 같다.1. HTML 2. CSS 3. DOM 4. SVG 5. XHTML 6. XML -
DOM : 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.
-
SVG : SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 포맷이다. JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장한다.
-
XHTML : XHTML(Extensible Hypertext Markup Language)은 HTML과 동등한 표현 능력을 지닌 XML 마크업 언어로, HTML보다 엄격한 문법을 가진다.
-
XML : XML(eXtensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. XML은 SGML의 단순화된 부분집합으로, 다른 많은 종류의 데이터를 기술하는 데 사용할 수 있다.
HTML 기본 구조
HTML 기본 구조
출처 : https://www.tcpschool.com/html/html_intro_basicStructure
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시한다.
<html> : HTML 문서의 루트(root) 요소를 정의한다.
<head> : HTML 문서의 메타데이터(metadata)를 정의한다.
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용된다.
- 웹 브라우저의 툴바(toolbar)에 표시됩니다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다.
- 검색 엔진의 결과 페이지에 제목으로 표시된다.
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.
<h1> ~ <h6> : 제목(heading)을 나타낸다.
<p> : 단락(paragraph)을 나타낸다.HTML 요소 구조
HTML 요소 구조
- HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공한다.
또한, HTML 요소는 시작 태그로 시작해서 종료 태그로 끝난다.
출처 : https://www.tcpschool.com/html/html_intro_elementStructure
- 속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며, 속성 이름과 속성값(value)으로 표현된다.
속성 이름은 언제나 소문자로 작성하자!
- HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있다.
하지만 W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있다.
또한, XHTML에서는 속성 이름을 더욱 엄격하게 소문자로만 사용해야 한다.
속성값은 언제나 따옴표로 감싸자!
- HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않습니다.
하지만 속성값을 따옴표로 감싸지 않으면, 다음과 같은 예상치 못한 오류가 발생할 수 있습니다.
<img src="quotes.jpg" alt="이미지가 없어요">
<img src="quotes.jpg" alt=이미지가 없어요>
태그의 alt 속성은 이미지를 불러올 수 없는 상황에서 이미지 대신 보이는 문자열을 설정할 수 있습니다.
