프론트엔드 학습 일지 - [4. 텍스트 요소]

이준호·2022년 11월 9일
0

[ 텍스트 요소 ]

[제목]

<h1>-<h6>(heading): 문단 제목(제목만 작성), 목차만들 때 사용.
웹브라우저가 h태그를 수집하므로 검색결과 노출에 유리하다.

[본문]

<p>(paragraph)
문단을 나눌 때 사용되는 태그.
콘텐츠를 문단으로 나누면 페이지의 접근성을 높인다.

Lorem : 임의 문장 생성

<br> : 줄바꿈. (빈 요소)

  • 빈 요소 : 닫힘 태그가 존재하지 않는 태그

<blockquote> : 긴 글의 인용문(블록레벨). <p>내에 사용 금지.

<q> 짧은 글의 인용문(인라인레벨).
결과물에서 따옴표 자동 생성

<pre>(preformatted) : 있는 그대로의 결과 생성(스페이스, 엔터 인식), 고정폭 글꼴 사용.

<figure> : 독립적 콘텐츠 표현. <figcaption>으로 설명 덧붙일 수 있음.
자동 들여쓰기. 연관성있는 내용일 때 이 태그로 감쌈.

<hr> : (빈 요소) 대부분 문단과 문단 사이 나눌 때 사용.

<abbr title=“(원래문장)”> : 약어(줄임말)의 원래 의미. 웹페이지에 해당텍스트에 커서를 올릴 시 원래의미가 나타남.

<address> : 주소임을 나타냄. 서식 자동 지정.

<cite> : 인용의 출처. 태그 내(ex)<blockquote cite=“(링크 주소)”>)에도 이용 가능. 이 때는 화면 표시 X
서식 자동 지정.

<bdo> (bidirectional override) : 글쓰기를 양방향으로 전환 가능.
ex) <bdo dir=“rtl”>오른쪽에서 왼쪽으로</bdo>. (rtl : right to left)
       -->오른쪽에서 왼쪽으로

[포매팅]

<b> : bold 중요하지 않지만 굵게 표시할 때

<strong> 높은 중요도. 스크린 리더 사용 시 강조해서 읽기 됨.

<I> : 주위와 구분돼야하는 부분.(ex)고유 명사(Iron Man 등), 외국어) 기울임체

<em>emphasize 특정 단어 (약간)강조. 기울임체

<mark> : 하이라이팅. 특별히 중요하진 않으나 주시해야 할 부분.

<small> : 덧붙임 글 요소, 또는 저작권, 법률 표기 등.

<sup> : 위 첨자 요소(숫자에 지수 표기 시)

<sub> : 아래 첨자 (화학식, 각주, 변수)

<del> : 제거된 텍스트 범위(취소선)
전역특성 포함 : cite / date time - 변경 발생한 일시

<ins> : 추가된 텍스트 범위(밑줄)

<code> : <pre>의 인라인 형태. 문장에 코드 단어 넣을 때.
여러줄 코드 나타낼 시 <code>요소를 <pre>로 감쌀 것.

<kbd> : 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력. 고정폭 글꼴.

<a> (anchor) : 하이퍼링크 생성
속성 - href (hypertext reference) : 링크(목적지) 설정
사용ex) <a href="https://www.mozilla.com">mozilla</a>
절대경로 : 현재 위치 상관 없이 무조건 해당 주소값의 위치로 이동( ex) “https://www.mozilla.com” )
상대경로 : 현 위치와 관련 있음. ( ex) “a.html” )
다른 링크도 가능(전화, 이메일 등)

target : (속성)링크한 URL 표시할 위치.

[엔티티]

특수문자를 화면에 출력.

&nbsp : (none breaking spacing) 공백문자 출력.
&quot : “
&apos : ‘
&amp : &

( 추천 검색어) W3c entity )

profile
저의 개발일지를 담은 블로그입니다.

0개의 댓글