HTML 줄 바꿈(Break Line) 태그란?
HTML에서 기본적으로 텍스트는 연속적으로 표시됩니다. 그러나 가끔씩 내용 중간에 줄을 바꾸고 싶을 때가 있습니다.
이럴 때 사용하는 것이 바로 줄 바꿈(Break Line) 태그인 <br>입니다. 줄 바꿈 태그는 텍스트의 흐름을 자연스럽게 조정하여 가독성을 높이는 데 도움을 줍니다.
줄 바꿈 태그 사용법
줄 바꿈 태그는 아주 간단하게 사용할 수 있습니다. <br> 태그는 닫는 태그가 필요 없는 단일 태그입니다. 즉, 내용을 감싸지 않고, 바로 사용합니다.
<p>첫 번째 문장입니다.<br>두 번째 문장입니다.</p>위 코드를 사용하면 첫 번째 문장과 두 번째 문장이 서로 다른 줄에 표시됩니다.
줄 바꿈 태그의 특징
1. 단일 태그
줄 바꿈 태그는 닫는 태그가 필요 없어서 사용이 간편합니다. 코드에서 <br>을 입력하기만 하면 됩니다.
2. 연속 사용 가능
필요에 따라 여러 번 사용할 수 있습니다. 여러 번 줄을 바꾸고 싶을 때는 <br>을 반복해서 사용할 수 있어요.
<p>첫 번째 문장입니다.<br><br>세 번째 문장입니다.</p>위 코드는 첫 번째 문장과 세 번째 문장 사이에 빈 줄이 생깁니다.
3. 가독성 향상
줄 바꿈 태그를 사용하면 긴 문장을 짧게 나누어 가독성을 높일 수 있습니다. 사용자가 내용을 쉽게 이해할 수 있도록 도와줍니다.
줄 바꿈 태그 사용 시 유의할 점
1. 과용 피하기
줄 바꿈 태그를 너무 많이 사용하면 오히려 가독성이 떨어질 수 있습니다. 필요한 만큼만 사용하는 것이 좋습니다.
2. 대신 CSS 활용하기
줄 바꿈이 아닌 여백을 조정하고 싶다면 CSS를 사용하는 것이 더 좋은 방법입니다. CSS의 margin이나 padding 속성을 통해 공간을 조정할 수 있습니다.
<style>
p {
margin-bottom: 20px; /* 단락 간 여백 설정 */
}
</style>
3. 단락 구분을 위해 사용하기
줄 바꿈 태그는 주로 문단 내에서 간단한 줄 바꿈을 위해 사용합니다. 여러 단락이 있는 경우 <p> 태그를 사용하여 내용의 구조를 분명히 하는 것이 좋습니다.
예시로 보는 줄 바꿈 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>줄 바꿈 예시</title>
</head>
<body>
<h1>HTML 줄 바꿈(Break Line) 태그</h1>
<p>이곳은 줄 바꿈 태그에 대한 설명입니다.<br>줄 바꿈 태그는 텍스트를 깔끔하게 나누는 데 도움을 줍니다.</p>
<p>여러 번의 줄 바꿈을 사용해 보세요.<br><br>다음 문장은 새 줄에 나타납니다.</p>
</body>
</html>
HTML에서 줄 바꿈 태그는 텍스트를 깔끔하게 나누고 가독성을 높이는 데 중요한 역할을 합니다. 간단하게 <br> 태그를 사용하여 줄을 바꾸고, 내용을 더 쉽게 읽을 수 있도록 만들어 보세요.
줄 바꿈 태그를 적절히 활용하면 여러분의 웹페이지가 더 깔끔하고 사용자 친화적으로 변할 수 있습니다!
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > HTML' 카테고리의 다른 글
| HTML 이미지 태그 - 웹페이지에 이미지 추가하는 방법 (2) | 2024.09.23 |
|---|---|
| HTML 링크(Tag) - 웹페이지 간의 연결을 만드는 방법 (0) | 2024.09.23 |
| HTML 단락 태그 (Paragraph Tag) - 웹페이지에서 내용을 정리하는 방법 (0) | 2024.09.23 |
| HTML 제목 태그 (Heading Tags) - 웹페이지 구조를 정리하는 방법 (1) | 2024.09.23 |
| HTML에서 사이트 이름 설정하기 - 웹페이지의 첫인상을 결정하는 중요한 요소 (0) | 2024.09.23 |
