CH4. 텍스트 요소
1) 제목 - h1 ~ h6 (heading level)
사용일람(웹 접근성을 위한 권장)
- 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표(목차)를 만드는 등의 작업 수행 가능
- 제목 단계를 건너뛰는 것을 피하라
(목차를 만들기 위해서는 제목태그가 일관된 순서로 존재해야 하는데 단계를 건너뛴다면 작업 수행이 어려워지기 때문)- 페이지 당 하나의
<h1>만 사용- h 태그에는 제목에 해당하는 내용만 작성
2) 본문 - p (paragraph)
- 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이든 될 수 있음
- 블록 레벨 요소
<p>태그와<p>사이에는 한 문장 만큼 띄어짐- ⚠
<p>내에는 block요소를 사용하면 안 됨 !
(안의 블록 요소가 열리기 전, p가 자동으로 닫힘)
접근성 고려사항
- 콘텐츠를 문단으로 나누어 접근성을 향상시킬 수 있음
- 빈
<p>요소를 사용해 문단 사이에 여백을 추가하지 말 것
3) 본문 - br (line-break)
- 줄 바꿈 요소 (텍스트를 끊고 싶은 지점에 삽입)
- 빈 요소
접근성 고려사항
- 문단 구분을
<br>로 하는건 나쁜 사례<p>요소로 감싼 후 CSS의 margin 속성으로 여백의 크기를 조절
4) 본문 - blockquote, q (인용을 위한 요소)
blockquote : 인용 블록 요소
- 안쪽의 텍스트가 긴 인용문
- 들여쓰기 한 모양새
<body>
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
<!-- p 태그를 넣은 문단이 인용구가 됨 -->
</blockquote>
<figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</body>- 인용문의 출처 URL : cite 특성
(속성이기 때문에 사용자에게는 보이지 않음) - 출처 텍스트 :
<cite>요소
5) q : 인용 인라인 요소
- 둘러싼 텍스트가 짧은 인라인 인용문
(줄 바꿈이 없는 짧은 경우에 적합) - 기본적으로 쌍따옴표로 둘러싸임
<p>When Dave asks HAL to open the pod bay door, HAL answers:
<q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">
I'm sorry, Dave. I'm afraid I can't do that.
</q>
</p>인용 요소 주의사항
- blockquote 안에는 p태그를 작성해도 괜찮지만, p태그 안에 blockquote를 작성해서는 안 됨
- q태그로 둘러싸인 짧은 문장이 인용구가 되기 때문에, p태그 내부에 작성해도 무방함
6) 본문 - pre (preformatted)
- 미리 서식을 지정한 텍스트
- HTML에 작성한 내용 그대로 표현
- 고정폭 글꼴을 사용
(요소 내 공백문자를 그대로 유지) - pre 태그 안의 항목은 하나의 이미지로 볼 수 있음
7) 본문 - figure, figcaption
figure
- 독립적인 콘텐츠를 표현
(하나의 요소로 볼 수 있음) - 이미지, 삽화, 도표, 코드 조각 등
figcaption
- 요소가 포함하는 콘텐츠 설명
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>8) 본문 - hr (horizon)
- 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리
- 가로줄을 그리고 싶다면 적절한 CSS를 사용
9) 본문 - abbr, address, cite, bdo
abbr
-
준말 또는 머리글자
-
title 속성 : 준말의 전체 뜻이나 설명을 제공할 수 있음
(title은 전역 속성이기 때문에 다른 요소에도 사용할 수 있음)
-
마우스를 올려두면 약어의 설명이 보임
<p>You can use
<abbr title="Cascading Style Sheets">CSS</abbr>
to style your <abbr title="HyperText Markup Language">HTML</abbr>
</p>address
MDN-address
- 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보
- 이텔릭체가 기본
<p>Contact the author of this page:</p>
<address>
<a href="mailto:jim@rock.com">jim@rock.com</a><br>
<a href="tel:+13115552368">(311) 555-2368</a>
</address>cite
-
저작물의 출처를 표기할 때 사용
(제목을 반드시 포함)
<p>More information can be found in <cite>[ISO-0000]</cite>.</p>bdo
MDN-bdo
-
현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용
-
텍스트 쓰기 방향 : dir 속성
(ltr : left to right, rtl: right to left)
<!-- 쓰기 방향 바꾸기 -->
<p>이 글은 왼쪽에서 오른쪽으로 작성합니다.</p>
<p><bdo dir="rtl">이 글은 오른쪽에서 왼쪽으로 작성합니다.</bdo></p>10) 포매팅 - b, strong
b
- 굵은 글씨 요소
- 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분
strong
- 높은 중요도 요소
11) 포매팅 - i, em
i
- 주위와 구분해야 하는 부분
em
- 텍스트의 강세
12) 포매팅 - mark, small, sub, sup
mark
<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other small creatures.</p>- 하이라이트한 부분
- 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 느낌
small
- 덧붙임 글 요소
- 저작권과 법률 표기 등의 작은 텍스트
sub
- 아래 첨자 요소
- 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트에 사용
sup
- 위 첨자 요소
- 활자 배치를 위 첨자로 해야 하는 인라인 텍스트에 사용
13) 포매팅 - del, ins, code, kbd
del
- 문서에서 제거된 텍스트의 범위
- 가운데 줄
ins
- 문서에 추가된 텍스트의 범위
code
- 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시
- 여러 줄의 코드를 나타내려면
<code>요소를<pre>로 감싸서 사용
보통 상황에서<code>는 코드 한 줄만 나타냄
kbd
- 키보드 입력 요소
- 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력
- code와 결과물은 같음
a태그와 하이퍼링크
- href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듦
- 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있음
- 절대경로, 상대경로 상관 없음
tel:URL을 사용하는 전화번호mailto:URL을 사용하는 이메일 주소- 링크한 URL을 표시할 위치 : target 속성
엔티티(Entity)
&:&
<:<
>:&rt;
":"
(space):
블로그 이사했어요 https://ktmihs.tistory.com/