[HTML] 유용하지만 까먹기 쉬운 기본 태그들

HTML를 처음 공부할 때 제일 먼저 배우는 기본 태그들이 있다.

 

가령 <h1>, <b>, <i>, <strong>, <br>, <p> 등등..

매우 기본적인 내용들이라 대충 훑고 빠르게 넘어가는 경향이 있는데,

생각 보다 유용한 태그들이 많아서 한번 정리해 보았다.

 

---

<mark> 태그

양심고백 하겠다. 난 이 태그를 얼마 전에 처음 알았다.

HTML 공부 끝낸 지가 언제인데...

 

이 태그는 생각 보다 유용하다.

난 여태 글자에 강조효과를 넣는 의미로 배경색을 입히고 싶을 때 CSS로 가서

background-color: ;

를 사용했다.

 

하지만 굳이 그럴 필요 없이 <mark> 태그를 입히면 html 내에서 가능하다.

See the Pen Untitled by MinCheol-Sin (@mincheol-sin) on CodePen.

 

이렇게 <mark> 태그를 사용하면 마치 형광펜으로 칠한 것 같은 효과를 줄 수 있다.

대신 내가 색상을 내 맘대로 설정할 수 없기 때문에 원하는 색을 입히고 싶다면 CSS에 가서 backgroud-color: ; 코드를 사용하도록 하자.

 

---

<small> 태그

태그 이름을 보면 모르던 사람도 감이 올 것 같은 태그다.

<small> 태그는 글자를 작게 표시해준다.

 

물론, 폰트 크기를 세부적으로 조절하려면 CSS로 가서

font-size: ;

를 사용하면 된다.

 

하지만 굳이 지정하고 싶은 폰트 사이즈가 딱히 없고,

그냥 간단하게 바로 글자를 작게 표현하고 싶을 때 html 상에서 바로 표현이 가능하다.

See the Pen Untitled by MinCheol-Sin (@mincheol-sin) on CodePen.

이렇게 말이다.

 

약관이나 홈페이지 하단의 부가정보 같은 덜 중요한 텍스트에 활용하면 좋을 것 같다.

 

---

<hr> 태그

이 태그도 얼마 전에 처음 알았다..

 

티스토리를 시작하기 전에 벨로그를 사용했었는데,

벨로그는 티스토리나 네이버 블로그처럼 위지위그 에디터의 기능이 별로 없어서 html 코드로 게시글의 구조를 직접 구현해야 했다.

 

문단을 나눌 때 화면을 가르는 구분선을 만들고 싶어서 찾아 보다가 알게 되었다.

 

See the Pen Untitled by MinCheol-Sin (@mincheol-sin) on CodePen.

 

 

오늘도 성장했다.