공부할 내용(46~57쪽)
1. HTML의 기본 구성 요소
2. HTML의 기본 구조
3. HTNL의 특징 파악하기
1. HTML의 기본 구성요소
- 태그
태그는 HTML 문법을 이루는 가장 작은 단위를 말한다.
- 속성
태그에 어떤 의미나 기능을 보충하는 역할이다.
속성은 <태그명 속성명="속성값">으로 구성된다.
위 사진에서 <html lang="en"> <meta charset="UTF-8">등이 예시이다.
- 문법
콘텐츠가 있는 문법과 콘텐츠가 없는 문법으로 나뉜다.
콘텐츠가 있는 문법은
속성의 사진에서 <title>Document</title>이 해당되며
<title>은 시작태그 Document는 콘텐츠 </title>은 종료태그이다.
콘텐츠가 없는 문법은
<br> : 줄바꿈 이 있다.
- 주석
주석은 실행결과에는 표시되지 않지만 코드에 메모나 설명등을 넣고 싶을때 사용한다.
형식은 <!--주석내용 --> 이다
코드
실행 결과
++ 추가로 단축키인 Ctrl+k+c 로 원하는 내용을 주석으로 만들고 Crtl+k+u로 주석을 해제 할 수 있다.
2. HTML의 기본 구조
- DTD
DTD란 웹브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것이며
HTML의 문서를 작성할때 항상 처음에 넣어야한다.
예시: <!DOCTYPE html>
- html태그
HTML 문서의 시작과 끝을 나타낸다.
- head태그
head 태그는 HTML 문서의 메타데이터를 정의하는 영역이다.
- title태그
문서 제목을 지정할때 사용한다.
- body 태그웹 브라우저에 노출되는 내용을 작성하는 영역이다.
++ 추가로 !를 친후 바로 tab을 누르면 간단한 구조가 나온다
3. HTML의 특징 파악하기
- 블록요소
줄바꿈이 되는 태그들이 있는데 이런 태그로 작성한 코드를 블록요소라고한다.
- 인라인요소
블록요소와 반대로 a태그나 span태그처럼 공간이 부족할때만 줄바꿈이 되는 태그가 있는데 이를 인라인요소라고 한다.
- 부모 자식 형제
HTML은 태그를 사용할때 부모 자식 형제라고 하는 관계가 성립된다.
head 태그와 body태그는 html의 자식이 되고 반대로 html은 head태그와 body태그의 부모가 된다.
또한 head 태그와 body 태그는 부모가 같으므로 형제 관계가 된다.
- 줄바꿈과 들여쓰기
HTML 문서에 태그를 작성할때 가독성과 편의성을 위해 암묵적으로 지키는 규칙이다.
따라서 줄바꿈과 들여쓰기를 습관화 하는것이 좋다.
'학습단 > HTML+CSS+Javascript 학습단' 카테고리의 다른 글
| 5장 css 필수 속성 다루기 (0) | 2023.03.11 |
|---|---|
| 4장 CSS 선택자 다루기 (0) | 2023.03.10 |
| 3-2장 실무에서 자주 사용하는 HTML 필수 태그 다루기 (0) | 2023.03.09 |
| 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기 (2) | 2023.03.08 |
| 1장 Hello, HTML + CSS + 자바스크립트 (~44p) (0) | 2023.03.06 |
