[HTML] 텍스트 서식(Style)

HTML과 CSS의 역할을 요약하자면 아래와 같다.

HTML	골격 구성, 데이터 표현, 서식 기능(But 서식 기능 절대 사용하지 않는다.)
CSS	디자인(서식 구현) → 디자인 담당자로 생각하면 된다.

<font size="7" color="mistyrose">안녕하세요.</font>

 

그러나 위의 표에서 서술한 것처럼 HTML이 서식 기능을 갖고 있지만 거의 사용하지 않고, CSS로 서식을 구현한다.

WHY? 여기저기 섞여있으면 유지보수가 힘드니까 디자인 담당자인 CSS가 서식 구현을 담당한다고 생각하면 된다.

 

물리적인 모양을 지정하는 태그

<b>볼드체입니다.</b><br>
<i>이태릭체입니다.</i><br>
<small>작은 글자</small><br>

H<sub>2</sub>O<br> <!-- 밑첨자 -->
MC<sup>2</sup><br> <!-- 윗첨자 -->

<u>밑줄을 긋습니다.</u><br>
<strike>취소선을 긋습니다.</strike><br>
<tt>타자기 글자</tt><br>
<big>큰 글자</big><br>

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

 

의미를 중시하는 태그(⭐⭐⭐)

HTML에서의 서식 기능 사용을 지양한다고는 했지만, 위의 물리적인 모양을 지정하는 태그와 다르게 의미를 중시하는 태그가 있다.

아래 태그 친구들은 종종 사용되곤한다. 토이 프로젝트로 은행 프로젝트를 하며 카드 홈페이지에서 가장 많이 본건 <strong>태그!

의외로 strong태그는 많이 쓰이는 듯 했다.

<strong>중요한 데이터</strong><br> <!-- 볼드체와 비교시 외관상 차이는 없지만, '가치'가 있다는 점이 가장 상이. 중요하다는 가치를 나타낸 서식 -->
<em>중요한 데이터</em><br>
<mark>강조 데이터</mark><br>
<cite>한줄 인용구</cite><br>
<blockquote>여러줄 인용구</blockquote><br>
<code>int a = 10;</code><br> <!-- code로 묶이면 번역기가 번역을 안함! -->
<address>서울시 강남구 역삼동</address><br>
<ins>추가된 데이터</ins><br>
<del>삭제된 데이터</del><br>

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

 

*글 작성에 참고한 내용: 학원 쌤의 열정적인 수업