Text Contents
🔘Entity
<, >, ", ', &, 같은 특수기호들은 &+이름 으로 써줘야 한다.
| 이름 | 모양 |
|---|---|
| lt; | < |
| gt; | > |
| nbsp; | 공백 |
| amp; | & |
| quot; | " |
mailto
🟠Heading Tag
제목을 표현할 수 있는 tag. <h1> ~ <h6>까지 존재한다.
🟡<p> tag
하나의 문단을 나타내는 태그, 시각적 매체에서 문단은 보통 블록 사이의 여백과 첫 줄의 들여쓰기로 구분하지만, 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이든 될 수 있다.
⚪<a> Tag
hyper link를 추가할 수 있도록 하는 tag. <a href="이동할 링크"></a>의 형태로 사용한다. 이동할 링크 부분에 mailto:emiail-adress를 하면 이메일을 작성할 수 있는 프로그램으로 연결되고, tel:phone-number를 하면 전화를 할 수 있는 프로그램으로 연결된다.
기본으로 현재 브라우저에 표시한다. 그러나 <a href="이동할 링크">< target = "_blank"/a>을 하면 새 탭으로 열린다.
- 절대경로 :현재 위치와 관계없이 절대경로로 이동
- 상대경로 :현재 위치에서 이동할 link를 입력
🟢quate Tag
인용 요소를 나타낼 때 사용하는 tag
- <blockquate> : 맨 앞에 여백이 생성된다.(p tag내에 사용 ❌) 긴 인용문을 나눠서 표현하고 싶을 때 사용한다.
- <q> : 따옴표가 자동으로 생성된다.
- cite 속성 -> 인용문의 출처, 정보를 가리킬 용도. 코드에만 보이고 웹사이트에서는 보이지 않는다.
🟣<pre> Tag
pre tag 내에 작성하는 코드는 그 모양이 그대로 유지된다.
🟤figure/figurecaption
figure tag로 하나의 내용을 감싸주고, figurecaption tag로 설명 부분을 감싸준다.
이미지 요소를 감싸주고 그에 대한 caption으로 사용할 수도 있다.
<figure>
<p> When the sharpest words wanna cut me down
I'm gonna send a flood, gonna drown 'em out
I am brave, I am bruised
I am who I'm meant to be, this is me
Look out 'cause here I come
And I'm marching on to the beat I drum
I'm not scared to be seen
I make no apologies, this is me </p>
<figurecaptioin>from This is me</figurecaption>
</figure>🔵Other Tags
- <hr> Tag : 가로줄을 표현해준다. <hr> 를 써주면 가로줄 하나가 생긴다.
- <abbr> Tag : 약어를 나타내준다. <abbr title = "World Wide Web">WWW</abbr>의 형태로 쓴다.
- <bdo> Tag : text를 반대방향으로 작성할 때 사용. <bdo dir= "rtl">반대로 작성할 내용 </bdo> 의 형태로 쓴다.
Sementic Tags(text formatting)
🔴<b>/<strong> Tags
글씨를 굵게 만들어 줘서 강조해준다. 특정 부분을 강조하는 것이지, 전체 부분을 강조하지 않는다.
🟡<i>/<em> Tags
글씨를 기울임꼴 로 나타내 강조해준다.
🔵Other Tags
- <mark> Tag : 글씨의 배경색을 노란색으로 칠해준다.
- <small> Tag : 덧붙이는 글이나, 저작권/법률 표기 시의 작은 text를 표현해준다.
- <sub>/<sup> Tag : 위 첨자 요소() / 아래 첨자 요소()
- <del> Tag : 취소선을 넣을 때 사용
- <insert> Tag : 밑줄을 칠 때 사용
- <code> Tag : 코드를 나타내고 싶을 때 사용. 코드 한 줄만 표현하기 때문에 &lit;pre>로 감싼 후 사용하면 여러 코드를 표현할 수 있음.
<time> Tag : 시간의 특정 지점 또는 구간을 나타냅니다. datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다.
<picture> 태그는 <img> 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용 src 속성 체크
