개발블로그
Published 2021. 1. 24. 14:14
HTML 인라인 텍스트 Front-End

<a>

= Anchor (외부로 보내기)

다른 페이지, 같은 페이지(#, 해시태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크 설정

같은 페이지 : href에서 목차와 문단끼리 링크 시킬때 문단에 고유 id를 설정해놓고 제목의 href에 앞에 #붙여서 아이디 링크

 

- download : 이 요소가 리소스 다운로드 하는 용도로 사용됨을 의미 (값 : 불린)

- href : 링크 URL (값 : URL => 생략가능)

- hreflang  : 링크 URL(페이지) 언어(ISO 639-1) (값 : ko, en ...)

- rel : 현재 문서와 링크 URL의 관계(Link Types) (값 : license, prev, next ...)

- target : 링크 URL의 표시(브라우저 탭)위치 (값 : _self(기본값), _blank ...)

- type : 링크 URL의 MIME 타입 (값 : text/html ...)

 

 

<abbr>

= Abbreviation = 약어

약어를 지정. 보통 title 속성(전역속성)을 사용해 전체 글자나 설명 제공

 

- 해당 단어에 마우스 커서 갖다 대면 약어가 나옴

 

<b>

= Bring Attention

문체가 다른 글자 범위 지정

 

- 특별한 의미 없음

- 읽기 흐름에 도움 주는 용도로 사용

- 다른 태그가 적합하지 않는 경우 마지막 수단으로 사용

- 기본적으로 글자가 두껍게(Bold) 표시 됨(요즘은 CSS로 사용)

 

<mark>

사용자 관심을 끌기 위해 하이라이팅 할 때 사용(시각적 효과)

 

- 기본적으로 형광펜 사용한 것처럼 글자 배경이 노란색으로 표시됨.

 

<em>

= Emphasis

단순한 의미 강조 표시

 

- 중첩 가능

- 중첩될수록 강조 의미가 강해짐

- 정보통신보조기기 등에서 구두 강조로 발음됨

- 기본적으로 이탤릭체로 표시됨

 

<strong>

의미의 중요성 나타내기 위해 사용 (강조 =/= 중요도)

 

- 기본적으로 글자가 두껍게(Bold) 표시됨

 

<i>

<em>, <strong>, <mark>, <cite>, <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용 (<b>랑 비슷)

평범한 글자와 구분(아이콘이나 특수기호)하기 위해 사용

 

- 기본적으로 이탤릭체로 표시됨

 

<dfn>

= Definition

용어 정의할 때 사용

 

<cite>

창작물에 대한 참조 설정

 

- 기본적으로 이탤릭체로 표시됨

 

<q>

= Inline Quotation

짧은 인용문 설정

 

- 인용문이 길면 <blockquote>를 사용

- cite라는 속성 사용해서 인용된 정보 URL 설정 가능

 

<u>

= Underline

밑줄이 있는 글자 설정

 

- 순수하게 꾸미는 용도로 사용

- <a>와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의(링크와 헷갈릴 수 있음)

- <span style="text-decoration : underline;">을 활용할 수 있을 경우에는 사용 권장하지 않음

 

<code>

컴퓨터 코드 범위 설정

 

- 기본적으로 고정폭(Monospace) 글꼴 계열로 표시됨.

 

<kbd>

= keyboard Input

텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위 설정

 

<sup>, <sub>

= Superscripted text, Subscript text

위 첨자(sup)와 아래 첨자(sub) 설정 (위첨자 : 지수같은거, 아래 첨자: 로그 밑 같은거)

 

<time>

날짜와 시간 나타내기 위한 목적으로 사용

- datetime : 유효한 날짜 문자(=정확한 시간) (값: Date) -> YYYY-MM-DD 형태

- IE 지원 불가

 

<span>

본질적으로 아무것도 나타내지 않는 콘텐츠 영역 설정

 

- div 태그(블록요소)와 유사. 의미가 없다

- div 태그는 블록요소기 때문에 한 줄에 하나씩만 표시하나 span은 인라인 요소라 중간 부분을 딱 집어낼 수 있음

 

<br />

= 빈 태그

줄바꿈 설정

 

- 여러 개의 br태그는 추천하지 않음

 

<del>

삭제된(변경된) 텍스트 범위 지정

 

- cite : 변경을 설명하는 리소스의 URI (값:URI)

- datetime : 변경이 일어난 유효한 날짜 문자 (값:Date)

 

<ins>

새로 추가된(변경된) 텍스트 범위 지정

 

- cite : 변경을 설명하는 리소스의 URI (값:URI)

- datetime : 변경이 일어난 유효한 날짜 문자 (값:Date)

'Front-End' 카테고리의 다른 글

HTML 표 컨텐츠  (0) 2021.02.19
HTML 멀티 미디어  (0) 2021.01.26
HTML 콘텐츠 구분 / 문자 콘텐츠  (0) 2021.01.22
HTML 태그  (0) 2021.01.20
HTML / 개요, 요소 - 주요범위 & 메타데이터  (0) 2021.01.03
profile

개발블로그

@ORIONPOINT

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그