HTML 문서의 기본 골격
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>안녕하세요!</h1>
<p>이 문서는 HTML의 기본 구조를 설명합니다.</p>
</body>
</html>
각 태그의 역할과 의미
- <!DOCTYPE html>
- HTML5 문서임을 명시
- 무조건 첫째 줄에 존재
- <html> ... </html>
- HTML 문서의 시작과 끝을 나타냄
- <html lang= "ko">
- 한글을 사용한다는 것을 명시
- <head> ...</head>
- 화면에 보이지 않지만 브라우저나 검색엔진이 이해하는 중요한 정보들 포함
- <meta charset="UTF-8"> : 글자가 제대로 보이게 설정
- <title> ... </title> : 브라우저 제목 설정
- <style> ... </style> : 내부 스타일 정의
- <script> ... </script> : 자바스크립트 코드 삽입
- <body> ... </body>
- 사용자에게 실제로 보여지는 웹 페이지의 내용을 포함
텍스트 태그
- <h1> ... </h1>
- HTML에서는 제목을 나타내기 위해 <h1>부터 <h6>까지 총 6가지의 태그를 제공 ( 콘텐츠 태그 )
- h 뒤의 숫자가 작을수록 더 중요한 문장임을 뜻함
-
<h1>가장 중요</h1> <h2>그 다음 중요</h2> <h3>덜 중요</h3>
- <p> ... </p>
- 하나의 문장을 나타냄 ( 줄 바꿈 문자를 사용해도 줄이 바뀌지 않음 ) ( 콘텐츠 태그 )
- 줄을 바꾸려면 바로 아래 있는 <br>태그를 사용해야
-
<p>이 문장은 하나의 문단으로 처리된다</p>
- <br>
- <p> 태그로 문장을 쓴 후 줄을 바꾸고 싶은 위치에 사용 ( 콘텐츠 태그 )
-
<p>이 문장은 첫 줄입니다.<br>이 문장은 두 번째 줄입니다.</p>
- <hr>
- 수평선을 삽입할 때 사용 ( 콘텐츠 태그 )
- CSS를 이용하여 두꼐, 색상, 길이를 조절할 수 있음
-
<h2>HTML 구조</h2> <p>구조를 정의합니다.</p> <hr> <h2>CSS 소개</h2> <p>디자인을 담당합니다.</p>
- <strong> ... </strong> , <em> ... </em>
- 안에 담긴 내용을 강조함 ( 의미 부여 태그 )
-
<p><strong>주의:</strong> 이 작업은 되돌릴 수 없습니다.</p> <p>이 작업은 <em>매우 중요</em>합니다.</p>
- <blockquote> ... </blockquote>
- 다른 사람들의 글을 인용 해올때 사용 ( 의미 부여 태그 )
-
<blockquote> 성공이란 준비와 기회의 만남이다. – Bobby Unser </blockquote> - cite 속성을 이용해 출처를 밝힐수도 있음
-
<blockquote cite="<https://example.com>"> "열심히 하다 보면 길이 보입니다." </blockquote>
- <abbr title="~~"> ... </abbr>
- 이 태그를 사용한 글자에 커서를 올리면 툴팁이 나타납니다.
-
<p>저는 <abbr title="Information Security">선린</abbr>에 다닙니다.</p>
위에 있는 태그들 중에는 디자인과 관련된 것이 많습니다.
하지만 디자인은 모두 CSS로 조절할 수 있기 때문에
HTML에서는 크게 신경을 쓰지 않아도 됩니다.
'web > web' 카테고리의 다른 글
| nodejs 1차시 (4) | 2025.08.10 |
|---|---|
| JS 4차시 - 비동기 (1) | 2025.07.29 |
| Js 3차시 - 객체 (3) | 2025.07.28 |
| JavaScript 2차시 - 돔, 노드, 이벤트 (1) | 2025.07.25 |
| JavaScript 1차시 - 기본 문법 (1) | 2025.07.24 |