코딩 첫걸음 | HTML 줄바꿈 태그의 종류

🤖[코딩 첫걸음]은 코딩에 이제 막 입문한 분들을 위한 시리즈입니다. 웹 개발의 기초를 단단히 다질 수 있는 HTML 기본 문법들만 쏙쏙 뽑아 정리해 드리겠습니다.

첫 번째 주제는 HTML 줄바꿈 태그입니다. HTML에서 줄바꿈은 웹 페이지에서 텍스트나 다른 요소들 사이에 새로운 줄을 시작하는 데 사용됩니다. 이 기능은 특히 문단이나 목록 항목 사이의 공간을 더하거나, 긴 텍스트를 보기 쉽게 구분하고자 할 때 유용합니다.

목차

1. <br> 태그
2. <p> 태그
3. <div> 태그
4. <ol>, <ul>, <li> 태그

1. <br> 태그

HTML에서 줄바꿈을 생성하는 태그는 <br>입니다. <br> 태그는 ‘line break’를 의미하며, 닫는 태그가 없는 빈 태그(empty tag)입니다. 이 태그를 사용하면, 브라우저는 해당 위치에서 텍스트를 다음 줄로 넘깁니다.

예를 들어, 여러분이 시를 웹 페이지에 표시하고 싶다고 가정해봅시다. 각 시구를 다음 줄에 배치하기 위해서는 <br> 태그를 사용할 수 있습니다.

html
<p>
시가 시작됩니다.<br>
잔잔한 바람이 불고,<br>
해가 지는 것을 바라봅니다.<br>
마음은 평화로워집니다.<br>
</p>

이 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.

시가 시작됩니다.
잔잔한 바람이 불고,
해가 지는 것을 바라봅니다.
마음은 평화로워집니다.

2. <p> 태그

<p> 태그는 "paragraph"의 약자로, 하나의 문단을 정의합니다. 이 태그는 앞뒤로 자동으로 줄바꿈을 생성하므로, 문단 구분에 매우 유용합니다. <p> 태그 내에서 텍스트를 작성하면 해당 문단이 다른 문단과 시각적으로 구분됩니다.

예를 들어 다음과 같이 사용할 수 있습니다.

html
<p>첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.</p>

이 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.

첫 번째 문단입니다.
두 번째 문단입니다.

3. <div> 태그

<div> 태그는 ‘division’의 약자로, 웹 페이지의 특정 영역을 정의하는 데 사용됩니다. <div> 태그 자체에는 줄바꿈 기능이 없지만, CSS의 display 속성을 사용하여 블록 요소로 변경하면 줄바꿈 효과를 얻을 수 있습니다. 블록 레벨 요소는 자동으로 줄바꿈 효과를 가지므로, 각 <div> 태그로 감싸진 텍스트는 서로 다른 줄에 표시됩니다.

예를 들어 다음과 같이 사용할 수 있습니다.

html
<div style="display: block;">첫 번째 영역입니다.</div>
<div style="display: block;">두 번째 영역입니다.</div>

이 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.

첫 번째 영역입니다.
두 번째 영역입니다.

4. <ol>, <ul>, <li> 태그

<ol> 태그와 <ul> 태그는 각각 순서가 있는 목록과 순서가 없는 목록을 만들 때 사용하며, 그 안에 <li> 태그로 각 항목을 나열합니다. 이 태그들은 목록 항목 사이에 자동으로 줄바꿈을 생성하므로, 깔끔한 목록을 만들 수 있습니다.

먼저, <ol> 태그와 <li> 태그를 사용하는 예시를 보여드리겠습니다.

html
<ol><li>첫 번째 항목</li><li>두 번째 항목</li>
</ol>

이 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.

1. 첫 번째 항목
2. 두 번째 항목

<ul> 태그와 <li> 태그를 사용한 예시는 다음과 같습니다.

html
<ul><li>첫 번째 항목</li><li>두 번째 항목</li>
</ul>

이 HTML 코드는 다음과 같은 형태로 웹페이지에 표시됩니다.

■ 첫 번째 항목
■ 두 번째 항목

이외에도 <hr> 태그를 사용하면 수평선을 삽입하여 내용을 구분할 수 있고, <blockquote> 태그를 사용하면 인용문을 나타내면서 줄바꿈 효과를 얻을 수 있습니다.

이렇게 다양한 HTML 태그를 상황에 맞게 활용하면서 CSS와 함께 사용하면 웹 페이지에서 줄바꿈을 비롯한 다양한 시각적 효과를 구현할 수 있습니다. 적절한 태그를 선택하고 의미에 맞게 사용하는 것이 중요합니다.

CREDIT

글 | ChatGPT, Claude, 박영경 팀스파르타 에디터

국비 지원 받고 IT업계에서 커리어 쌓는 방법

개발자, 디자이너, PM, 데이터 분석가 등 IT업계 직군 취업에 관심이 있으신가요?

온라인 부트캠프 중 취업률 1위, 스파르타 내일배움캠프에 지원해 보세요.

사전 지식이 없어도 맞춤형 커리큘럼을 통해 커리어를 주도적으로 설계할 수 있는 역량을 기를 수 있어요.

수료 후엔 인턴십 프로그램, 현직자 멘토의 1:1 이력서 코칭 등 취업 지원 패키지가 평생 지원됩니다.