반응형
안전한 구조를 위해 br 태그에 종료를 표시하자.
앞에서 문단을 나타낼 때 <p>...</p> 태그를 사용하고 소스 코드를 표현할 때 <pre>...</pre> 태그를 사용하는 것을 다루었죠.
이번에는 문단을 나누지는 않지만 개행에 사용하는 <br> 태그를 소개할게요.
HTML의 대부분 태그는 시작 태그와 종료 태그가 있습니다. 물론 내부 문자열이 없을 때 시작과 종료를 한꺼번에 표현하기도 하죠.
- 시작 태그와 종료 태그
<title>태그없이 입력한 예</title>
- 시작과 종료를 한꺼번에 표현
<meta charset="utf-8" />
종료 태그는 시작 태그명과 같은 이름을 사용하고 태그 앞에 /를 추가한 것을 말해요.
그런데 br은 종료 태그가 없습니다. 이러한 특징은 HTML이 구조적으로 안전하지 못하게 하는 요인이기도 합니다. XML은 이에 반해 언제나 시작 태그가 있으면 종료 태그가 있어요. 물론 내부 문자열이 없을 때 시작과 종료를 한꺼번에 표현할 수 있어요.
아무튼 한 문단에서 개행을 원할 때는 <br> 태그를 사용할 수 있어요. 하지만 구조적으로 안전하게 사용하기 위해 <br/>을 사용하길 권합니다.
<!DOCTYPE>
<html>
<head>
<title>안전한 구조로 br 태그 작성</title>
<meta charset="utf-8" />
</head>
<body>
<p>정몽주의 '단심가'</p>
<p>
이몸이 죽고 죽어 일백번 고쳐 죽어<br />
백골이 진퇴되어 넋이라도 있고 없고<br />
님 향한 일편단심이야 가실 줄이 있으랴<br />
</p>
</body>
</html>
반응형
'언어 자료구조 알고리즘 > HTML5' 카테고리의 다른 글
[HTML5] 10. HTML 문서를 작성하는 사람 입장에서는 보기 불편한 특수 문자 (0) | 2016.05.31 |
---|---|
[HTML5] 9. time 태그로 날짜와 시각 정보를 표시하는 습관을 기릅시다. (1) | 2016.05.09 |
[HTML5] 8. 굵게 표시하는 태그 <strong>은 강조 <b>는 그냥 굵게 (0) | 2016.05.07 |
[HTML5] 7. mark 태그를 이용하여 중요한 텍스트에 형광펜 효과를 주자. (0) | 2016.05.07 |
[HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용! (0) | 2016.05.05 |
[HTML5] 4. 주석으로 가독성을 높이자. (0) | 2016.05.05 |
[HTML5] 3. 글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정 (0) | 2016.05.04 |
[HTML5] 2. 간단해진 HTML 문서 형식 선언 <!DOCTYPE html> (0) | 2016.05.04 |
[HTML5] 1. 첫 번째 만드는 HTML 문서, "Hello, HTML" (0) | 2016.05.04 |
[HTML5] 이미지 (0) | 2016.04.09 |