본문 바로가기
비전공자의 고군분투 코딩공부/HTML

4. HTML 문서의 기본 구조는 뭐여?

by 슬그 2023. 4. 25.
반응형
기본구조, 오늘 우리가 공부할 내용

완성된 기본 구조

 

각 태그가 의미하는 내용

1. <!DOCTYPE html>

- 단일태그

- 문서의 유형을 지정 

 

2. <html>~</html>

- 문서 유형을 지정한 후 실제 html 문서의 시작과 끝이라는 의미

- 사이에 들어가는 내용이 html 문서의 내용

- 그 내용들 또한 여러가지 태그로 표현 가능 -> 태그 안에 태그가 들어가는 것이 가능하다

 

3. <head>~</head>

- 들여쓰기로 태그와 태그 사이에 포함관계 표현 but 가독성에 도움을 주기 위한 것. 문법적 필수 사항은 아님!

- 웹브라우저에는 보이지 않지만 웹브라우저가 알아야하는 정보들은 모두 이 태그에 들어감

 <meta charset="utf-8">
- 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그
(문자 인코딩 : 한글을 표시하기 위해 문자 세트를 지정하는 작업. 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋음)

<title>~</title>
- 문서의 제목을 나타냄
- 콘텐츠는 브라우저 탭에 표시됨

- 위 두 태그 이외에도 다양한 정보들이 추가될 수 있음

 

4. <body>~</body>

- 실제 브라우저 화면에 표시될 내용을 입력하는 태그

- 여기에  포함될 수 있는 태그들

- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그
기본 문서 구조를 통해 확인했듯, 태그 안에 태그를 포함하는 방식으로 콘텐츠를 다양하게 구성 가능!

 

결과

짜잔!

 

https://youtu.be/dOpFU0apoes

*유노코딩님 영상을 통해 공부 중입니다.

반응형