Chrome은 내 글을...
필자는 티스토리에 짧은 글을 연재하고 있다. 부끄럽게도 스스로 "손바닥소설"이라는 장르명까지 붙여가며 열심히 쓰고 있는 중이다. 아래는 연재 중인 손바닥소설의 가장 첫 글이다.
당연하게도 위 글 역시 HTML문서로 만들어졌다. 티스토리 에디터를 이용하여 작성되었으며 갤럭시탭에서 chrome 브라우저를 이용하여 불러온 화면이다.
위와 완전히 동일한 문서를 작성하지는 못하겠지만, 수작업으로 HTML문서를 작성하는 방식을 이용하여 가장 비슷한 형태가 될 수 있도록 작업을 시작해보자.
문단과 문장을 위한 html 태그
앞서 HTML문서의 기본구조에 대해 포스팅을하며 문단 영역을 지정하기 위한 tag 역시 언급했었다. 바로 <p> tag이다.
다시금, HTML문서의 기본 구조를 가져와 <p></p> 사이에 "꿈"의 텍스트를 붙여넣어 보았다.
<!DOCTYPE html>
<head>
</head>
<body>
<p>
꿈
- w r i t t e n b y Y I O R A E -
꿈은 별과 같아서
아무리 손을 뻗어보아도
잡히지 않지만,
달도 누워버린
어두운 밤일 수록
더욱 밝아보여
하염없이 고개를 들어올릴 수 밖에......
<꿈. end>
</p>
</body>
기대와는 모든 글자가 줄바꿈없이 연속으로 출력되었다. 가독성이 매우 떨어지는 문서가 완성되었다. 가독성을 확보하기 위해 줄바꿈을 해야할 필요가 생겼다. HTML에서는 줄바꿈을 위한 tag가 존재한다. <br>이 바로 그것이다.
이 <br> tag는 닫는 tag가 필요없다.
아래는 <br> tag를 이용해 줄바꿈을 적용한 HTML문서와 브라우저 출력 결과이다.
<!DOCTYPE html>
<head>
</head>
<body>
<p>
꿈<br>
<br>
- w r i t t e n b y Y I O R A E -<br>
<br>
꿈은 별과 같아서<br>
아무리 손을 뻗어보아도<br>
잡히지 않지만,<br>
<br>
달도 누워버린<br>
어두운 밤일 수록<br>
더욱 밝아보여<br>
<br>
하염없이 고개를 들어올릴 수 밖에......<br>
<br>
<꿈. end><br>
<br>
</p>
</body>
나의 글을 좀 더 스타일리쉬하게
원본과는 아직도 차이가 있다. 원본의 제목은 본문보다 글자크기도 크고, 굵게 처리되어 있었다. 또한, 콘텐츠들이 문서의 중앙에 정렬되어 있었다. 줄바꿈까지가 각 문장의 위치를 잡아주는 '구조적인' 작업이었다면 글자의 크기와 굵기를 변경하고 위치를 조정하는 것은 '스타일적인' 작업이다.
이런 스타일적인 작업은 바로 CSS가 담당하게 된다. 다음 포스팅에서는 지금까지 작업된 HTML문서에 CSS 코드를 추가해봄으로써 현재 작성 중인 HTML문서의 출력형태가 원본문서의 출력 형태와 더욱 유사하도록 만들어보겠다.
'HTML' 카테고리의 다른 글
| [HTML,CSS] HTML 문서의 구역을 나눠서 CSS를 적용해보자(1) (0) | 2021.05.04 |
|---|---|
| [HTML,CSS] 웹문서에 style을 입히다, CSS (0) | 2021.04.29 |
| [HTML] padding을 입은 div 사이엔 간격(margin)이 필요해 (0) | 2021.03.19 |
| [HTML] HTML문서에 이미지를 넣어보자 (0) | 2021.03.15 |
| [HTML] 결국, HTML은 웹문서의 구조를 정의하는 방법론 (0) | 2021.03.06 |
댓글