이번 장에서는 HTML의 태그에 대해 알아보겠습니다!
저번 시간에 다양한 종류의 태그 그리고 그 기능에 대해서 배웠었죠?
이번 시간에는 태그 그중에서, <body> 안에 들어가는 태그에 대해 배워보도록 하겠습니다!
<body> 안에는 다양한 태그가 들어갈 수 있는데, 우리는 그중 대표적인 3가지에 대해서만 보도록 하겠습니다.
첫 번째 태그는 바로 <p> 태그입니다.
◈ <p>
-> 문단을 나타내는 태그입니다. 블록 특성을 가지고 있습니다.
기본 구조 : <p> ~ </p>
<p> 말 그대로 문단을 나눌 수 있습니다.
내가 원하는 주제의 내용이 끝났을 때 또 다른 <p> 태그를 이용하면
다음 줄에 다음 주제에 관한 내용이 표출되는 것입니다.
간단하게 보여드리겠습니다!
See the Pen jOVmzgp by JaeyongLee (@jaeyonglee960212) on CodePen.
이해가 되셨나요?
두 번째로 소개할 태그는 <h 숫자> 태그입니다.
◈ <h1> ~ <h6>
-> 6단계로 나뉜 제목 특성입니다. 블록 특성을 가지고 있습니다.
기본 구조 : <h 숫자> ~ </ h 숫자>
<h> 태그 또한, <p>와 비슷하지만 조금은 다른 점이 존재합니다!
<p> 태그는 그저 <p> 태그 하나만 존재했지만, <h>의 경우 1~6까지의 단계로 나뉘어 있습니다.
그리고 1에서 6으로 갈수록 글자 크기가 점점 작아지기 때문에
중요한 내용일수록 낮은 숫자를 써서 표현하고,
덜 중요한 내용일수록 높은 숫자를 써서 표현합니다.
역시 말보단 눈으로 보는 것이 이해하기 쉬우시겠죠?
See the Pen vYymjKm by JaeyongLee (@jaeyonglee960212) on CodePen.
신기하시죠?
다음으로 배울 태그는 <span> 태그입니다.
◈ <span>
-> 간단한 단어 및 문장을 작성할 때 사용하는 태그로, <p>, <h1>과 같은 태그들과 달리 인라인 속성을 가지고 있다.
기본 구조 : <span> ~ </span>
<span> 태그도 <p>와 <h1>~<h6> 태그와 기능은 비슷하지만, 다른 점이 있습니다.
바로 인라인 속성을 가지고 있다는 것이죠!
다음번에 자세하게 다룰 내용이지만 아주 간단하게 설명을 해드리자면,
블록 요소는 모래성 쌓듯 아래 위로 쌓이는 구조이고, 인라인 요소는 옆으로 쌓이는 구조입니다.
바로 보여드리겠습니다!
See the Pen bGBWMLQ by JaeyongLee (@jaeyonglee960212) on CodePen.
span은 바로 옆에 착! 하고 달라붙는답니다!
자세한 건 다음에 자세히 다루도록 하겠습니다.
이상, 텍스트에 관련된 주요 태그들에 대해 알아보았습니다.
다음 장에서는 HTML의 다른 태그들에 대해 알아보도록 하겠습니다!
'html' 카테고리의 다른 글
| < html 공부 > 6장. HTML의 태그 (4) - 멀티미디어(video) (0) | 2021.03.04 |
|---|---|
| < html 공부 > 5장. HTML의 태그 (3) - 멀티미디어(img) (0) | 2021.03.03 |
| < html 공부 > 4장. HTML의 태그 (2) - 멀티미디어(audio) (0) | 2021.03.02 |
| < html 공부 > 2장. HTML의 기본 구조 및 태그 기능 (0) | 2021.02.13 |
| < html 공부 > 1장. HTML이란? (0) | 2021.02.09 |