1. <blockquote> ~ </blockquote>: 긴 인용문
다른 출처로부터 인용된 블록을 정의할 때 사용합니다. 긴 인용문, 요약문, 설명 등에 적합합니다.
단락 전체가 들여 쓰기가 된다는 특징이 있습니다.
이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
2. <pre> ~ </pre>: 공백이나 줄 바꿈 그대로 적용
<pre> 태그는 미리 정의된 형식(performatted)의 텍스트를 정의할 때 사용합니다. 또한 요소 내 텍스트는 시스템에서 미리 지정된 고정폭 글꼴(fixed-width font)을 사용합니다.
HTML 문서에서 공백은 아무리 연속으로 많이 입력해도 한 칸으로만 인식합니다. 그래서 공백을 추가하기 위해서는 entity code의 로 표기하여 공백을 표시하는 방법이 있습니다. 하지만, 공백이 많으면 일일이 태그를 다 입력해야 합니다. 이를 해결하기 위해서 <pre> 태그를 이용하면 됩니다. 태그 안에서는 줄 바꿈이나 코드상에서의 공백을 그대로 결과로 보여줄 수 있어, 미리 서식을 적용한 텍스트를 표현할 수 있습니다.
이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
이처럼 <pre> 요소를 이용하면, 독특한 서식의 텍스트와 컴퓨터 코드 등을 HTML 문서에 그대로 표현이 가능합니다.
+ Entity Code
HTML에는 미리 예약된 문자가 몇 가지 있습니다. 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다.
꺽쇠괄호 < >처럼 태그 지정을 할 때 쓰는 기호 등 일부 문자는 특별한 기능이 있습니다. 하지만, 이런 문자를 일반 문자처럼 표현해야 하는 경우도 있는데 이럴 때 Entity를 사용합니다. 또한, 공백이 많이 필요할 때 Entity를 활용하면 원하는 만큼의 공백을 지정할 수 있습니다. Entity의 이름은 대소문자를 구분하며 정확하게 입력해야 합니다.
| 엔티티 문자 | 엔티티 이름 | 16진수 엔티티 숫자 | 설명 |
| |  % | 줄 바꿈 없는 공백 | |
| < | < | <% | 보다 작다 |
| > | > | > | 보다 크다 |
| & | & | & | AND 기호(앰퍼선드) |
| " | " | " | 큰따옴표(인용부호) |
| ' | ' | ' | 작은따옴표(어퍼스트로피) |
더 많은 Entity 정보를 확인하고 싶다면, W3C 공식 사이트를 방문해서 확인 가능합니다.
https://www.w3.org/TR/html4/sgml/entities.html
3. <address> ~ </address>: 주소, 연락처, 정보 등
<address> 태그는 문서나 글의 저자, 회사와 연락할 수 있는 정보 등을 명시할 때 사용합니다.
<body> 요소 내 존재하는 <address> 요소는 해당 문서의 연락 정보를 나타냅니다.
이러한 <address> 요소의 텍스트는 italic(기울게)로 표현됩니다.
이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
'HTML, CSS' 카테고리의 다른 글
| [HTML] 링크 태그 - <a>와 href 속성 (2) | 2024.01.21 |
|---|---|
| [HTML] 이미지 태그 - <img>, 경로, <figure>, <figcaption> (0) | 2024.01.20 |
| [HTML] inline 요소 텍스트 (0) | 2024.01.20 |
| [HTML] block 요소 텍스트(1) - <h#>, <p>, <br>, <hr> (2) | 2024.01.18 |
| [HTML] 기본 구조 - <html>, <head>, <body>, 주석, block과 inline (1) | 2024.01.18 |
