웹 기술로 앱 개발자 되기 시리즈 - HTML 단락

"웹 기술로 앱 개발자 되기" 시리즈 입니다.

1차 목표는 html -> css -> javascript 순의 정리이고,
2차 목표는 es6 -> react -> graphql + mongodb -> react native 순의 정리입니다.

웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 자세히 정리해 보도록 하겠습니다.

이번 포스트에서는 HTML 태그 중 내용을 담기위한 단락과 관련 태그들에 대해 알아 보도록 하겠습니다.

---

HTML 단락

HTML 페이지를 생성하는 가장 큰 이유는 특정 내용을 담아서 되도록 많은 사람에게 그 내용을 전달하고자 함 입니다.
HTML 에서 이 내용을 포함하는 가장 대표적인 태그가 바로 <p> Paragraph 태그입니다.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

최근에는 모바일에서의 웹 검색이 보편화 되어서 이 <p> 태그보다는 사용자 화면크기에 따라 컨텐츠의 배치를 조정하기 위해 편리한 <div> 태그가 아주 아주 많이 사용되긴 하지만, 문서의 내용인 단락을 HTML 에 담기 위한 태그로는 바로 이 <p> 태그가 원조 중에 원조라 할 수 있겠습니다.

특히 <p> 태그와 관련해서 한가지 오해하기 쉬운 점은 이 <p> 태그가 라인을 띄우기 위한 태그라고 이해하고 있는 분들이 한국에는 매우 많다는 점입니다. (저도 처음에 html 을 홀로 배우던 시절 라인을 띄우기 위한 사용이 강조된 책으로 배워서 인지, paragraph 라는 원래 의미는 사라지고, 라인 띄위기 용도로만 알고
사용 하였었던 호랑이 담배피던 시절이 있었음을 고백합니다)

물론 <p> 태그는 이전 포스트에서 다뤘던 <h1>~<h6> 태그와 마찬가지로 브라우저가 태그 위치에 Margin 여백을 추가해 주기 때문에 컨텐츠를 어느 정도 간격을 갖게 랜더링 하고 싶은 경우에 사용이 가능하기는 합니다.

하지만 이렇게 Margin 여백을 부여하는 이유는 본래의 의미인 Paragraph, 즉 단락을 올바른 범위에서 구분하여 출력하기 위한 것이지 컨텐츠 끼리의 일정 공백을 만들기 위한 용도는 아니라는 것입니다.

뭐 정답은 없듯이 나는 그렇게 계속 사용할꺼야 라고 하시는 분도 계시겠지만, 라인 간의 일정 공백을 만드시기 위한 용도라면 <p> 태그의 사용보다는 style 을 부여해서 처리하실 것을 권해 드립니다. (css 관련 포스트 참조)

다시 한번 강조하지만 <p> 태그는 Paragragh 를 구분지어 출력하기 위한 태그입니다.

HTML 화면 출력에 대해

<p> 태그에 대해 보다 상세한 내용을 알아보기 전에 한가지 짚고 넘어갈 것이 있습니다.

한글이나 워드같은 워드프로세서에서는 문서의 내용을 입력할 때 의도적으로 문서의 내용을 보다 잘 정돈된 모습으로 보이고자 공백문자열을 아주 잘 활용을 합니다.

[공백으로 정돈 전]
순번 이름 나이
1번 홍길동 1
2번 남궁길동무 5
3번 김수한무거북이와두루미 200

[공백으로 정돈 후]
순번                          이름                                        나이
1번                         홍길동                          1
2번                         남궁길동무                       5
3번                         김수한무거북이와두루미             200

이런식으로 말이지요.

하지만 HTML 페이지는 사실 자신이 출력될 대상 화면의 크기에 대해 전혀 알지 못한채로 생성이 됩니다. 큰 화면을 가진 대형 모니터에서 출력이 되는 경우도 있고, 스마트폰 처럼 매우 작은 크기의 화면에서 출력이 되는 경우도 있겠죠.
그리고 이미 출력된 화면을 사용자가 언제든 키우거나 줄일수도 있구요.

그림으로 치자면 전체 캔버스의 크기를 미리 알 수가 없다는 것이지요. (워드프로세서는 A4 크기라는 것을 알수 있지만요).
그래서 HTML 문서는 문서내에 사용된 모든 중복된 공백 문자열을 단 하나의 공백으로 취급해서 출력을 하고 사용자가 입력한 라인바꿈 정보는 모두 무시하고 출력되도록 표준이 되어 있습니다. 오히려 화면마다 크기가 다른 공백문자나 라인바꿈의 출력간격이 달라져서 내용이 모두 어그러져 보이는 것 보다 공백의 중첩이나 라인바꿈 입력정보를 무시해서 내용의 출력이 보다 통일성을 가지도록 방향을 잡은 것이라고 할 수 있습니다.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

