1. 요소(Element)
html의 요소는 시작태그(start tag)와 종료태그(end tag), 그리고 그 사이에 위치한 content로 구성된다.
html 문서는 요소들의 집합으로 이루어진다.
* 요소는 중첩될 수 있다. 즉, 요소는 다른 요소를 포함할 수 있다. 이때 부자관계가 성립되며 이러한 부자관계로 정보를 구조화할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>앞선 포스팅에서 살펴봤던 기본적인 html 문서의 형태이다.
- 가장 상위에 <html>태그가 있고 그 하위 태그로 <head>,<body>태그가 있다. <head>태그의 하위태그로 <meta>,<title>태그가 있다.
이러한 부자관계를 통해 문서가 구조화될 수 있고 이를 시각적으로 파악하기 쉽게 들여쓰기(indent)를 활용한다.
* 빈 요소 (Empty Element)
content를 가질 수 없는 요소를 빈 요소라 한다. 빈 요소는 content가 필요가 없으며 어트리뷰트(attribute)만을 가질 수 있다.
ex) 대표적인 빈 요소 : meta, br, hr, img, input, link
<meta charset = "utf-8">
2. 어트리뷰트(Attribute)
- 요소의 성질, 특징을 정의하는 명세이다.
- 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보를 제공한다.
- 시작태그에 위치해야 하며 이름과 값의 쌍을 이룬다. (ex)name = "value")
<div class = "myclass"></div>- div 요소의 시작태그에서 'class'라는 어트리뷰트가 요소의 css에 대한 정보를 제공해주고있다.
Property란?
Property는 html DOM안에서 attribute를 가리키는(대신하는) 표현이다.
Our DIV node
nodeName = "DIV"
className = "my-class"
style
...위 html문서의 예제를 html DOM으로 표현한 것이다. 여기서는 className이 property가 된다. 즉, html문서 안에서는 class가 attribute를 의미하지만 html DOM에서는 property를 의미한다.
* 글로벌 어트리뷰트
- 글로벌 어트리뷰트는 모든 html요소가 공통으로 사용할 수 있는 어트리뷰트를 말한다.
글로벌 어트리뷰트는 Core attribute, event-handler attribute, xml attribute로 나누어진다.
① Core attrbute - accesskey, class, contentditable, contextmenu, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title
→ class : 스타일시트에 정의된 class를 요소에 지정한다. 중복지정 가능
→ id : 유일한 식별자를 요소에 지정한다. 중복지정 불가능
→ hidden : css의 hidden과 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
→ lang : 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
→ style: 요소에 인라인 스타일을 지정한다.
→ tabindex : 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
→ title : 요소에 관한 제목을 지정한다.
② Event-handler attribute - onabort, onblur, oncanplay, oncanplaythrough, onchage 등
③ XML attribute - xml:lang, xml:space, xml:base
3. 주석
주석(comment)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.
<!-- 이거는 이런 코드랍니다~! -->
<h1>안녕하세요</h1>
'Programming' 카테고리의 다른 글
| [CSS] HTML에 CSS를 적용하는 3가지 방법 (0) | 2021.02.10 |
|---|---|
| Google clone - 구글 홈페이지 따라하기 (0) | 2021.02.06 |
| 마크다운이란? 마크다운 문법 / 사용법 총 정리 (0) | 2021.02.04 |
| [HTML] 시멘틱 마크업 (0) | 2021.02.03 |
| [HTML] HTML이란? (0) | 2021.02.03 |
