[HTML] 7. HTML 문단
이전 글:
2020/03/04 - [HTML and CSS] - [HTML] 5. HTML 속성
2020/03/08 - [HTML and CSS] - [HTML] 6. HTML 제목
제목 다음으로 중요한 것이 내용이다.
이번 장에서는 HTML에서 문단을 어떻게 표현할 수 있는지 배워보도록 하자.
우선 문단은 영어로 Paragraph이다.
그렇기 때문에 HTML에서 <p>라는 tag로 문단이 표기된다.
다음 예제를 보도록 하자.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
위의 예시는 <p>를 사용하기 위한 예제이니 적절한 구조를 갖춘 HTML은 아니다.
위의 예시를 보여준 이유는 예제를. html 파일로 실행시켰을 때
<p>~</p>사이에 있는 요소들 사이에 적당한 거리가 형성되는 것을 보여주기 위해서다.
이처럼 Chrome, Explorer, Edge와 같은 브라우저에서 문단끼리 거리를 자동으로 만들어준다.
HTML 이 실제로 보이는 방식
아마 HTML코드를 작성한다면 모두 표현하고자 하는 방법을 실제로 구현하고 싶을 것이다.
그러려면 HTML코드와 .html파일로 실행되는 실제와 차이를 알고 있어야 한다.
우선 스크린의 크기에 따라서 표현 방식이 조금씩 다르다.
예를 들어 핸드폰으로 블로그를 틀 때, 그리고 데스크톱으로 블로그를 틀 때
스크린 크기가 다르기 때문에 나타나는 양상이 조금씩 바뀐다.
또한 실제로 HTML 코드에서 띄어쓰기와 행 바꾸기를 많이 했다고 해서
그것이 당신이 웹사이트에서 구현되는 것은 아니다.
항상 적절한 tag를 통해서 의도하는 글자간의 간격을 조절할 수 있다.
다음 예를 통해 코드와 실제의 차이를 이해해보자.
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
위의 예시를 실행시킨 후에 결과를 보면,
첫 번째 본문과 두 번째 본문의 결과가 똑같이 나올 것이다.
즉, 당신이 추가로 띄어쓰기를 하거나 행 바꾸기를 하더라도 실제로는 구현이 되지 않는다.
또한 실행시킨 후 창 크기를 조절해보면, 창 크기에 따라 한 행에 위치한 글자 수가 달라지는 것을 알 수 있다.
HTML 행 바꾸기 tag는?
그러면 실제로 HTML에서 행을 바꾸고 싶다면 어떻게 해야 할까?
<br> tag를 사용해주면 된다.
앞의 글에서도 한 번 언급했었지만 <br>은 따로 </br>로 닫아 줄 필요가 없다.
다음 예시를 보자.
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>
위의 예시로부터 <br>의 쓰임새를 알 수 있다.
당신이 시를 작성하고자 한다. 하지만 문제가 생겼다.
이미 HTML로 시를 다 작성하였는데 실제로 실행시켜보니
시가 한 줄의 글로 써졌다!
<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
물론 <br>를 써서 다 분리해 줄 수 있다.
하지만 만약 내용이 너무 길어서 <br>로 다 행을 바꿔주기 힘들 떄는 다른 방법이 있다
<pre> tag를 사용하는 것이다.
<pre>는 작성된 텍스트 형식 그대로 사이트에 구현되도록 도와주는 tag이다.
<pre>안에 작성된 텍스트는 고정된 너비의 폰트(보통 Courier)로 구현된다.
특징은 HTML에서 작성된 띄어쓰기와 행 바꾸기를 그대로 반영해준다는 것이다.
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
이번 장에서는 제목 다음으로 중요한
문단을 작성하는 법에 대해서 배워보았다.
- <p>: 문단을 구성한다.
- <br>: 한 번의 행 바꾸기를 실행한다.
- <pre>: 작성된 텍스트 형식 그대로 정의한다.
여기서 배우는 것들은 자주 쓰게 될 tag들이니 기억하고 넘어가도록 하자.