HTML(Hypertext Markup Language)
HTML은 웹 페이지를 구체화하기 위한 마크업(Markup) 언어입니다.
웹 페이지의 컨텐츠를 구성하기 위해서 요소(Element)를 사용하며, 태그(Tag)는 단어나 이미지를 다른 웹 사이트로 연결하는 하이퍼링크를 추가하거나 단어를 이탈릭으로 표시하는 등의 역할을 합니다.
예를 들어 한 줄의 문장 My cat is very grumpy을 독립적인 구문으로 구성하려면 문단(P, Paragraph) 태그를 사용합니다.
<p>My cat is very grumpy</p>예시의 Element는 다음과 같이 구성됩니다.
| 코드 | 비고 | |
이 예제에서는 단순 텍스트를 담고 있습니다. |
||
어떤 요소는 속성(Attribute)을 가질 수 있습니다.
Attribute는 Content처럼 직접 표시되지는 않지만 Element를 꾸미기 위한 클래스 등의 식별자를 지정합니다.
- Element의 이름과 Attribute의 이름 사이에는
공백으로 구분됩니다. - Attribute의 이름 뒤에는
등호(=)가 이어집니다(어떤 Attribute는 값이 필요 없기 때문에 등호가 꼭 필요한 것은 아닙니다). - Attribute의 값은 앞 뒤에 열고 닫는
인용 부호(" 또는 ')가 있어야 합니다.
Element 중첩
어떤 Element는 다른 Element의 내부에 있습니다. 이를 Element의 중첩(Nesting)이라고 부릅니다.
예를 들어 한 줄의 문장 My cat is very grumpy와 같이 very를 강조하기 위해서 <strong>을 사용합니다.
<p>My cat is <strong>very</strong> grumpy.</p>중첩 Element 구문에서 가장 내부의 Element부터 Opening tag와 Closing tag가 한 쌍으로 연결되어야 합니다.
다음 예시는 가장 내부 Element를 구성하는 <strong> Opening tag 이후에 </p> Closing tag가 이어지므로 잘못된 구문입니다.
<p>My cat is <strong>very grumpy.</p></strong>빈 Element(Void element)
어떤 Element는 Content를 갖지 않습니다. 이를 Void element라고 부릅니다.
<img src="images/firefox-icon.png" alt="My test image" /><img>는 src와 alt 두 개의 Attribute를 갖고 있지만 Closing tag </img>와 Content를 갖지 않습니다.
대신 Tag의 마지막에 Closing tag처럼 슬래시(/)가 포함됩니다.
HTML 문서 살펴보기
다음 예시는 여러 개의 Element로 구성된 HTML 문서입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image" />
</body>
</html>| 코드 | 비고 | |
| doctype은 HTML 문서에서 가장 기본적이고 필수적인 서문입니다. | ||
| <html>는 웹 페이지 전체 Content를 감싸기 때문에 문서의 고유 언어를 설정하는 |
||
| <head>는 웹 페이지에 표시되지는 않지만 페이지에서 포함하고 싶은 모든 웹 브라우저 검색에 사용되는 keywords와 |
||
| HTML 문서에서 사용하는 |
||
| <title>은 웹 페이지의 제목입니다. 제목은 웹 브라우저의 탭이나 즐겨찾기 등에서 표시됩니다. |
||
| <body>는 웹 페이지에 표시되는 모든 Content를 담습니다. 텍스트, 이미지, 동영상 등이 표시되기 위해서 이곳에 작성됩니다. |
||
<body>는 일종의 본문입니다.
본문에는 웹 페이지에 표시되는 모든 Content가 작성됩니다.
예시에서는 이미지를 표시하기 위해서 <body> 내부에 <img>를 작성했습니다.
<img src="images/firefox-icon.png" alt="My test image" />Element에는 두 개의 Attribute가 포함됩니다.
src(source)는 이미지 파일의 경로입니다.alt(alternative)는 이미지가 표시되지 않을 경우에 대체되는 텍스트입니다.
정리 및 복습
HTML(Hypertext Markup Language)는 웹 페이지를 구체화하기 위한마크업(Markup) 언어입니다.- HTML 문서는 요소(Element)로 구성됩니다.
- Element는 태그(Tag)와 컨텐츠(Content)로 구성됩니다.
- Element에는 Content처럼 표시되지는 않지만 Element를 꾸미거나 식별자 역할을 하는
Attribute가 포함 될 수 있습니다.
'Web > HTML, CSS, JS' 카테고리의 다른 글
| CSS(Cascading Style Sheets) 기초 (0) | 2023.11.16 |
|---|
