프로그래밍/HTML&CSS

텍스트(Text) 관련 태그

하와이블루 2022. 8. 20. 12:24
728x90

제목태그 <hn>

다양한 크기의 제목을 표현할 수 있는 태그로 가장 큰 <h1> 태그부터 가장 작은 <h6>태그까지 제목을 표현할 수 있다.

 

제목태그는 한줄을 전부 사용하는 블록(block) 태그의 성질을 포함하고 있고 검색엔진에서 각 웹사이트의 내용을 제목 태그를 통해 수집이 가능하다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제목 태그</title>
</head>
<body>
    <h1>제목</h1>
    <h2>제목</h2>
    <h3>제목</h3>
    <h4>제목</h4>
    <h5>제목</h5>
    <h6>제목</h6>
</body>
</html>

 

 

 

문단태그 <p>

내용상 끊어서 구분할 수 있는 부분을 구분하며, 블록태그의 성질을 포함한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문단 태그</title>
</head>
<body>
    <p>내용상 끊어서 구분할 수 있는 부분</p><p>블록(block) 태그</p>
    <p>문단을 아래로 내립니다.</p>
    문장을 아래로 내릴게요<br>
    글씨를 적어볼게요<br>
</body>
</html>

 

 

 

서식태그 <strong>

텍스트를 굵게 표현하고 싶을 때 사용하며 비슷한 태그로 <b>태그가 있다. 다만 <b>태그는 단순히 텍스트를 진하게 표시하는 역할만 제공하지만 <strong>태그는 실제 페이지 내에서 중요한 부분을 브라우저에게 알려주는 역할과 시각장애인들이 사용할 수 있는 리더기에서 강한 발음으로 표현하는 웹 접근성을 제공한다. 

 

* 웹 접근성 : 정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있도록 웹 컨텐츠를 제작하는 방법을 말한다.

 

서식태그 <em>

텍스트를 이탤릭체로 표현하고 싶을 때 사용하며 비슷한 태그로 <i> 태그가 있다. <i>태그는 단순히 텍스트를 이탤릭체로 표현하는 역할만 제공한다. <em>태그는 <strong>태그와 비슷하게 중요 부분을 브라우저에게 알려주고 웹접근성을 제공한다.

 

 

서식태그 <mark>

텍스트에 하이라이팅(형광) 효과를 적용시켜줍니다.

 

 

서식태그 <del>

취소선을 표현하여 텍스트 중앙에 가로줄을 만들어 텍스트를 지운 것과 같은 효과를 부여한다.

 

 

서식태그 <ins>

강조선을 표현하여 텍스트 밑에 선을 그어 텍스트의 강조 효과를 부여한다.

 

 

<sup>, <sub>

<sup> 태그는 위첨자에 사용하고, <sub> 태그는 아래첨자에 사용한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>서식태그</title>
</head>
<body>
    <h2>서식 태그</h2>
    <h3>b태그와 strong 태그의 차이</h3>
    <p>b태그는 <b>단순히 글자가 굵게</b> 표현됩니다.</p>
    <p>strong 태그는 <strong>중요한 글자를 굵게</strong> 표현합니다.</p>

    <h3>i태그와 em 태그의 차이</h3>
    <p>i태그는 <i>단순히 글자가 이탤릭체</i> 표현됩니다.</p>
    <p>em 태그는 <em>중요한 글자를 이탤릭체</em> 표현합니다.</p>

    <h3>mark 태그를 이용한 하이라이팅</h3>
    <p>mark 태그를 이용하면 <mark>중요한 부분</mark>을 하이라이팅합니다.</p>

    <h3>del 태그를 이용한 삭제 효과</h3>
    <p>del 태그는 글자를 마치 <del>지운 것 처럼</del> 표현합니다.</p>

    <h4>ins 태그를 이용한 밑줄 효과</h4>
    <p>ins 태그를 이용하여 <ins>중요한 글자</ins>에 밑줄을 사용할 수 있습니다.</p>

    <h3>sub 태그와 sup 태그를 이용한 첨자</h3>
    <p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>
    <p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>

</body>
</html>

728x90
저작자표시 (새창열림)