[HTML 공부1] 문서 기본구조 <!doctype>, <html>, <head>,<meta>, <body>와 텍스트 관련 태그들
* html 기본 문서 구조
<태그 속성="속성 값" 속성="속성 값"...> 형태로 사용
<여는 태그> 다음에는 </닫는 태그>
1. <!doctype> : 문서 유형(document type)을 지정하는 선언문
ex) <!doctype html> : html5에 맞춰 문서를 해석 (문서 유형 선언)
2. <html> : 웹 문서 시작을 알리는 태그
ex) <html> : 문서 시작
</html> : 문서 끝
ex) <html lang="ko">
3. <head> : 브라우저에게 정보를 주는 태그
- 웹 브라우저 화면에는 보이지 않지만 알아야 할 정보들은 모두 <head>태그와 </head> 태그 사이에 표시.
ex) <title> 문서제목 </title>
4. <meta> : 문자 세트를 비롯한 문서 정보 태그
ex) <meta charset="UTF-8"> : UTF-8 문자 세트 사용
<meta name="viewport" content="width=device-width> : 모바일 기기 고려하기
5. <body> : 실제 브라우저에 표시될 내용
* 텍스트 관련 태그
- <h1> ~ <h6> 제목 태그 </h1> ~ </h6>
- <p> 단락 태그 </p>
- <br> 줄 바꾸기 태그 (닫는 태그 없음)
- <hr> 수평 줄 넣기 태그 (닫는 태그 없음)
- <blockquote> 인용문 넣기 태그 </blockquote>
- <q> 인용 내용 표시 </q>
- <pre> 공백, 소스 등 입력한 그대로 표시 </pre>
- <mark> 형광펜 효과 </mark>
- <span> 텍스트 묶어 스타일 적용 </span>
- <ruby> 주석을 함께 표시하기 위한 용도 </ruby>
- <strong> 굵게 강조할 텍스트 </strong>
- <b> 굵게 표시할 텍스트 </b>
-<i> 이탤릭체로 표시할 텍스트 </i>
- <em> 이탤릭체로 강조할 텍스트 </em>
'IT 공부하기' 카테고리의 다른 글
| 파이썬 기초 다지기 : 리스트형 (List Type) (2) | 2025.05.25 |
|---|---|
| 파이썬 프로그래밍의 기본 : 변수와 변수 대입, 변수명 만들기 규칙 (2) | 2024.01.04 |
| 파이썬 프로그래밍의 기본 : 함수, Print함수, input함수 (0) | 2024.01.01 |
| [HTML공부2] 목록 만드는 태그 총정리 (ul, li, ol, dl, dt, dd) (1) | 2023.12.08 |
| [챗GPT 101] 책으로 공부하는 챗GPT 활용 방법 (0) | 2023.11.10 |