2. 내용 입력하기(1) - 텍스트 입력 1

 

 

이제부터 본격적으로 html 웹 문서 내에 내용을 입력하는 과정을 살펴보겠습니다. 우선은, 가장 기본 중의 기본이라 할 수 있는 텍스트 입력에 대해 살펴볼 것입니다. 굳이 설명이 필요한 내용인가? 싶기도 하겠지만, 잘 기억해두어야 하는 내용이며 티스토리를 포함한 각종 html 편집 툴, 마크다운 문서를 사용하는 경우에도 크게 도움이 됩니다. 

 

 

---

 

 

○ <hn> 태그 - 제목 텍스트 태그

<h1>, <h3>... 형태로 사용하는 <hn> 태그는 'heading', 즉 제목을 위한 태그입니다. 1 ~ 6까지의 숫자를 사용하며 1이 가장 큰 제목의 형태입니다. 

 

<h1>제목을 넣읍시다</h1>
<h2>크기의 차이가 느껴지십니까?</h2>
<h3>간단하게 넘어가 봅시다</h3>

 

제목을 넣읍시다

크기의 차이가 느껴지십니까?

간단하게 넘어가 봅시다

 

 

○ <p>와 <br> 태그 - 단락, 줄 바꿈

사실 여러 텍스트 편집기를 사용하시던 분들이라면 <br>은 익숙하실 것입니다. 게시판에 글을 쓰는 경우에도 종종 사용하는 태그이니까요. 주로, 줄을 바꾸는 용도로 사용하셨을 겁니다. 한편으로는 <p> 태그는 웹사이트 소스를 열어보았을 때 많이 볼 수 있는 태그입니다. 그럼, 이 두 개의 태그에는 어떤 차이가 있을까요?

 

우선, <p> 태그는 문장을 입력할 때, 단락으로 정의합니다. 단, <p> 태그 사이에 들어가는 텍스트들을 단락으로 인식하는 것이지 웹 페이지나 줄바꿈을 임의로 지정하는 개념이 아닙니다. 즉, 편집기에서 <p>와 </p> 태그 사이에 들어가 있는 문장에 임의로 줄 바꿈을 하더라도, 줄 바꿈은 브라우저 사이즈가 한 줄로 표현할 수 없을 경우에만 자동으로 줄 바꿈이 일어납니다. 

 

반대로 <br>은 원하는 텍스트의 위치에서 엔터키를 누른 것 처럼 강제로 줄 바꿈을 실행합니다. 정확하게 어떤 글자에서 줄 바꿈이 일어나는지 지정하게 됩니다. 닫는 태그 없이 <br> 단독으로 사용할 수 있다는 특징이 있죠.

 

그럼, <p>와 <br>은 어떤 사용성에 있어서 차이가 발생할까요? 예를 들어, 어떤 문장(단락)을 <p> 태그로 단락으로 지정하게 되면, 나중에 단락 스타일을 CSS를 통해 지정하게 되면 일괄적으로 스타일이 지정됩니다. 하지만, <br>을 두 번 사용해 '단락처럼 보이는' 문장을 지정하면 추후 CSS에서 단락을 기준으로 스타일을 적용할 때 의도와는 다른 문제가 발생합니다. 임의로 줄 바꿈 <br> 태그를 쓰더라도, 어떤 단락을 구분할 때는 반드시 <p> 태그로 단락 구분을 지어야 합니다. 

 

 

<h1>제목 샘플</h1>
<p>첫 번째 단락입니다. 예시는 이해가 되시나요?</p>
<p>단락을 이런 식으로 구성하면서, 임의로 줄바꿈<br>을 넣을 수 있습니다.</p>
<p>p태그와 br태그의 차이점을<br>잘 이해하면서 공부합시다.</p>

 

제목 샘플

첫 번째 단락입니다. 예시는 이해가 되시나요?

단락을 이런 식으로 구성하면서, 임의로 줄바꿈
을 넣을 수 있습니다.

p태그와 br태그의 차이점을
잘 이해하면서 공부합시다.