즉 위와같이 여러 줄로 의도적으로 나누어서 단락을 HTML 에 작성하더라도,

브라우저는 모든 띄워진 라인을 무시하고 하나의 단락으로 출력해 버립니다.

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>

또한 위와 같이 의도적으로 단어들 사이에 공백문자를 줘서 여백을 주려해도

브라우저는 마찬가지로 모든 중복된 공백을 무시하고 단 한칸의 공백으로 전환해서 출력을 해 버립니다.

https://codepen.io/pen/ 에서 위 두 코드를 직접 입력해 보고 결과를 확인해 보시기 바랍니다.

이런 이유로 HTML 을 접한지 얼마 되지 않은 분들은 공백과 라인바꿈이 무시되는 것 때문에 적잖이 당황을 해서 공백을 수 없이 더 추가해 보기도 하고, 라인바꿈을 마구 마구 추가해 보기도 하면서 괜한 시간낭비를 하게 되는 데요. 여러분은 이런 괜한 시간낭비를 하지 마시길 바래 봅니다.

종료 태그를 잊지 마세요

<p> 태그를 사용할 때 한가지 더 주의해야 할 점이 있는데요. 반드시 <p> 태그를 연 후에는 </p> 와 같이 종료 태그로 닫아주셔야 합니다.

이전 포스트에서도 설명드렸던 것 처럼, 브라우저 마다 종료되지 않은 태그가 사용되었을 경우에는 알아서 자체적(?) 으로 처리하기 때문에 출력에 일관성도 없게되고, 심한 경우에는 아예 해당 단락 자체가 출력이 되지 않고 화면에서 사라져 버리기도 하기 때문입니다.

그러니 반드시 <p> 태그가 열리면 </p> 태그로 닫아주시기를 다시한번 강조해서 말씀드립니다.

라인바꿈을 위한 <br>

<br> 태그를 기억하시나요? 이 포스트에서도 설명드렸던 것 처럼 브라우저는 사용자가 입력한 라인바꿈을 모두 무시하기 때문에 의도적으로 단락에서 라인바꿈을 하고자 하는 경우에 사용하는 태그가 바로 <br> 태그입니다.
여기서 br 은 영문으로 line break 을 뜻합니다.

<p>This is
a paragraph
with line breaks.</p> 
<p>This is<br>a paragraph<br>with line breaks.</p>

사용자가 입력한 라인바꿈은 모두 무시되었지만, <br> 태그를 사용하면 라인바꿈을 화면에 출력할 수 가 있습니다.

라임 맞추기의 문제

하지만 여전히 공백이 무시되는 것은 해결하지 못했네요.
랩 가사를 화면에 옮기려면 라임을 맞춰주기 위해 공백이 꼭 필요한 데요 이럴때 어떻게 해야 할 까요?
아니 라임보다 소스 코드를 화면에 출력할 경우엔 더욱 공백을 무시하면 안되는데 말이죠.

<p>
  if(config.api && config.api.enabled) {
      var express = require('express');
  }
</p>

제 보팅봇 소스 중 일부인데요. 이게 뭔가요? 아름다운 여백의 미는 어디로 가 버린 건나요 ㅠㅠ.

입력된 형식을 그대로 유지해 주는 <pre> 태그

저만 이런 필요를 느낀 것이 아니겠죠? 그래서 HTML 에서는 사용자가 입력한 공백, 라인바꿈, 탭 등등 브라우저가 원래는 무시해 버리는 이런 문자들을 사용자가 입력한 그대로 유지해서 출력해 주는 엘리먼트를 제공합니다.

바로 <pre> preformatted text 태그 입니다.

<pre>
  if(config.api && config.api.enabled) {
      var express = require('express');
  }
</pre>

제 코드의 아름다운 여백미가 돌아왔습니다. 와우~

---

이번 포스트에서는 HTML 에 내용을 입력하는 대표 엘리먼트인 <p> 태그와 관련 엘리먼트들에 대해 알아보았습니다.

태그	설명
<p>	단락을 정의합니다. 단락 앞뒤로 여백이 추가됩니다.
<br>	라인바꿈을 출력합니다.
<pre>	HTML 에 입력된 공백과 라인바꿈 내용을 그대로 출력해 줍니다.

긴글 읽어주셔서 감사합니다.