코딩 첫걸음 | HTML 줄바꿈 태그의 종류
첫 번째 주제는 HTML 줄바꿈 태그입니다. HTML에서 줄바꿈은 웹 페이지에서 텍스트나 다른 요소들 사이에 새로운 줄을 시작하는 데 사용됩니다. 이 기능은 특히 문단이나 목록 항목 사이의 공간을 더하거나, 긴 텍스트를 보기 쉽게 구분하고자 할 때 유용합니다.
목차
- <br> 태그
- <p> 태그
- <div> 태그
- <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, 박영경 팀스파르타 에디터
