7.<b><strong><i><em><mark><small><del><ins><sub><sup>태그 정리 (HTML Text Formatting)
안녕하세요~! 오랜만에 HTML5 정리 글을 쓰고 있습니다. ㅎ 방금전까지만해도 설날이였는데 다들 설은 잘 지내셨는지요?! 새해복 많이 받으시고 좋은 한해 되시길 바랍니다!
오늘 정리 할 Tag는 아래와 같습니다. w3schools 사이트를 참고 하였습니다.
https://www.w3schools.com/html/html_formatting.asp
- <b> - Bold text (굵게)
- <strong> - Important text (중요 부분 강조)
- <i> - Italic text (기울임꼴)
- <em> - Emphasized text (강조)
- <mark> - Marked text (하이라이트)
- <small> - Small text (작게)
- <del> - Deleted text (취소선)
- <ins> - Inserted text (밑줄)
- <sub> - Subscript text (아래첨자)
- <sup> - Superscript text (위첨자)
자 이제 하나씩 가볼게요~!
<b> Bod text
The HTML element defines bold text, without any extra importance.
<b> tag는 글씨를 굵게 만들어주는 태그 입니다. 중요성을 띈 문장에 적용하지 않아요. 예제 볼게요!
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>결과는?
This text is normal.
This text is bold.
감이 오시쥬?????????????
<strong> important text
The HTML element defines strong text, with added semantic "strong" importance.
<strong> 태그는 <b>태그와 시각적으로 다르지 않습니다. 그러나, HTML5 표준화를 위해, 의미적으로 중요성이 있는 문장을 강조하기 위해 사용합니다.
예제 볼게요!
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>결과는?
This text is normal.
This text is strong.
<b>와 다르지 않쥬?! 하지만 웹 접근성을 위해 구분해 사용해요!
<i> Italic text
The HTML <i> element defines italic text, without any extra importance.
<i> 태그는 기울임 글꼴 입니다. 중요성이 없는곳에 사용 합니다. 예를 들면 참고하는 문서 제목 같은 것.
예제 볼게요~!
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>결과는?
This text is normal.
This text is italic.
<em> Emphasized text
The HTML <em> element defines emphasized text, with added semantic importance.
<em>태그 역시 시각적으로 <i>태그와 다를게 없습니다. 그러나 강조된 텍스트에 중요하고 의미있는 내용을 추가 할 때 사용 하는 태그 인 것 같습니다.
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
<small> smaller text
<small>태그 경우 예제로 실습을 해보니 함께 사용되는 <h>태그 크기에 비례하여 작아지는 효과를 보여주는 태그 인 듯 합니다.
예제 볼게요~!
<h2>HTML <small>Small</small> Formatting</h2>
Small 부분만 조금 작아졌죠??
<mark>Marked text
The HTML <mark> element defines marked/highlighted text:
<mark> 태그는 우리가 중요한 부분에 형광펜을 치듯 음영처리를 해주는 태그 입니다. 예제 보시죠~!
<h2>HTML <mark>Marked</mark> Formatting</h2>
음영색은 CSS로 바꿀 수 있으니 참고하세요~!
<del> Deleted text
The HTML <del> element defines deleted/removed text.
<del>태그는 저희가 워드에서 자주보던 취소선을 입혀주는 태그 입니다.
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>The del element represents deleted (removed) text.
My favorite color is blue red.
<ins> Inserted text
The HTML <ins> element defines inserted/added text.
<ins>태그는 insert의 약자인듯 싶죠?! 무언가 중간에 삽입되거나 추가 되는 경우에 사용 하는 태그인 듯 합니다.
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
밑줄이 그어지네요.
<sub> Subscript text / <sup> Superscript text
<sub> 태그는 아래 첨자. <sup>태그는 위 첨자로 한 코드에 한 번에 보도록 하겠습니다.
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
참 쉽쥬잉!?!?!
정리 하면서 저도 참 몰랐던 태그들을 만나네요.
요즘 계획한 프로젝트는 손대지 못하고 있네요.
기초 잠깐 하고 하면 되겠다 싶었는데 성격상 안되겠더라구요 ㅠㅠ
그냥 닥치는대로 하면 되긴 할 것 같은데 책 예제 쳐보며 코드 조금 바꿔보며 공부하고 있습니다...
시간이 좀 많았으면 좋겠네요 ㅠㅠ 잠을 포기 하자니 건강이 나빠질까봐 두렵고
육아남은 힘듭니다. 일찍좀 자주면 좋으련만 ㅠ
푸념푸념 ㅎㅎ
모두 행복하길 바라~~~!!