반응형
2. HTML의 요소(2)
3) 텍스트 요소
✔ 제목 <h1>~<h6>
<h1>~<h6> 요소는 6단계의 구획 제목을 나타낸다.
<html>
<body>
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>
</body>
</html>
<html>- 구획 단계는 <h1>이 가장 높고 <h6>>이 가장 낮음
- 글씨 크기를 위해 제목 태그를 사용하지 않을 것을 권장(CSS style 사용)
- 제목은 순차적으로 기입하는 것을 권장
- 웹 접근성을 위해 전체 페이지의 목적을 설명하는 <h1>은 페이지 당 하나를 권장
검색 엔진이 <h1>을 먼저 찾아 웹 페이지의 전체 내용을 아우르는 것을 인지.
✔ 본문 - <p>
<p> 요소는 하나의 문단을 나타낸다.
HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있다.
- 문단은 블록 레벨 요소이다. 닫는 태그 </p>
- 문장의 한 줄 높이가 여백으로 들어감
- 여백을 넣기 위해서 <p> tag 사용은 지양
lorem을 사용하면 긴 텍스트를 보여준다.
✔ 본문 - <br>
<br> 요소는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성한다.
- 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용
- HTML은 space,enter를 모두 무시하기 때문에 <br> 태그가 대신함
- 내용이 없는 빈 요소, 명시적 사용으로 <br/> 가능
- 여백을 늘리고 싶을 때
태그를 여러 번 사용하는 것이 아닌 CSS style을 활용 - 문단을 <br>로 나누는 것은 나쁜 사례이며 탐색하는 사용자에게도 문제가 됨
✔ 본문 - <blockquote>, <q>
- <blockquote> 인용 블록 요소
- 안쪽의 텍스트가 긴 인용문임을 나타냄.
- 앞쪽에 여백을 통해 구분 가능
- <blockquote> 안에 <p> 태그 넣기 가능
- <p> 태그 내에 <blockquote> 사용 시 자동으로 <p> 태그가 닫힘
- <q> 인라인 인용문 요소
- 둘러싼 텍스트가 짧은 인라인 인용문임을 나타냄
- 기본 스타일링으로 쌍따옴표("")를 붙여줌
- <blockquote>, <q>의 속성
- cite : 인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥록 혹은 출처 정보를 가리키는 용도
✔ 본문 - <pre>
pre 요소는 미리 서식을 지정한 텍스트를 나타내며 HTML에 작성한 내용을 그대로 표현 함.
<pre>
두다다다다다다다
두다다다다다다다
(∩`・ω・)
＿/_ミつ/￣￣￣/
＼/＿＿＿/
</pre>- 고정폭 글꼴을 사용해 렌더링 함(일반 글자와 모양이 다름)
- 요소 내 공백 문자를 그대로 유지함
고정폭 글꼴 : 글자 모양에 상관없이 여백이 일정한 것
✔ 본문 - <figure>
<figure> 요소는 독립적인 콘텐츠를 표현한다.
- <figcaption> 요소를 사용해 설명을 붙일 수 있음
- <figcaption>은 생략 가능함
- 뒤에 플로우 콘텐츠를 붙이거나 반대로 붙이는 것도 가능함
- 덩어리로 묶어줄 때 사용함
✔ 본문 - <hr>
<hr> 요소는 문단 레벨 요소에서 주제의 분리를 나타낸다.
- 빈 요소이다. 단독으로 사용
- 전역 특성을 포함함
- 이야기 장면 전환, 구획 내 주제 변경 등에 사용
✔ 본문 - <abbr>, <address>, <cite>, <bdo>
사용량은 많지않지만 알아두면 좋은 요소
- <abbr>
전역 속성 요소 <abbr title="약어의 원래 의미">약어</abbr>- asdfsd <address>
주소라는 의미를 담을 때 사용 - <cite>
인용의 출처를 나타낼 때 사용 <figure> <p>Hello World</p> <figcaption> <cite>First Code</cite> in here </figcaption> </figure>- <bdo>
글의 작성 방향을 바꿈 <p>기본 글꼴</p> <p><bdo dir="rtl">기본 글꼴<bdo></p>
- rtl : right to left
- ltr : left to right
✔ 포메팅 - <b>, <strong>
독자의 주의를 끌기 위한 용도로 사용한다.
- <b>
- 텍스트를 굵은 글씨체로 강조
- <b>를 사용해 텍스트를 꾸미면 안됨
- 중요성을 가지고 있진 않지만 굵게 표시할 부분에 사용
- <strong>
- 중대하거나 긴급한 콘텐츠를 나타냄
- 앞, 뒤 내용에 비해 중요한 경우 사용
중요하게 강조해서 읽어야하는 부분엔 <strong>, 아니면 <b>
✔ 포메팅 - <i>, <em>
- <i>
- 기울임꼴로 표시함
- 어떤 이유로 주위와 구분해야 하는 부분을 나타냄
- 기술 용어, 외국어 구절, 등장인물 등
- <em>
- 텍스트의 강세를 나타냄
- 요소를 중첩하면 더 큰 강세를 뜻함
✔ 포메팅 - <mark>, <small>, <sup>, <supb>
- <mark>
현재 맥락에 관련이 깊거나 중요한 것을 표시, 하이라이트 한 부분을 나타냄- 인용문 : 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분, 주시해야 할 필요가 있는 부분 표시
- 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용
<mark>는 연관성을 가진 부분을, <strong>은 중요도를 가진 부분을 나타낼 때 사용
- <small> : 덧붙임 글 요소
- 덧붙이는 글, 저작권과 법률 표기 등 작은 텍스트를 나타냄
- 기본 상태에서 자신의 콘텐츠를 한 사이즈 작은 글꼴로 표시함
- <sup> : 위 첨자 요소
- 활자 배치를 위 첨자로 해야하는 인라인 요소를 가짐
- 지수 표기, 서수 표기 등
- <sub> : 아래 첨자 요소
- 활자 배치를 아래 첨자로 해야하는 인라인 요소를 가짐
- 변수 표기, 화학식, 각주 표기 등
✔ <del>, <ins>, <code>, <kbd>
문서나 소스 코드의 변경점 추적 등에 사용할 수 있음
- <del>
제거된 텍스트의 범위를 나타냄 - <ins>
추가 된 텍스트의 범위를 나타냄 - <del>, <ins>의 속성
- cite : 회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 URI
- datetime : 변경이 발생한 일시. 유효한 날짜 문자열이여야 하며, 시간을 지정할 경우 역시 유효해야 함
- <code> : 인라인 코드 요소
짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시함- 여러 줄의 코드를 나타내려면 <code> 태그를 <pre>로 감싸는 것을 권장
- <kbd> : 키보드 입력 요소
키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냄- 고정폭 글꼴로 표시하지만, HTML 표준은 강제하지 않음
✔ a 태그와 하이퍼링크
<a> 요소(앵커)는 href 특성을 통해 다른 페이지로 가는 하이퍼링크를 만듦
<a href="link">link name</a>- <a> 요소 안의 콘텐츠는 목적지의 설명을 나타내야 함
- 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있음
- 방문하면 파란 링크에서 보라 링크로 변함 (방문 기록 삭제 시 다시 돌아옴)
- href 속성
- 링크는 HTTP 기반 URL일 필요는 없음
- 브라우저가 지원하는 URL스킴 사용 가능
- target 속성
- 링크한 URL을 표시할 위치
- 가능한 값은 브라우징 맥락으로 탭, 창, <iframe> 이름이나 특정 키워드
- _self : URL을 현재 브라우징 맥락에 표시(기본값)
- _blank : URL을 새로운 브라우징 맥락에 표시함. (새 탭)
✔ Entity(엔티티) : HTML에 특수 문자 포함
HTML에서 <,>," alc &은 특수 문자이다.(HTML 구문 자체 일부)
형식 : 앰퍼샌드(&) + 이름 + 세미콜론(;)
< : < // 보다 작은
> : > // 보다 큰
" : "
' : '
& : &
space : (none braking space)반응형
