새소식
반응형
WEB/HTML
[HTML] HTML Text Formatting 태그들 알아보기
- -
반응형
2021-04-18
html 에는 <h1 ~ h6> 태그 외에도 텍스트에 효과를 주는 태그들이 몇가지 존재하는데 오늘이 이 태그들을 알아보자.
- 예제 html
예제에는 기본적으로 div 태그에 폰트사이즈 속성만 부여하였다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
font-size: 30px;
}
</style>
</head>
<body>
<div> Hello World</div>
</body>
</html>
- <strong>
<div><strong>Hello World</strong></div>
strong 기본적으로 텍스트 작업시 자주 쓰는 단축키 ctrl + b 정도로 생각하면 되며, 글자의 기본 굵기가 증가하게된다.
<div><b>Hello World</b></div>
<b> 태그를 써도 보여지는 결과물은 <strong> 태그와 같다.
- <i>
<div><i>Hello World</i></div>
i 태그는 italic 이라는 의미를 가지며, 텍스트에 기울임 효과를 준다.
<div><em>Hello World</em></div>
<em> 태그 역시 기울임 효과를 주며, 보여주는 결과물을 i 태그와 같다.
- <small>
<div><small>Hello World</small></div>
small 태그는 말그대로 텍스트의 크기가 축소되어 결과물을 나타낸다.
-<mark>
<div><mark>Hello World</mark></div>
mark 태그는 기본 택스트 영역에 노락색 백그라운드가 생기게 되어 특정 포인트를 강조할 수 있게 된다.
-<del>
<div><del>Hello World</del></div>
del 지정한 텍스트 영역에 빗금처리가 되도록 해준다.
-<ins>
<div><ins>Hello World</ins></div>
ins는 텍스트에 밑줄을 그어준다.
메인 이미지 출처: Photo by Parrish Freeman on Unsplash
반응형
'WEB > HTML' 카테고리의 다른 글
| 크롬 개발자 도구의 dimensions 와 html 실제 넓이 차이 해결 meta name="viewport" content="width=device-width, initial-scale=1.0" (0) | 2024.01.12 |
|---|---|
| [HTML] img 태그 리소스 404 및 불러올 수 없을때 처리방법 (0) | 2023.09.08 |
| [HTML] HTML <link> 태그를 통한 리소스 불러오기 (0) | 2021.03.25 |
| [HTML] HTML button 의 type 종류들 (submit/button/reset) (0) | 2021.03.19 |
| [HTML] 이클립스 UTF - 8 / EUC-KR 인코딩 변경하는 방법 [한글깨짐해결] (0) | 2021.03.03 |
Contents
소중한 공감 감사합니다