HTML 코드가 해석될 때
웹 브라우저는 HTML 코드를 해석해 그 결과를 바탕으로 화면을 표시합니다. HTML 코드의 태그 사이사이에는 콘텐츠로 텍스트가 포함되곤 하는데, 웹 브라우저가 HTML 코드에 포함된 텍스트를 해석할 때는 다음과 같은 사항들이 적용됩니다.
- 엔터를 이용한 개행(줄바꿈)은 공백으로 처리된다.
- 스페이스를 이용한 공백이 연달아 작성된 경우 한 번만 인정한다.
위 사항들을 이해하고 활용하면 가독성이 보다 뛰어난 코드를 작성할 수 있게 됩니다.
HTML 코드와 개행
HTML 코드에서, 엔터를 이용한 개행(줄바꿈)은 웹 화면에 표시될 텍스트 콘텐츠에 별다른 영향을 주지 못 합니다. HTML 코드 상에서 엔터를 여러 번 입력해도 결과 상에서 개행은 이루어지지 않으며, 그 대신 해당 위치에 공백(SPACE) 하나만이 추가되는 것을 확인할 수 있습니다. 실제로 아래 코드에 작성된 두 개의 <p> 태그는 결과물이 거의 같습니다.
<body>
<p>구워먹고 볶아먹는 참 좋은 표고버섯, 나오셔서 구경하세요.</p>
<p>구워먹고 볶아먹는 참 좋은 표고
버섯, 나오셔서
구경하세요.</p>
</body>
두 번째 <p> 태그 요소의 '표고'와 '버섯' 사이에 공백이 추가된 것만이 결과 상의 유일한 차이입니다.
HTML 코드의 이러한 특징 때문에, 웹페이지 텍스트에 실제로 개행을 추가하기 위해서는 HTML의 <br> 태그를 주로 사용합니다. <br> 태그는 엔터 키를 대신해 개행을 표시할 수 있는 단일 태그이며, 이를 이용하면 원하는 만큼 개행을 표시할 수 있습니다. 다음은 <br> 태그를 사용한 텍스트와 사용하지 않은 텍스트를 비교하기 위해 작성한 코드입니다.
<body>
<p>
비가 오나 <br>
눈이 오나 <br>
바람이 부나
</p>
<p>
비가 오나
눈이 오나
바람이 부나
</p>
</body>
HTML 코드와 공백
HTML 코드에 스페이스 키를 이용한 공백이 연달아 입력된 경우, 웹 브라우저는 이 중 한 번만 유효한 공백으로 해석하고 나머지는 모두 무시합니다. 아래 코드의 두 <p> 태그는 웹 브라우저 화면에 같은 결과를 나타냅니다.
<body>
<h1>어떤 차이가 있을까요</h1>
<p>내가 너의 곁에 잠시 살았다는 걸</p>
<p>내가 너의 곁에 잠시 살았다는 걸</p>
</body>
따라서 화면 상에 연속적으로 공백을 표시하고자 할 때는 스페이스 입력이 아닌 다른 방법을 사용해야 하는데, 이때 사용하는 것이 바로 '엔티티 코드'입니다. 엔티티 코드란 기호 '&'로 시작해서 기호 ';'로 끝나는 문자의 조합을 말하는 것으로 HTML 코드 내에서 다양한 특수 문자를 나타내기 위해 사용하는 일종의 약속입니다. 엔티티 코드를 이용하면 키보드의 표준 입력 키만으로도 웹 화면에 다양한 특수 문자를 표현할 수 있어 무척 유용합니다.
공백을 나타내는 엔티티 코드는 입니다. 이를 이용하면 원하는 만큼의 공백을 연달아 표시할 수 있습니다.
<body>
<h1>어떤 차이가 있을까요</h1>
<p>내가 너의 곁에 잠시 살았다는 걸</p>
<p>내가 너의 곁에 잠시 살았다는 걸</p>
</body>
물론 공백을 나타내는 외에도 엔티티 코드의 종류는 무척 다양합니다. 아래 표는 주요 엔티티 코드 몇 가지를 정리한 것입니다.
있는 그대로 표시하기
HTML 코드에서 개행이나 공백을 표시하기 위해 사용하는 별도의 방법 외에도, 코드에 작성된 형태 그대로를 화면에 표시하는 또 다른 방법이 존재합니다. <pre> 태그는 태그 안에 작성된 텍스트를 HTML 코드에 작성된 그대로 화면에 표시하는 태그로써, 개행이나 공백 등도 모두 코드에 쓰여진 그대로 표시합니다. 이 태그는 웹 브라우저 화면에 소스 코드를 표현할 때 특히 유용한 태그입니다.
<body>
<h2>이름을 출력하는 파이썬 코드</h2>
<pre>
my_name = "강윤호"
print( my_name )
</pre>
<p>개행과 공백을 모두 있는 그대로 출력해요</p>
</body>
작성된 그대로를 보여주는 것은 때때로 무척 편리한 기능이지만, <pre> 태그는 꼭 필요한 상황이 아니라면 자주 사용하지 않는 것이 좋습니다. <pre> 태그는 눈으로 볼 때는 무척 편리할 수 있지만, 시력이 낮은 사람들이 이용하는 스크린 리더와 같은 소프트웨어에서는 올바르게 읽히지 않는 경우가 많기 때문입니다.