웹 개발

[Html] 텍스트 관련 태그: <div>,<span>,<p>,<b>

션팡 2024. 6. 11. 15:18

안녕하세요! 이번에는 본격적으로 HTML의 기본 문법에 대해 알아볼게요! 🌟

📌 div 태그

먼저 가장 기본적으로 웹페이지의 영역을 나누는 div 태그가 있습니다.
div 태그는 화면상으로는 아무런 기능이 나타나지 않는 태그에요.
하지만 화면의 구역을 나누기 위해서 지정해놓는 태그이기에 웹페이지를 구현하는데 필수적이죠.
이해하기 쉽게 예시를 들어볼게요.

<div>영역1</div>
<div>영역2</div>

💡 Tip:

VSCode에서는 태그를 일일이 입력하지 않고 태그 안 내용만 입력한 뒤,
Tab 키를 누르면 자동완성 되는 기능을 제공합니다.
또한 다른 태그를 함께 자동완성할 때는 +를, 같은 태그는 *n (입력할 태그 개수)를 이용하면 됩니다.




위 코드는 div*2 혹은 div+div를 입력한 뒤 Tab 키를 눌러 자동완성할 수 있습니다.

위 코드는 다음과 같이 출력됩니다.

div 태그 안에서 적힌 문구에 아무런 기능이 들어가지 않은 채 출력된 것을 볼 수 있어요.
실제 네이버 홈페이지의 코드에서 div 태그가 어떻게 활용되는지 살펴볼게요.

위 코드는 제가 살펴보고 싶은 웹페이지에 들어가 오른쪽 상단에 있는 ...를 클릭한 뒤,
기타 도구 > 개발자 도구로 들어가시면 쉽게 볼 수 있는 프론트엔드의 구현 코드입니다.

여기서도 수많은 div 태그를 볼 수 있습니다.
보이는 div 태그를 하나씩 눌러보시면 해당 코드가 화면의 어떤 영역에 해당하는지 알 수 있어요!
이렇게 영역별로 div 태그를 나누어 코드를 작성하게 됩니다.

📌 h1~h6 태그

그 다음으로는 제목을 만들어주는 태그를 살펴볼게요.
h1 태그부터 차례로 h6 태그까지 있으며 h1 태그가 가장 크고 진하게 표시됩니다.
h6으로 갈수록 크기가 작아져요. 바로 예시를 보여드릴게요.

<h1>h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>


이렇게 글씨의 크기와 굵기를 따로 지정하지 않아도 h1~h6 태그를 이용하여 화면에 나타낼 수 있습니다.

💡 Tip:

보통 한 페이지에 h1 태그는 하나만 사용하는 것이 좋아요.

📌 p, span 태그

다음은 텍스트를 표출할 때 가장 많이 사용되는 p 태그인데요.
텍스트의 단락을 만들어줌으로써 p 태그를 사용하면 페이지의 한 줄을 차지하게 됩니다.
이렇게 한 줄을 다 차지하게 되는 태그를 블록 태그라고 부르기도 합니다.

span 태그는 p 태그와 같이 텍스트를 표출하지만 한 줄을 다 차지하지 않습니다.
이런 태그는 인라인 태그라고도 불리죠.
span 태그는 텍스트뿐만이 아니라 다른 태그들의 영역을 묶을 때도 사용됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p, span {
            background-color: coral;
        }
    </style>
</head>
<body>
    <p>p 태그입니다.</p>
    <span>span 태그입니다.</span>
</body>
</html>

이번 예시는 HTML의 기본 구조를 갖춰서 작성해봤는데요.
결과 화면도 함께 보겠습니다.

각각의 태그가 화면의 어느 부분을 차지하는지 알 수 있도록 제가 임의로 스타일을 주었어요. (이 부분은 CSS에서 자세히 다룰 예정입니다.)
p 태그는 span 태그와 달리 한 줄을 다 먹고 있는 게 보이시죠?!

📌 b 태그

다음은 간단하게 b 태그를 알아볼게요. 글씨를 굵게 표출하는 태그입니다.

<p>b 태그를 적용안함.</p>
<b>b 태그를 적용함.</b>


이렇게 b 태그를 적용한 것과 안 한 것을 같이 보여드릴게요.

✨ 마무리

지금까지 텍스트 관련 태그들을 알아봤는데요! 꽤나 많죠..?
하지만 이것 말고도 텍스트 관련 태그들은 더더욱..많습니다.
하지만 걱정하실 필요 전혀 없어욥 현업 개발자들도 이 많은 태그들을 외우고 다니진 않거덩요.

개발은 복붙의 연속이라는 말 들어보셨나요? 저도 처음엔 의아했지만 그럴 수밖에 없습니다.
현업에서는 하나의 언어만 다루는 것이 아닌 정말 많은 언어와 툴을 다루기 때문에
그에 따른 명령어를 모두 외우는 것은 오히려 비효율적인 방법이라 생각해요.
처음엔 이런 문법들이 있구나 하고 이해만 하고 넘어간 뒤, 여러 번 쓰시면서 익숙해지깅!

그리고 요즘엔 AI의 능력도 점점 업그레이드되고 있어서 조금 더 편해진거 같고욤ㅎ
말이 길어졌네요. 😅 그러니 모든 문법들을 외우지 마시고 이해하고 많이 써보는 것이 중요!
이 말이 하고 싶었던 거였어요.

그럼 다음 시간에는 간단히 html을 이용한 목록 만들기를 해볼게요! 😊