이 구문을 한번 보자. 여러분은 어떠한 출력이 나올것 같은가?
This is html.
I lik html. <- 오타다.
I learn html.
로 출력될 것 같은가? 결과를 보자.
결과는 개행이 하나도 적용되지 않았다.
그렇다. html코드상에서의 개행은 아무 의미가 없다.
그냥 코드의 가독성일 뿐이며 개행을 표시하기 위해서는 명시적으로 개행을 표시해줘야한다.
이게 어찌보면 비합리적이라고 생각 할 수 있지만 사실 조금만 생각해보면 비합리적인것이 아니라는것을 알 수 있다.
만약 정말 enter가 개행을 효과를 발휘한다면 우리는 코드를 모두 아래같은 형식으로 적어야한다.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Hello,Title</title></head><body>
This is html.
I lik html.
I learn html.
</body></html>
이렇게 적으면 당연히 불편하지 않겠는가.
따라서 html코드상의 개행은 개행이 아니다.
따라서 개행을 만들려면 개행태그를 사용해줘야한다.
개행태그 자체는 1개밖에 없지만 개행을 만들 수 있는 방법은 총 3가지가 있다.
이번에는 이 3가지를 모두 알아보려고한다. 셋은 확실한 차이점이 있으며 상황에 맞게 사용하자.
br태그 - 강제개행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello,Title</title>
</head>
This is html.<br>
I lik html.<br/>
I learn html.<br>
</body>
</html>
br태그의 경우 정석적인 개행 태그이다. 사용법은 위에서 봤으니 알겠지만 두가지 방식을 모두 쓸 수 있다.
"text1"<br>
"text2"<br/>
원래는 2번형식처럼 열리는 태그에 닫히는 태그를 포함하는 태그를 써야한다.
1번같은 태그를 쓰려면 반드시 닫는태그가 필요하지만 br태그는 개중에 닫는태그가 필요하지않은 몇 안되는 태그이다.
저 태그를 개행을 하고싶은 부분에 붙혀주면된다.
p태그 - 단락생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello,Title</title>
</head>
<p>
This is html.
</p>
I lik html.
I learn html.
</body>
</html>
p태그는 단락을 생성하는 태그이다.
p내부에서는 단락을 형성하지 않지만 p태그가 끝나는 순간 한단락을 띄어준다.
따라서 p태그 역시 개행을 만는데 사용할 수 있다.
그러나 보통 개행을 만들때 쓰지는 않고 p태그는 단락을 구성할때 쓴다.
그런데 예전 사이트들 중에서는 p태그로 단락을 구성하는 경우도 심심찮게 볼 수 있다.
물론 권장사항은 아니다.
실제 웹사이트에서는 p태그를 class속성과 곁들여서 css디자인을 할때 많이 사용한다.
pre태그 - 마크업을 무시하고 있는 그대로 보여주는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello,Title</title>
</head>
<pre>
This is html.
I lik html.
I learn html.
</pre>
</body>
</html>
pre태그는 조금 특별한 태그이다.
pre태그를 쓰는 순간 pre태그 안에서는 더이상 태그가 먹히지 않고 사용자가 타이핑한 그대로가 표시된다.
그러나 사실 pre태그를 이용해서 개행을 표시하는 경우는 사실상 없다고 봐도 된다.
그 이유는 좀 간단한데 pre태그안에서는 마크업이 안먹히기 때문이다.
그래서 특수한 경우에만 사용을한다.
'Programming > HTML' 카테고리의 다른 글
| [html-04]수평선과 특수문자 (0) | 2017.10.10 |
|---|---|
| [html-03]텍스트 강조(b,strong,s,del,i,em,u,sup,sub태그) (0) | 2017.08.23 |
| [html-01]html파일 만들기와 기본 구조 (0) | 2017.07.23 |