이번 포스팅에서는 HTML의 텍스트 요소에 대하여 공부를 해보고자 한다.
제목 (Heading)
HTML은 제목을 표현할 수 있는 다양한 크기의 <h> 태그를 제공한다.
가장 큰 <h1> 태그부터 가장 작은 <h6> 태그까지 다양한 크기로 제목을 표현할 수 있다.
<h> 태그의 위아래로는 약간의 여백이 자동으로 삽입된다.
여러 검색엔진은 각 웹 사이트의 내용을 <h> 태그를 이용하여 키워드를 수집하고, 그 내용을 파악한다.
따라서 HTML 문서에 포함되는 제목은 <h> 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있다.
HTML 문서의 제목에 해당하는 부분을 <big> 태그나 <bold> 태그를 사용하면 안 된다.
단락(Paragraph)
단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 한다.
HTML에서는 <p> 태그를 이용하여 이러한 단락을 표현한다.
<p> 태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입된다.
띄어쓰기와 줄 나누기
<p> 태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현된다.
<br> 태그를 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있다.
<br> 태그는 종료 태그가 없는 빈 태그(empty tag)이다.
텍스트(text) 서식 미리 정의하기
HTML 코드에서 작성한 텍스트 서식을 그대로 표현하려면 <pre> 태그를 사용한다.
<pre> 태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현된다.
<pre> 태그 내에 작성된 텍스트의 글꼴(font)은 고정폭 글꼴(fixed-width font)로 자동 변환된다.
수평 가로 구분선
단락을 나눌 때나 내용상의 구분을 표현하고자 수평 가로 구분선을 사용할 때 <hr> 태그를 사용한다.
<hr> 태그는 종료 태그가 없는 빈 태그(empty tag)이다.
서식(Formatting)
HTML은 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)를 제공한다.
강조 효과
HTML 문서에서 텍스트를 굵게 표현하고 싶을 때에는 <b> 태그나 <strong> 태그를 사용한다.
<b> 태그는 단순히 화면의 텍스트를 굵게 표현하지만 <strong> 태그는 텍스트를 굵게 표현해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 준다.
HTML 문서에서 이탤릭체를 표현하고 싶을 때에는 <i> 태그나 <em> 태그를 사용한다.
<i> 태그는 단순히 화면의 텍스트를 이탤릭체로 표현하지만 <em> 태그는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해준다.
검색엔진은 <strong> 태그나 <em> 태그를 사용하여 강조된 텍스트를 더 중요하게 인식한다.
하이라이팅 효과
<mark> 태그는 텍스트에 하이라이팅(highlighting) 효과를 적용한다.
삭제 효과
<del> 태그는 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과를 낸다.
삽입 효과
<ins> 태그는 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 낸다.
위 첨자와 아래 첨자 효과
위 첨자는 <sup> 태그를 사용하여, 아래 첨자는 <sub> 태그를 사용하여 각각 표현한다.
인용구(Quotation)
HTML에서 인용구를 표현하는 방법은 두 가지로 나누어진다.
짧은 인용구
짧은 인용구는 <q> 태그를 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙는다.
블록 인용구
길이가 긴 인용문은 <blockquote> 태그를 사용한다.
<blockquote> 태그는 인용 부분을 별도의 단락으로 구분하여 나타낸다.
축약형 표현
HTML에서 용어의 축약형을 표현하기 위해서는 <abbr> 태그를 사용한다.
<abbr> 태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타난다.
주소 표현
<address> 태그를 사용하면 HTML에서 주소를 표현할 수 있다.
주소는 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입된다.
주석(Comment)
주석이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다.
주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현되지 않는다.
<!-- 주석 내용 -->
HTML 주석의 시작 태그(<!--)에는 느낌표(!)가 있지만 종료 태그(-->)에는 느낌표가 없다.
주석은 HTML 코드의 어느 부분에서라도 사용할 수 있고, 여러 줄에 걸쳐 주석을 작성해도 정확히 인식한다.
HTML 코드에 삽입된 주석을 읽고 싶다면, 웹 브라우저의 페이지 소스 보기 등을 통해서 확인할 수 있다.
중첩 주석
HTML 주석 안에 또 다른 주석을 작성할 수 없다.
HTML 주석 안에 또 다른 주석을 삽입하면, 삽입한 주석의 종료 태그(-->)를 첫 번째 주석이 자신의 종료 태그로 인식한다.
따라서 삽입한 주석의 종료 태그 다음부터 첫 번째 주석의 종료 태그까지의 모든 내용이 그대로 웹 페이지에 노출된다.
그러므로 HTML 주석은 절대로 중첩해서 사용하면 안 된다.
엔티티(Entity)
HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부른다.
HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석한다.
따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 한다.
엔티티의 형태
&엔티티 이름; 또는 &#엔티티 숫자;
엔티티(entity)의 이름은 대소문자를 구분한다.
문자셋(Character set)
웹 브라우저가 HTML 문서를 정확하게 나타내기 위해서는 해당 문서가 어떠한 문자셋으로 저장되었는지를 알아야 한다.
HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head> 태그 내의 <meta> 태그에 명시한다.
HTML4에서 UTF-8의 경우: <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
HTML5에서 UTF-8의 경우: <meta charset="UTF-8">
문자셋의 종류
- ASCII: 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있다.
- ANSI: 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원한다.
- ISO-8859-1: 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋이다.
- UTF-8: 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋이다.
'Front-End > HTML & CSS' 카테고리의 다른 글
| [Front-End] HTML 입력 양식 (0) | 2022.10.20 |
|---|---|
| [Front-End] HTML 공간 분할 (0) | 2022.10.19 |
| [Front-End] HTML 기본 요소(2) (0) | 2022.10.19 |
| [Front-End] HTML 기본 요소(1) (0) | 2022.10.19 |
| [Front-End] HTML 개요 (0) | 2022.10.18 |