|
HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법 |
|
환경: Eclipse Mars, Android 4.2.2 |
HTML 에서는 텍스트의 줄 바꾸기는 엔터가 아닙니다. 그리고 스페이스를 여러 개 쳐서 공간을 늘여도 하나만 인식하게 됩니다. 그럼 웹 브라우저에서는 텍스트에 엔터 효과를 어떻게 줄까요? 두 가지 태그로 이야기 해 보겠습니다.
▼ 아래 그림처럼 HTML 문서에 엔터를 눌러서 줄을 띄워도 웹 브라우저에서는 한 줄로 나타나게 됩니다. 그리고 스페이스바로 아무리 띄워도 한 칸만 인식하게 됩니다. 이 때 줄바꿈을 해 주는 태그가 <br> 과 <p> 입니다. <br> 은 줄바꾸는 태그이고 <p> 는 문단을 구분하는 태그입니다. 자동으로 줄바꿈이 되는 것이죠.
▼ 아래 그림은 위의 소스를 실행했을 때 모습입니다. 소스에서는 3칸을 띄웠지만 브라우저에서는 한 줄이 되었네요. 의도 한대로 표현 하시려면 <br> 과 <p>이 필요합니다.
|
¤ <br> 태그를 적용 |
▼ 그럼 줄 바꿈을 위한 <br>, <p> 태그의 차이는 무엇일까요? <br> Line Break 의미로 태그가 있는 다음 내용은 줄바꿈이 됩니다. <p> 는 <p> 와 </p> 사이에 값을 넣어서 단락을 구성하는 것입니다. 단락이기 때문에 한 줄이 더 띄워 집니다. 그러니까 <br> 이 두 개 들어간 효과를 얻는 것이죠.
|
¤ <p> 태그를 적용 |
▼ <p> 태그는 위에서 설명했듯이 단락을 의미합니다. 문서의 단락과 동일하다고 생각하시면 됩니다. 단락과 단락 사이에는 줄 바꿈과 함께 한 줄 더 띄워 집니다. 만약 <p> 태그 안에 <p> 태그가 들어가면 어떻게 될까요? 결과는 연속으로 사용한 것과 같은 효과를 나타냅니다. 그러니까 아래 두 소스는 동일한 결과가 나온다는 것이죠.
<!DOCTYPE HTML> <html> <head> <meta content="text/html; charset=euc-kr"> <title> 정렬 </title> </head> <body> <p> <p> 로 문서의 줄 바꿈을 합니다. <p> <p> 두 번째 단락입니다. </p> </p> </body> </html>
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 이미지 관리를 위한 img 태그 기본적인 내용 (0) | 2019.01.03 |
|---|---|
| HTML 순서 없는 목록 만들기 ul, li 태그 사용법 (0) | 2018.10.31 |
| HTML address 태그 이용해서 제작자, 주소, 연락처 입력하기 (0) | 2018.10.13 |
| 스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법 (0) | 2018.06.06 |
| HTML 텍스트 입력할 때 이용되는 태그들 사용법 (0) | 2018.05.02 |
| HTML 텍스트 크기를 조절하는 제목 태그 Hn 사용하기 (0) | 2018.03.20 |
| HTML 특수문자 출력, 공백을 적용할 수 있는 코드 (0) | 2018.03.02 |
| HTML 기본 구조 알아 보기 (0) | 2018.01.30 |
