HTML 서식 기본
강조 효과
HTML 문서에서 텍스트를 굵게 표현하고 싶을 때에는 <b>태그(bold text)나 <strong>태그를 사용하면 됩니다.
<b>태그는 단순히 화면의 텍스트를 굵게 표현해 줍니다.
하지만 <strong>태그는 텍스트를 굵게 표현해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 줍니다.
HTML 문서에서 이탤릭체를 표현하고 싶을 때에는 <i>태그(italic text)나 <em>태그(emphasized text)를 사용합니다.
예제)
<!-- 긁지않은 개발자 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Formatting</title>
</head>
<body>
<h1>b태그와 strong태그의 차이점</h1>
<p><b>"이 부분"</b>은 단순히 글씨가 굵은 부분이에요!</p>
<p><strong>"이 부분"</strong>은 중요한 부분이라서 굵게 표현됐어요!</p>
</body>
</html>실행 결과
b태그와 strong태그의 차이점
"이 부분"은 단순히 글씨가 굵은 부분이에요!
"이 부분"은 중요한 부분이라서 굵게 표현됐어요!
i태그와 em태그의 차이점
<i>태그는 단순히 화면의 텍스트를 이탤릭체로 표현해 줍니다.
하지만 <em>태그는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 줍니다.
검색엔진은 <strong>태그나 <em>태그를 사용하여 강조된 텍스트를 더 중요하게 인식합니다.
예제)
<!-- 긁지않은 개발자 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Formatting</title>
</head>
<body>
<h1>i태그와 em태그의 차이점</h1>
<p><i>"이 부분"</i>은 단순히 글씨가 이탤릭체인 부분이에요!</p>
<p><em>"이 부분"</em>은 중요한 부분이라서 이탤릭체로 표현됐어요!</p>
</body>
</html>실행결과
i태그와 em태그의 차이점
"이 부분"은 단순히 글씨가 이탤릭체인 부분이에요!
"이 부분"은 중요한 부분이라서 이탤릭체로 표현됐어요!
mark태그를 이용한 하이라이팅
예제)
<!-- 긁지않은 개발자 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Formatting</title>
</head>
<body>
<h1>mark태그를 이용한 하이라이팅</h1>
<p><mark>"이 부분"</mark>만 하이라이팅하고 싶어요.</p>
</body>
</html>실행결과
mark태그를 이용한 하이라이팅
"이 부분"만 하이라이팅하고 싶어요.
del태그를 이용한 삭제 효과
<del>태그(delete)는 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과를 내줍니다.
예제)
<!-- 긁지않은 개발자 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Formatting</title>
</head>
<body>
<h1>del태그를 이용한 삭제 효과</h1>
<p><del>"이 부분"</del>을 지운 것처럼 하고 싶어요.</p>
</body>
</html>실행결과
del태그를 이용한 삭제 효과
"이 부분"을 지운 것처럼 하고 싶어요.
<ins>태그(insert)는 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 내줍니다.
예제)
<!-- 긁지않은 개발자 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Formatting</title>
</head>
<body>
<h1>ins태그를 이용한 삽입 효과</h1>
<p><ins>"밑줄 친 부분"</ins>에 들어갈 알맞은 말을 고르세요.</p>
</body>
</html>
ins태그를 이용한 삽입 효과
"밑줄 친 부분"에 들어갈 알맞은 말을 고르세요.실행결과
ins태그를 이용한 삽입 효과
"밑줄 친 부분"에 들어갈 알맞은 말을 고르세요.
ins태그를 이용한 삽입 효과 "밑줄 친 부분"에 들어갈 알맞은 말을 고르세요.
위첨자와 아래첨자 효과
위첨자는 <sup>태그(superscript)를 사용하여, 아래첨자는 <sub>태그(subscript)를 사용하여 각각 표현할 수 있습니다.
예제)
<!-- 긁지않은 개발자 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Formatting</title>
</head>
<body>
<h1>sup태그와 sub태그를 이용한 첨자</h1>
<p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>
<p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>
</body>
</html>실행결과
sup태그와 sub태그를 이용한 첨자
X2 + Y3 = Z
물을 나타내는 화학식은 H2O 입니다.
'HTML > HTML 정리' 카테고리의 다른 글
| [HTML] HTML form 내부 태그와 속성들( input, textarea, label, select) (0) | 2023.05.30 |
|---|---|
| [HTML] HTML이란? HTML 기본정리 (0) | 2023.05.30 |