-
텍스트(Text) 관련 태그프로그래밍/HTML&CSS 2022. 8. 20. 12:24728x90
제목태그 <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'프로그래밍 > HTML&CSS' 카테고리의 다른 글
테이블(table) 태그 (0) 2022.08.21 이미지 태그 (0) 2022.08.21 목록(list) 태그 (0) 2022.08.20 HTML5 문서 구조 (0) 2022.08.20 HTML 들어가기 (0) 2022.08.19