지금 소개할 태그들은 모두 글자를 꾸미는 역할을 하는 태그들입니다.
기본 태그의 사용법만 알고 있으면 어렵지 않게 사용할실 수 있으나 그 의미만은 반드시 기억하시기 바랍니다. 눈으로 보기에는 차이가 없는 것들이 있으니 의미를 잘 이해하시고 적절한 태그를 사용하는 것이 좋겠습니다.
글자를 위한 태그들이니 display 속성은 모두 inline 입니다.
<body>
<strong>중요한 text를</strong> 강조.<br>
<b>bold(굵게).</b> 목적없이 단순이 글자를 굵게 만들기 위해 사용.<br>
<em>emphasized(강조).</em> 구어체 강조 또는 strong으로 강조된 문장안에서 다시 강조시 사용<br>
<i>italic(기울임체).</i> 전문용어, 관용구 등 강조가 아닌 단순 기울임을 위해 사용<br>
<ins>insert(삽입).</ins> 밑줄을 만들고 빈칸에 글자를 삽입했다는 의미<br>
<u>underline(밑줄).</u> 단순 밑줄<br>
<del>delete(삭제).</del> 가운데 줄을 만들고 삭제(잘못)된 문자임을 의미<br>
<s>strikethrough(가운데 선).</s> 의미 없이 가운데 선<br>
<blockquote>인용구. 출처가 다른 문장등을 인용시 사용(들여쓰기가 된다)</blockquote>
<q>quote(인용구).</q> 짧은 문구등 인용시 사용. 앞뒤 따옴표가 붙는다<br>
저작권(copyright)이나 특정 내용의 <smal>부연설명을 위해 사용</smal><br>
superscript(위첨자). m<sup>2</sup><br>
subscript(아래첨자). H<sub>2</sub>O<br>
형광펜으로 <mark>표시</mark>해둔 효과<br>
</body>
| 태그 | 설명 |
| strong | 중요한 text를 강조. |
| b | bold(굵게). 목적없이 단순이 글자를 굵게 만들기 위해 사용. |
| em | emphasized(강조). 구어체 강조 또는 strong으로 강조된 문장안에서 다시 강조시 사용 |
| i | italic(기울임체). 전문용어, 관용구 등 강조가 아닌 단순 기울임을 위해 사용 |
| ins | insert(삽입). 밑줄을 만들고 빈칸에 글자를 삽입했다는 의미 |
| u | underline(밑줄). 단순 밑줄 |
| del | delete(삭제). 가운데 줄을 만들고 삭제(잘못)된 문자임을 의미 |
| s | strikethrough(가운데 선). 의미 없이 가운데 선 |
| blockquote | 인용구. 출처가 다른 문장등을 인용시 사용(들여쓰기가 된다) |
| q | quote(인용구). 짧은 문구등 인용시 사용. 앞뒤 따옴표가 붙는다 |
| small | 저작권(copyright)이나 특정 내용의 부연설명을 위해 사용 |
| sup | superscript(위첨자). |
| sub | subscript(아래첨자). |
| mark | 형광펜으로 표시해둔 효과 |
대충 감이 왔을 겁니다. 단순하게 한글자로 된 태그들은 의미없이 표현만을 담당하기 때문에 가능한 의미가 있는 태그를 사용하시길 권장하며 굳이 의미가 없다면 한글자 태그를 사용하시면 되겠습니다.
span 태그는 이전에 블럭과 인라인 강좌에서 한번 다루었습니다.
대표적인 인라인 속성을 가진 요소 입니다. 의미가 중요치 않은 태그를 사용해야 한다면 모두 css에서 위의 표현이 가능합니다. 특히나 2가지 세가지 태그가 중첩 되야 되는 요소에서는 span 태그를 사용하고 css를 이용해서 한번에 표현해 버립니다. 쓸데없이 많은 태그가 중첩적으로 나오는 것을 막고 웹문서를 단순화하는 효과를 볼 수 있기때문이죠
가령 밑줄이면서 굵고 기울임체의 글씨를 사용한다면
<u><b><i>내용</i></b></u> 이렇게 될 것입니다. 태그안에 태그안에 태그가 중첩되는 것이죠.
하지만 span 태그와 css을 사용한다면
<span class=''st">내용</span> 이런식으로 태그 하나로 묶을 수 있게됩니다. 태그 요소 하나로 표현이 가능해 지게 됩니다.
728x90
'강좌 및 설정 > HTML 기본강좌' 카테고리의 다른 글
| 분할 태그 div (0) | 2022.11.28 |
|---|---|
| HTML Entities (1) | 2022.11.24 |
| 표 태그 table 세번째 (scope 속성) (0) | 2022.11.24 |
| 표 태그 table 두번째 (col, colgroup) (0) | 2022.11.23 |
| 표 태그 table 첫번째 (table, thead, tbody, tr, th, td) (0) | 2022.11.22 |