HEROPY Tech 블로그 참고.
🔗<A>
▪다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는
하이퍼 링크를 설정 (Anchor, 외부로 내보내기)
| 속성 | 의미 | 값 | 기본값 | 특징 |
| download | 리소스를 다운로드 하는 용도로 사용됨을 의미 | 불린(Boolean) | ||
| href | 링크 URL | URL | 생략가능 | |
| rel | 현재 문서와 링크 URL의 관계(Link Type) | license, prev, next, ... |
||
| target | 링크 URL의 표시(브라우저 탭) 위치 | _self, _blank | _self | |
| type | 링크 URL의 MIME 타입 | text/html ... |
<a href="https://google.com">Google</a>
<a href="https://google.com" target="_self">Google(현재탭)</a>
<a href="https://google.com" target="_blank">Google(새탭)</a>
<a href="./README.md" download="">리드미파일 다운로드</a>
<a href="./images/example.png">img</a>
<a href="./images/example.png" download="">img</a>
🔗<ABBR>
▪약어를 지정 title 속성을 사용하여 전체 글자나 설명을 제공
<abbr title="HyperText Markup Language">HTML</abbr>
🔗<B>
▪<b>태그는 글꼴의 특성이 다른 글자의 범위를 설정. (Bring Attention)
▪특별한 의미를 가지지 않음.
▪읽기 흐름에 도움을 주는 용도로 사용.
▪다른 태그가 적합하지 않은 경우 마지막 수단으로 사용.
▪기본적으로 글짜가 두껍게(Bold) 표시됨.
🔗<MARK>
▪<mark>태그는 사용자의 관심을 끌기 위해 하이라이팅할 때 사용된다.
(Mark Text, 형관펜을 사용하여 관심있는 부분을 표시하는 것과 같은 의미)
▪형광펜을 사용한 것처럼 글자 배경이 노란색으로 표시된다.
🔗<EM>
▪<em>태그는 의미를 강조할때 사용된다. (Emphasis)
▪중첩이 가능.
▪중첩될수록 강조 의미가 강해짐.
▪정보통신보조기기 등에서 구두 강조로 발음됨.
▪기본적으로 이탤릭체(Italic type)으로 표시됨.
<em>em태그는 <em>강조</em>를 하기 위해 사용된다.</em>
🔗<STRONG>
▪의미의 중요성을 나타내기 위해 사용. (Strong Importance)
▪기본적으로 글자가 두껍게(Bold) 처리됨.
🔗<I>
▪<i>태그는 <em>, <strong>, <mark>, <cite>, <dfn>등의 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용.
▪<b>태그와는 다르게 아이콘이나 특수기호 같은 문자를 위해 사용된다.
▪이탤릭체(Italic type)으로 표시된다.
🔗<DFN>
▪<dfn>태그는 용어를 정의할 때 사용(Definition)
▪<dl><dt><dd>는 용어와 그에 대한 설명을 나열할때 사용
<dfn>치킨</dfn>은 맛이 좋다.
🔗<CITE>
▪<cite>태그는 책, 논문, 영화, TV프로그램, 노래, 게임등의 제목을 작성할 때 쓴다.
<cite>리그오브레전드</cite>는 질병이다.
🔗<Q>
▪<q>태그는 짧은 인용물을 작성할 때 사용한다. (Inline Quotation)
▪긴 인용문을 설정할 경우 <blockquote>를 사용하자.
| 속성 | 의미 | 값 |
| cite | 인용된 정보의 URL | URL |
<p>Mozilla 재단의 웹사이트에 따르면,
<q cite="https://www.mozilla.org/en-US/about/history/details/">
Firefox 1.0 은 2004년 처음 공개되어 큰 성공을 거두었습니다.
</q>
</p>
🔗<U>
▪<u>태그는 글에 밑줄을 넣을 수 있다. (Underline)
▪순수하게 꾸미는 용도로 사용한다.
▪<a>와 헷갈릴 수 있는 위치에 사용하지 않도록 주의
▪<span style="text-decoration: underline;"> 을 활용 할 수 있는 경우에는 사용하지 말자.
<u>동해물과</u> <a href="https://google.com">백두산이</a> 마르고 닳도록
<span style="text-decoration: underline;">하느님이 보우하사</span> 우리나라 만세
🔗<CODE>
▪<code> 태그는 컴퓨터 코드 범위를 설정.
▪기본적으로 고정폭(Monospace) 글꼴 계열로 표시됨.
<code>document.getElementById('id-value')</code> is a pice of computer code.
🔗<KBD>
▪<kbd> 태그는 키보드를 표시한다. <Keyboard Input>
<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd></p>
<kbd>ESC</kbd>
🔗<SUP>
▪<sup> 태그는 위 첨자이다. (Superscripted text)
X<sup>4</sup> + Y<sup>2</sup>
🔗<SUB>
▪<sub> 태그는 아래 첨자 이다.(Subscript text)
H<sub>2</sub>0
🔗<TIME>
▪<time>태그는 날짜나 시간을 나타내기 위해 사용된다.
| 속성 | 의미 | 값 |
| datetime | 유요한 날짜 문자 | Date |
<time datetime="2018-07-07">July 7</time> in London's Hyde Park.</p>
🔗<SPAN>
▪<span>태그는 아무런 의미가 없는 영역을 만들때 사용 한다.
▪스타일이나 자바스크립트를 특정한 텍스트에 입힐 때 사용하기 좋다.
🔗<BR/>
▪<br/>는 줄바꿈을 할때 사용한다.
동해물과 백두산이 마르고 닳도록<br/>
하느님이 보우하사 우리나라 만세▪만약 줄바꿈의 간격을 늘리고 싶다면 <br/>태그를 여러번 사용하는게 아닌 css를 이용해서 늘리자.
<!-- style -->
p {
line-height: 50px;
}
<!-- Html -->
<p>
동해물과 백두산이 마르고 닳도록<br />
하느님이 보우하사 우리나라 만세
</p>
🔗<DEL>
▪<del>태그는 삭제나 변경된 텍스트의 범위를 지정한다.
| 속성 | 의미 | 값 |
| datetime | 변경이 일어난 유요한 날짜 문자 | Date |
<p>내가 가장 좋아하는 색은 <del>파랑</del> <ins>빨강</ins>이다</p>
🔗<INS>
▪<ins>태그는 새로 추가, 변경된 텍스트의 범위를 지정한다.
| 속성 | 의미 | 값 |
| cite | 변경을 설명하는 리소스의 URL | URL |
| datetime | 변경이 일어난 유요한 날짜 문자 | Date |
<p>내가 가장 좋아하는 색은 <del>파랑</del> <ins>빨강</ins>이다</p>
댓글