#04. p 태그와 br 태그 단락과 줄 바꿈 - 프론트엔드 개발자 입문편 / HTML + CSS / 웹 코딩

| 2025-01-11 20:28 | 조회 241

#HTML #WebDevelopment #HTMLTags #CodingTutorial #WebDesign #myip

[주요 목차]

📜 P 태그의 이해

🔍 P 태그의 특징

💡 P 태그와 BR 태그의 차이

🛠️ P 태그의 잘못된 사용법

📚 추가 학습 자료

HTML은 웹 페이지의 구조를 정의하는 중요한 요소입니다. 그 중에서도 P 태그와 BR 태그는 텍스트를 정리하고 표현하는 데 필수적인 역할을 합니다. 이 블로그에서는 P 태그와 BR 태그의 기본 개념과 활용 방법을 알아보고, 초보자들이 흔히 저지르는 실수까지 다뤄보겠습니다. HTML을 처음 배우거나, 웹 개발에 관심이 있는 분들은 이번 기회를 통해 HTML의 기초를 확실히 다지는 계기가 되길 바랍니다.

📜 P 태그의 이해

P 태그는 'Paragraph'의 약자로, 문단을 정의하는 데 사용됩니다. HTML에서 단락을 표시하는 데 있어 중요한 역할을 하며, 각 단락은 P 태그로 감싸여야 합니다. 이 태그는 텍스트를 시각적으로 구분하여 독자가 내용을 쉽게 파악할 수 있도록 돕습니다. 예를 들어, 긴 글을 여러 단락으로 나누어 배치하면 읽기가 훨씬 수월해집니다. P 태그는 자동으로 여백을 삽입하여 각 단락을 구분해 주기 때문에, 코딩 시 별도의 스타일 지정 없이도 정돈된 레이아웃을 구현할 수 있습니다.

🔍 P 태그의 특징

P 태그는 웹 브라우저의 전체 너비를 차지하며, 텍스트가 한 줄에 다 담기지 않을 경우 자동으로 줄바꿈 처리가 됩니다. 이는 다양한 화면 크기에서도 일관된 레이아웃을 유지할 수 있도록 도와줍니다. 또한, P 태그는 여러 줄을 한 개의 단락으로 인식하기 때문에, 공간을 띄워도 웹 브라우저에서는 한 칸으로만 인식되어 출력됩니다. 따라서 텍스트 간의 간격을 조절하고 싶을 때는 CSS 스타일을 활용하거나, 엔터티 코드를 사용해야 합니다.

💡 P 태그와 BR 태그의 차이

P 태그와 BR 태그는 줄바꿈을 처리하는 데 있어 다른 역할을 합니다. P 태그는 단락 전체를 감싸지만, BR 태그는 특정 지점에서 줄바꿈을 강제합니다. 이는 특히 시각적으로 구분된 줄바꿈이 필요할 때 유용합니다. 예를 들어, 주소나 시구문 등에서 BR 태그를 사용하면 각 줄을 개별적으로 표시할 수 있습니다. 그러나 P 태그로는 이러한 세부적인 줄바꿈을 구현할 수 없으므로, 두 태그의 적절한 사용이 필요합니다.

🛠️ P 태그의 잘못된 사용법

초보자들이 흔히 저지르는 실수 중 하나는 P 태그를 잘못 사용하는 것입니다. 같은 단락에 여러 개의 P 태그를 사용하여 줄바꿈을 시도하는 경우가 있습니다. 이는 각 P 태그가 독립적인 단락으로 인식되기 때문에, 불필요한 여백이 발생하게 됩니다. 이러한 문제를 해결하기 위해서는 P 태그 내에서 BR 태그를 사용하여 줄바꿈을 처리하는 것이 바람직합니다.

📚 추가 학습 자료

P 태그와 BR 태그의 활용을 깊이 이해하기 위해서는 다양한 예제를 실습해보는 것이 중요합니다. 온라인 코딩 플랫폼이나, 오픈 소스 프로젝트에 참여해보는 것도 좋은 방법입니다. 또한, HTML과 CSS에 대한 기본적인 이해가 선행되어야 하므로, 관련 강의를 듣거나 서적을 탐독하는 것도 추천합니다.