💻 인라인 텍스트
💡 < a >
다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정.
| 속성 | 의미 | 값 | 기본값 | 특징 |
|---|---|---|---|---|
| download | 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 | boolean | ||
| href | 링크 url | URL | 생략가능 (아직안정해졌을때는 '#' 이용) | |
| rel | 현재 문서와 링크 URL의 관계 | license, prev, next… | ||
| target | 링크 URL의 표시(브라우저 탭) 위치 | _self, _blank | _self | self -> 현재탭에서 열림 blank -> 새 탭에서 열림 |
| type | 링크 URL의 MIME 타입 | text/html… |
a{ display : inline; }<a 태그 예시>
<a href="http://www.tcpschool.com/html-tags/a" target = '_blank'></a> 👇 위 코드의 결과💡 < abbr >
약어를 지정.
- 보통 title 속성을 사용하여 전체 글자나 설명을 제공
abbr { display: inline; } <abbr 태그 예시>
Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!💡 < b >
문체가 다른 글자의 범위를 설정.
- 특별한 의미를 가지지 않음.
- 읽기 흐름에 도움을 주는 용도로 사용.
- 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용.
- 기본적으로 글자가 두껍게(Bold) 표시됨.
b { display : inline; }💡 < mark >
사용자의 관심을 끌기 위해 하이라이팅할 때 사용.
- 기본적으로 형광펜을 사용한 것처럼 글자 배경이 노란색(Yellow)으로 표시됨.
mark { display : inline; }💡 < em >
단순한 의미 강조를 표시.
- 중첩이 가능.
- 중첩될수록 강조 의미가 강해짐.
- 정보통신보조기기 등에서 구두 강조로 발음됨.
- 기본적으로 이탤릭체(Italic type)로 표시됨.
em { display : inline; } 💡 < strong >
의미의 중요성을 나타내기 위해 사용.
- 기본적으로 글자가 두껍게(Bold) 표시됨.
strong { display : inline; }💡 < i >
< em >, < strong > < mark > < cite > < dfn > 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용.
- 평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용.
- fontawsome 사이트를 통해 아이콘 사용 가능!
i { display : inline; }💡 < dfn >
용어를 정의할 때 사용.
dfn { display : inline; }💡 < cite >
창작물에 대한 참조를 설정.
(책, 논문, 영화, TV 프로그램, 노래, 게임 등의 제목)
cite { display : block; }<cite 태그 예>
<cite>League of Legends</cite> by Riot.💡 < q >
짦은 인용문을 설정.
- 긴 인용문을 설정할 경우 < blockquote >를 사용.
| 속성 | 의미 | 값 |
|---|---|---|
| cite | 인용된 정보의 url | URL |
q { display : inline; }💡 < u >
밑줄이 있는 글자를 설정.
- 순수하게 꾸미는 용도의 요소로 사용.
- < a >와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의.
- < span style="text-decoration: underline;" >을 활용할 수 있을 경우에는 사용을 권장하지 않음.
u { display : inline; }💡 < code >
컴퓨터 코드 범위를 설정.
code{ display : inline };< code 태그 예 >
<code>document.getElementById('id-value')</code> 👇 결과
document.getElementById('id-value')
💡 < kbd >
텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 설정.
kbd{ display:block; }< kbd 태그 예 >
<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>S</kbd></p> 👇 결과
Ctrl + Alt + S
💡 < sup >, < sub >
위 첨자(< sup >)와 아래 첨자(< sub >를 설정.
sup, sub { display:block; }< sup, sub 태그 예>
X<sup>2</sup> + Y<sup>2</sup>, CO<sub>2</sub>👇 결과
X2 + Y2, CO2
💡 < time >
날짜나 시간을 나타내기 위한 목적으로 사용.
| 속성 | 의미 | 값 |
|---|---|---|
| datetime | 유효한 날짜 문자 | date |
time{ display : inline; }< time 태그 예>
<time datetime="2022-04-17">April 17</time>💡 < span >
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정.
- block 요소는 < div >, inline 요소는 < span > 태그 사용
span { display : block; }💡 < br />
줄바꿈을 설정
br { display : inline; }💻 수정
💡 < del >
삭제된(변경된) 텍스트의 범위를 지정.
| 속성 | 의미 | 값 |
|---|---|---|
| cite | 변경을 설명하는 리소스의 url | URL |
| datetime | 변경이 일어난 유효한 날짜 문자 | Date |
del { display : inline; }💡 < ins >
새로 추가된(변경된) 텍스트의 범위를 지정.
| 속성 | 의미 | 값 |
|---|---|---|
| cite | 변경을 설명하는 리소스의 url | URL |
| datetime | 변경이 일어난 유효한 날짜 문자 | Date |
ins { display: inline; }참고자료
mozilla
tcp school
