이전 html&css 포스팅에서 살펴본 것처럼 html은 하이퍼텍스트 마크업 언어로
페이지간의 이동을 할 수 있으며, 태그를 통해 문서나 데이터의 구조를 명기하는 언어이다.
HTML이란?
Hypertext Markup Language의 약자 hypertext = 페이지 간의 이동 기능을 가진 텍스트 markup = 태그 등을 사용하여 문서 혹은 데이터의 구조를 명기하는 것 language = 언어(여기에서는 프로그래밍 언어로 사용)
taiyo-seoul.tistory.com
html은 크게 <html>태그 <head> 태그 <body>태그로 구성된다고 설명하였는데
저번 포스팅에는 head의 기본 구성에 대해 살펴 보았고 이번 시간에는 body 태그 안에 들어가는 구성 요소,
(body 태그는 크게 텍스트/리스트/테이블/멀티미디어/폼/시맨틱 태그/링크/스크립트 태그로 구성되어 있다.)
그 중 텍스트 태그를 살펴보려고 한다.
1. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: 제목을 표시할 때 사용하는 태그
H는 Heading의 약자로 제목을 표시할 때 사용하는 태그이다.
h뒤의 들어가는 숫자는 제목의 중요도를 나타내며 가장 중요한 제목일수록 숫자를 낮게 사용하면 된다.
숫자가 작을수록 화면상에 보이는 폰트 크기는 커지게 되며, 줄 바꿈이 발생한다.
(지금 설명하는 것은 css에 대한 설명이 포함되어 있습니다. 이해가 안 되시면 넘어가 주세요.)
태그 자체에 css를 사용하여 텍스트 크기를 키워서 제목처럼 보이게 할 수 있지만,
위에 언급한 것처럼 html은 태그를 통해 문서의 구조를 명기하기 때문에 코드만으로도 구조를 알 수 있어야 되므로
css로 스타일링하여 텍스트를 키우는 것보다는 h태그를 사용하는 것이 권장된다.
2. <p> 태그: 단락 구분 시 사용하는 태그
P는 paragraph의 약자로 단락을 의미하며 영어 단어 그대로의 의미를 가진 태그이다.
단락을 구분할 때 사용하며, h태그와 마찬가지로 줄 바꿈이 발생한다.
3. </br> 태그: 텍스트 줄 바꿈 시 사용하는 태그
줄 바꿈이 필요한 경우 사용한다. 엑셀의 alt+enter와 같은 기능으로
좌측 정렬, 우측 정렬 등으로 글을 쓸 경우 글줄의 정리를 위해 사용한다. <h1~h6>태그 <p>태그에서도 줄 바꿈이 기본적으로
발생하는데, </br>태그와의 차이점은 목적 자체가 줄 바꿈에 있느냐 제목으로 사용하느냐, 문단을 구분하느냐
에 있다. </br>태그는 태그 자체를 열고 닫지 않고 닫는 태그만 사용한다는 특징이 있다.
4. <strong> 태그: 중요내용 강조 시 사용하는 태그
텍스트가 두껍게 표시되며, 중요한 내용을 강조할 때 사용한다.
4-1. <b> 태그: 텍스트를 두껍게 표시하는 태그
텍스트가 두껍게 표시되며, 스타일링할 때 사용한다.
※)두 태그의 차이점?
위에 전술한 것처럼 html은 문서의 구조를 태그를 통해 명기하기 때문에 중요내용을 강조할 때는 <strong>태그를
단순히 스타일링을 위해서라면 <b>태그를 사용해야 한다.
5. <em> 태그: 중요내용 강조 시 사용하는 태그
em은 emphasis의 약자로 강조라는 뜻을 가지고 있다.
텍스트가 기울어져 표시되며, <strong>태그와는 보이는 방법이 다를 뿐 중요한 내용을 강조할 때 사용하는 것은 동일하다.
5-1. <i> 태그: 중요내용 강조 시 사용하는 태그
텍스트가 기울어져 표시되며, 스타일링을 위해 사용된다.
※)두 태그의 차이점?
위의 <strong>, <b> 태그와 같은 맥락으로 이해하면 된다.
6-1. <blockquote> 태그: 인용문 삽입 시 사용하는 태그
인용 시 사용되며, <blockquote> 태그 사용 시 들여 쓰기 되어 화면에 표시된다.
6-2. <q> 태그: 인용문 삽입 시 사용하는 태그
짧은 인용 문을 삽입할 경우 주로 사용하며, 인용 내용 앞 뒤에 따옴표(")가 추가된다.
7. <hr> 태그: 수평 선 삽입 시 사용하는 태그
수평 선 삽입 시 사용되며, 단순히 선을 긋는 스타일링 외에 내용 과의 구분을 용도로 사용하는 것이 권장된다.
닫는 태그는 사용하지 않는다.
다음과 같은 html 문서가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>문서의 제목을 입력하는 곳. 제목을 입력하면 브라우저에 페이지 제목이 표시된다.</title>
</head>
<body>
<h1>
제목: taiyo_seoul의 기록의 공간
</h1>
<p>
여기에 이렇게 이런 저런 문단에 들어 갈 내용들을 써볼게요.
그냥 스타일링으로 텍스트를 굵게 나타내고 싶을 때는 <b>이렇게</b> 쓰면 되고,
내용 상 굵게하는 것이 필요한 경우는 다음과 같이 <strong>이렇게</strong>쓰면 됩니다.
</p>
<hr>
<p>
또 다른 강조 방법으로는 설명드린 <em>em 태그가 있습니다.</em>
단순히 스타일링으로 기울게 표시하고 싶다면 <i>i 태그를 사용하면 됩니다.</i>
마지막으로 줄 바꿈을 하려면 br태그를</br>
사용하세요.
</p>
<blockquote>
blockquote 태그는 인용할 때 사용되며, 들여쓰기 되는 것에 유의하세요.
</blockquote>
<q>
q 태그를 사용할 수도 있지만 q 태그는 짧은 인용 문에 한해 사용됩니다.
</q>
</body>
</html>
렌더링 후 다음과 같이 보인다.
이번 시간에는 텍스트 태그 중 사용빈도가 높고 기본적인 태그들을 살펴보았다.
상기 태그들만 이해하고 있어도 html을 이용한 문서를 만드는 데는 큰 무리가 없다고 생각된다.
'HTML&CSS' 카테고리의 다른 글
| head의 기본 구성 (60) | 2023.10.10 |
|---|---|
| HTML의 기본 뼈대 (89) | 2023.10.01 |
| html의 기본 문법 알아보기 (0) | 2023.09.20 |
| HTML이란? (0) | 2023.09.17 |
