HTML(HyperText Markup Language)
HyperText - 다른 정보로 접근할 수 있게 도와주는 어떤 링크를 생성할 수 있는 개념
Markup - 태그의 집합으로 어떠한 내용을 표현하는 것
웹을 이루는 가장 기초적인 구성 요소, 웹페이지의 내용을 서술하고 정의하는 데 사용된다.
태그라는 개념을 사용해 구분한다.
- html 언어에서는 태그라는 문법적 특성으로 웹 화면의 요소(element)를 표현
요소는 버튼, 이미지, 동영상 등을 예시로 들 수 있다.
html의 문법으로는 마크업 언어이다.
<html> content </html> 형식으로 열고 닫는 태그가 존재해야 한다.
태그는 중첩이 가능하다
ex) <html> content
<html> content <html>
</html>
☆예시일 뿐, 맞는 문법인지 모름 ☆
HTML의 기본 구조
- html, head, body 구조
- html 태그는 문서의 시작과 끝
- head 태그는 문서의 메타 정보를 정의
- body 태그 안에서는 실제 사용자에게 보여질 화면을 구현
메타정보* : 사용자가 보지 못하는 정보들 ex) 문서의 타이틀, 문서의 기본 도메인 등
글의 내용을 정의하는 태그들
- 글의 성격이나 구성을 위해 사용되는 태그로 내용을 강조하거나 문단을 구분, 제목을 지정할 때 사용
- heading 태그 : h1, h2, h3, ... - 주제
- paragraph 태그 : p - 문단
- break 태그 : br - 줄바꿈
- italic 태그 : i - 기울임
- strong, bold 태그 : strong, b - 강조 및 굵게
- horizontal rule 태그 : hr - 수평
Heading 태그
- 제목을 구성할 때 사용되는 태그, 단계에 따라 h1부터 h6 태그로 나눠진다.
<h1> 글의 제목</h1>
<h2> 글의 제목</h2>
<h3> 글의 제목</h3>
<h4> 글의 제목</h4>
<h5> 글의 제목</h5>
<h6> 글의 제목</h6>
h1이 가장 큰 크기이고 h6가 가장 작은 크기이다. h1 -> h6 순서로 작아진다고 생각하면 된다.
주제의 중요도를 나타내는 용도로 쓰면 좋을 것 같다.
Paragraph 태그
- 하나의 문단을 지정할 때 사용되는 태그. 태그로 지정된 문장은 하나의 문단으로 묶여서 화면에 보여지게 된다.
<p> 옷 한 벌, 바지 세 벌, 신발 한 켤레를 백화점에서 구매했다.</p>
글을 쓰는 도중 enter 키를 쳐서 줄바꿈을 해도 실제 웹에서는 이어져서 쓰여지는 걸로 나온다. html 태그로 줄바꿈을 한다고 명시해줘야 바꿀 수 있다.
Break 태그
- HTML에서 줄바꿈을 하기 위해 사용되는 태그.
옷 한 벌, 바지 세 벌, <br>
신발 한 켤레를 백화점에서 구매했다.
위의 태그들과는 다르게 Break 태그는 <br> 하나만 사용하는데 하나만 사용되는 태그를 '홀 태그' 라고 한다.
Strong, bold 태그
- 특정 글자들을 강조하고 싶을 때 사용
<b>안녕하세요</b> → 안녕하세요
<strong>안녕하세요</strong> → 안녕하세요
Horizontal rule 태그
- 문서 내에 가로 선을 넣고 싶을 때 사용. 이것 또한 홀태그 형태로 하나의 태그만 사용한다.
Paragraph 태그
~
<hr>
Strong, bold 태그
이와 같이 사용되면 되고, 구분선이라고 생각하면 된다.
리스트를 나열하는 태그들
- 어떠한 항목들을 구분해서 나열하고 싶을 때 사용하는 태그들. 여러개의 li 태그를 ol 혹은 ul 태그로 묶어서 사용한다.
- Orderd list 태그 : ol
- Unordered list 태그 : ul
- List item 태그 : li
Ordered list 태그
- 순서가 있는 항목들을 나열할 때 사용합니다.
<ol>
<li>사과</li> 1. 사과
<li>메론</li> ▶ 2. 메론
<li>오렌지</li> 3. 오렌지
</ol>
Unordered list 태그
- 순서가 정해지지 않은 항목들을 나열할 때 사용합니다.
<ul>
<li>사과</li> ㆍ 사과
<li>메론</li> ▶ ㆍ 메론
<li>오렌지</li> ㆍ 오렌지
</ul>
'Front-End' 카테고리의 다른 글
| [CSS] 기초 공부 1 (1) | 2025.01.29 |
|---|---|
| [HTML] 기초 공부 5 (3) | 2025.01.28 |
| [HTML] 기초 공부 4 (0) | 2025.01.27 |
| [HTML] 기초 공부 3 (0) | 2025.01.01 |
| [HTML] 기초 공부 2 (1) | 2024.12.29 |