2017. 10. 6. 11:21ㆍ웹 표준 퍼블리싱 바이블
1. 특수문자 삽입의 올바른 방법
XHTML에서는 <, >, & 등의 기호를 텍스트에 사용하면 문자데이터가 아니라 XHTML 특유의 기호로 인식합니다. 그래서 XHTML상의 기호나 키보드로 직접 입력이 어려운 문자를 표시하기 위해 "문자참조(Charactor References)"를 사용하며, HTML5에서도 기호의 표현은 이 문자참조의 방법을 사용하는 것이 좋습니다. 이러한 특수문자의 조합을 "Entitu code"라고 하며, 보통 &으로 시작해서 ;로 끝나게 됩니다. 문자실체 참조와 수치문자 참조 2방법이 있으며, 어떤 것을 사용해도 되지만, XML에서는 수치문자 참조 방법을 사용하는 것이 좋습니다.
|
기호 |
내용 |
문자실체 참조 |
수치문자 참조 |
|
< |
보다 작은 |
< |
< |
|
> |
보다 큼 |
> |
> |
|
& |
Ampersand |
& |
& |
|
ⓒ |
Copyright |
© |
© |
2. 텍스트를 정의하는 인라인 요소들
글을 쓰는 것은 독자에게 전달하고자 하는 바가 있기 때문입니다. 그렇다면 글을 마크업하는 것은 드 독자가 컴퓨터이기 때문이고, 제대로 마크업된 텍스트는 그만큼 컴퓨터의 형제들(각종 디바이스)이 이해하기 쉽게 하며, 결국에는 인지 감각이 부족한 인간에게도 좀 더 정확한 의미 전달이 가능하게 합니다.
2-1) 구문을 강조하거나 하이라이팅 지정하기
- strong과 em요소
구문을 강조하는 방법으로 <strong(strong importance)>과 <em(emphasis)>을 적용할 수 있습니다.
- 예제 소스코드
|
<!DOCTYPE html>
|
- 실행결과
예제에서와 같이 <strong>은 해당 구문의 중요함을 나타내고, <em>은 해당구문을 강조하는 것인데 주관적인 경우에 적용합니다. 두 요소는 중첩해서 사용할 수도 있으며 이 경우 좀 더 강한 강조가 가능합니다.
주의할 점은 단순히 두꺼운 텍스트를 원한다면 <strong>대신 <b>요소, 기우얼진 텍스트는 <em>대신 <i>요소를 활용해야 한다는 점입니다.
- mark요소
구문을 하이라이팅하는 방법으로 <mark(marked or gihtlighted text)>요소를 활용할 수 있습니다.
- 예제 소스코드
|
<p>옵티컬아트는 굳이 번역한다면 <strong>광학적 미술</strong>이라고 할 수 있는데, <mark>광학적</mark>이란 망막에 접수된 자극이 시신경에 의해 지각되어진다는 것을 의미한다.</p>
|
- 예제 실행결과
<mark> 요소를 사용하는 것은 본문 어딘가에 이에 대한 내용을 다루고 있다는 것을 암시합니다. <mark>는 메인 컨텐츠와 관련이 있는 텍스트를 부각시키기 위한 요소입니다.
2-2) 단어의 정의를 나타내거나 약어를 표현하는 방법
- abbr요소
약어 또는 두문자어를 나타내는데, 'title' 속성으로 약어의 원형을 나타낼 수 있습니다.
- 예제 소스코드
|
<p><abbr title="HyperTextMarkup Language">HTML</abbr>은 제목, 단학, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것 뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.</p>
|
- 예제 실행결과
3. 시간을 표현하는 time요소
html5에서는 "날짜와 시간을 표현하는 명시적인:방법으로 <time>요소를 적용할 수 있습니다. 이 요소는 우리가 표현할 수 있는 다양한 날짜와 시간의 표현을 기계가 이해할 수 있는 형태로 코딩하기 위해 만들어 졌습니다.
"날짜(2017년 10월 06일)"의 표현은 "0000-00-00"의 형식으로, "시간(12시 00분 00초)"의 표현은 "00:00:00"의 형식으로, 연결된 "일-시"표현은 "0000-00-00T00:00:00"의 형식으로 작성합니다. Global형식으로 작성하는 경우에는 "세계 표준시(UTC)"를 추가로 적용하며, "0000-00-00ㅆ00:00:00+09:00"의 형식이 됩니다. 이때, "+09:00"의 타임 존은 우리나라와 일본에서 적용하는 값입니다.
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 3-5. HTML5 섹셔닝 요소들의 활용 (0) | 2017.10.08 |
|---|---|
| 3-4. Div 요소로 작성하는 문서의 그룹화 방법 (0) | 2017.10.08 |
| 3-2. 블록/인라인 레벨 요소 및 컨텐츠 분류 (0) | 2017.09.25 |
| 3-1. HTML 문서의 구조 (0) | 2017.09.13 |
| 2-4. HTML5의 등장 (0) | 2017.09.13 |