유노코딩
입문자를 위한 HTML 기초강의
목차(T.O.C)
1. HTML 문서의 기본구조
1-1. <!DOCTYPE html>
1-2. <head> </head>
2. 텍스트 태그 기본 사용법과 특징
2-1. 문단, 제목, 수평선
2-2. 줄바꿈과 공백문자
3. 태그의 구분과 인라인 텍스트 요소
3-1. 태그의 구분
3-2. 텍스트 굵게, 기울이기, 형광펜
4강. HTML 문서의 기본구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서의 제목</title>
</head>
<body>
실제 웹 페이지에 표시할 내용
</body>
</html>4-1. <!DOCTYPE html>
문서의 첫 부분에서 문서의 유형을 지정하는 단일태그
웹 브라우저에게 이 문서는 00 이니깐 잘 처리해줘 라는 메세지를 전달하는 것
HTML 버전이 변경해왔는데 현재의 버전은 html 이
4-2. <head> </head>
웹 브라우저에는 보이지 않지만 웹 브라우저가 알아야 할 정보들
<meta chaset="utf-8">
문자 인코딩 및 문서 키워드에 대한 요약정보를 기입하는 단일태그
<title> ~<title>
문서의 제목을 나타낸다. 콘텐츠는 브라우저 탭에 표시된다.
4-3. <body> </body>
실제 브라우저 화면에 표시될 내용을 입력하는 태그이다.
- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴) 등을 표시하는 태그
5강. 텍스트 태그 사용방법과 기본특징
5-1. 문단, 제목,수평선
- 문단: p 태그 --> 문단요소를 나타내는 태그(문단과 문단사이에는 공백이 존재)
- 제목: <h1> </h1> 1부터 6까지 존재하고 6으로 갈수록 점점 작아진다
- <hr> 수평선을 표시하는 태그
5-2. html 텍스트의 특징. 줄바꿈 태그와 공백문자
일반적으로 엔터는 줄바꿈을 의미하지만, html 코드에서는 이를 무시한다. 또한 스페이스를 통한 공백도 한번만 인정된다.
- 줄바꿈 태그:<br>
- 공백을 두번이상 표시하고 싶을떄:
6강. 태그의 구분과 인라인 텍스트 요소
6-1. 태그의 구분
- 블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다
- 인라인 요소: 자기에게 필요한 만큼의 공간만 차지한다
6-2. 인라인 요소 - 텍스트 굵게 , 기울이기, 형광펜
- <strong> </strong>
- <em> </em>
- <mark> </mark>
'유노코딩' 카테고리의 다른 글
| #26. [유노코딩] 입문자를 위한 HTML 기초강의 7~9강 (4) | 2025.08.07 |
|---|---|
| #24. [유노코딩] 입문자를 위한 HTML 기초강의 1~3강 (2) | 2025.08.07 |