min's devlog
[HTML] HTML 구성 요소 본문
HTML의 문서구조
- 태그의 트리구조(계층구조)로 되어 있다.
<html>
- 문서 전체를 감싸고 루트를 태그하는 역할
- 컨테이너처럼 감쌀 뿐 스스로 하는 일은 없다.
<head>
- 문서의 머릿말 역할
- 브라우저에게 전달할 내용을 작성 (내부 정보)
<body>
- 브라우저에 출력될 내용을 담는 역할
- 사람이 봐야할 내용을 작성하며 출력 정보를 담고 있다.
공백 문자 처리
1. 스페이스 표현
- 공백 1글자는 엔티티 1개로 취급한다.
- > &표현; > 출력할 때 공백 1개로 바꿔서 출력 > non-break space
2. 개행문자 표현
- <br> 태그 사용
- \r\n 역할
- line break
* 웹 문서에는 탭의 개념이 없다.
HTML 언어 구성 요소
- 태그(Tag), 엘리먼트(Element)
- 속성(Attribute)
- 텍스트(PCDATA)
- 엔티티(Entity)
- 주석(Comment)
- 선언문(Declaration)
- 외부 요소 등..
1. 태그(Tag), 엘리먼트(Element)
- 예약어(명령어)를 <>로 묶어놓은 요소로, 출력될 웹페이지의 골격을 형성한다.
a. 레이아웃 형성
b. 요소를 배치
- 출력과 관계된 행동을 한다.
1.1 태그 표현 방식
a. <태그명>내용물 영역</태그명>
- 쌍태그
- <태그명>: 시작태그
- </태그명>: 끝태그
- 영역을 가지는 태그
b. <태그명>, <태그명 />, <태그명></태그명>
- 단독태그, 빈태그(Empty Tag)
- 영역을 가지지 않는 태그
1.2 태그 내용물 형식, Content Type
- <태그>내용물</태그>
a. 자식태그
- 또 다른 태그들이 내용물로 구성된다.
- 문자열은 올 수 없다.
b. PCDATA
- 문자열만 올 수 있으며 자식 태그는 올 수 없다.
c. Empty
- 아무것도 가지지 않는다. > 빈태그, 단독태그
d. Mixed
- 자식으로 태그와 문자열이 모두 올 수 있다.
- HTML 태그 대부분의 혼합형이다.
2. 속성(Attribute)
- 태그의 성질의 정의하는 요소
- 태그가 가지는 데이터의 한 종류
- 용도: 태그의 성질을 지정하는 데이터
- 표기법
a. <시작태그 속성명="값"></끝태그>
<시작태그 속성명="값" 속성명="값" 속성명="값"></끝태그>
b. <단독태그 속성명="값">
c. <시작태그 속성명="값"></끝태그> : 사용O
d. <시작태그 속성명='값'></끝태그> : 사용O
e. <시작태그 속성명=값></끝태그> : 사용X
3. 텍스트(PCDATA)
- 태그가 가지는 데이터의 한 종류
- 용도: 화면에 출력하는 데이터
- Parsed Character Data > 브라우저 해석하는 영역의 문자열
4. 엔티티(Entity)
- 브라우저와 정해진 약속이 되어있는 표현 > 약속된 표현을 작성하면 브라우저가 화면에 출력하기 전에 약속된 출력으로
바꿔서 출력한다. > Built-in Entity
- 치환
- &엔티티명;
- -> 공백 1개
- < -> (<) less than
- > -> (>) greater than
- &#문자코드;
'til > Front' 카테고리의 다른 글
| [CSS] reset, normalize (0) | 2022.05.30 |
|---|---|
| [CSS] Block,Inline (0) | 2022.05.27 |
| [CSS] 박스 모델(Box Model) (0) | 2022.05.27 |
| [CSS] HTML 문서에 CSS 적용 (0) | 2022.05.25 |
| [HTML] HTML 기초 (0) | 2022.05.23 |
