웹 개발을 위한 HTML 가이드 16편 - 개행과 가로줄 태그

텍스트 관련 태그

• 굵기와 기울기 태그(b, strong, i, em)
• 개행과 가로줄 태그(br, hr)현재 글
• 윗첨자와 아랫첨자 태그(sup, sub)
• 텍스트의 추가, 제외 태그(ins, del)
• 취소선(s)과 밑줄 표현
• 인용 태그(q, blockquote)
• 하이라이트 태그(mark)
• small 태그
• code, pre 태그
• 번외 - 탈출문자 사용하기
• 그 외의 텍스트 태그들

개요

이번 글은 웹 개발을 위한 HTML 가이드 16편입니다. 텍스트 관련 태그 그 두번째 파트이고, 개행과 가로줄 태그에 대해서 알아보려고 합니다. 말했듯이 이번 글에서 알아볼 태그는 총 두가지입니다. 하나는 이미 다뤘던 적이 있는 줄바꿈을 만들어주는 개행 태그. 즉 br태그입니다. 다른 하나는 페이지에 가로줄을 만들어주는 hr태그가 준비되어 있습니다. 이번 글도 그렇게 길지 않고 어려운 내용은 없을 겁니다. 천천히 함께 알아보도록 합시다.

이번 글을 포함한 앞으로의 가이드에서는 새로운 태그를 연습하기 위해서 우리의 프로젝트 폴더에 연습 파일을 하나 만들고, 그 안에서 연습을 진행한 다음에 우리 프로젝트 폴더에서 메인이 되는 index.html 파일에서 본격적인 실습을 진행하고 각 가이드를 마칠 생각입니다.

개행 태그(br)

HTML 상에서 아무리 엔터를 많이 치고 스페이스를 많이 넣더라도 실제 웹 상에서 보여지는 공백은 오직 한 칸에 불과합니다. 하지만 가끔은 줄바꿈을 통해서 레이아웃을 조정하고 싶을 때라던지 문단의 안에서 엔터를 친 것처럼 줄바꿈을 반영하고 싶을 때가 있죠. 그럴 때에 br태그를 사용합니다.

자, 우리의 프로젝트 폴더에 파일을 하나 만들어봅니다. 저는 br.html이라고 이름을 지었습니다. 이제 html의 기본적인 구조는 다들 아실 겁니다. 따라서 그 부분은 생략토록 하고 작성을 해주시면 됩니다.

이제 body태그 안에 아래와 같은 코드를 작성해보세요. 아 물론, 글자는 아무렇게나 해도 상관 없습니다.

<p>
  엔터를 치면
  어떻게 될까?
</p>

작성을 한 다음에 여러분이 직접 실행해서 확인해보세요. 결과는 어땠나요?

크게 보기 (새 창)

엔터를 몇 번을 치건 스페이스를 몇 번을 누르건 위의 이미지처럼 아무런 의미가 없습니다. 반영이 안되기 때문이죠. 그래서 br태그를 사용하는 겁니다.

<p>
  엔터를 치면<br />
  어떻게 될까?
</p>

br태그는 홀로 닫는 태그입니다. 반드시 <이름 /> 이렇게 적을 필요는 없습니다. 하지만 이렇게 표기하는 것을 추천합니다. 직관적이니까요. 아무튼, 이렇게 수정을 하고 실행해봅시다.

크게 보기 (새 창)

줄바꿈이 되었습니다. 줄바꿈이 필요할 때에는 br태그를 사용한다는 것을 인지하시면 되겠습니다. 그럼 다음으로 넘어갑시다.

가로줄 태그(hr)

가로줄을 만들어주는 태그는 사실 그렇게 많이 쓰이지는 않는 것 같은데 저는 가끔 사용합니다. 그래서 다뤄보도록 하겠습니다. 가로줄을 만들어주는 태그는 hr태그입니다. 홀로 닫는 태그이고 사용하는 방법은 아주 간단합니다.

<hr />

이번에는 예제 파일을 만들 필요 없이 그냥 보기만 하셔도 됩니다. 저는 만들어두겠습니다. 웬만하면 구분을 해서 예제 파일을 만드는 것을 좋아합니다. 위의 코드를 입력한 hr.html 파일을 실행해보겠습니다.

크게 보기 (새 창)

그냥 이렇게 가로줄을 만들어줍니다. 별 건 없죠.

실전 연습

이번 글에서는 딱히 실습을 할 필요는 없어서 넘어가도록 하겠습니다. 우리가 만든 프로젝트에는 가로줄이나 줄바꿈은 필요가.. 없을 것 같습니다. 앞으로도 우리의 프로젝트에 필요한 것 같다면 실습을 반드시 진행하는 것으로 가닥을 잡으면 될 듯합니다. 그러니 이번 글은 그냥 넘어가도록 합시다.

이번 글에서는 개행과 가로줄을 만들어주는 br태그와 hr태그에 대해서 알아봤습니다. 많이 사용되지는 않더라도 언젠가는 사용할 일이 있을지도 모릅니다. 기억을 해두는 것을 추천드립니다. 그럼 이번 글은 여기서 이렇게 마치도록 하겠습니다. 다음 글은 윗첨자와 아랫첨자를 만드는 태그에 대해서 알아보도록 합시다. 다음 글에서 봅시다.