웹 페이지를 구성하는 요소 중 가장 큰 비중을 차지하는 요소는 텍스트임
우리가 쓰려는 텍스트가 설명일 수도 있고, 제목, 부제목, 말이나 인용일 수도 있음
텍스트를 웹 브라우저가 구분하게 하려면 목적에 맞는 텍스트 태그를 사용해야 함
🟣 hn 태그 (h1 ~ h6)
제목 또는 주제를 나타내는 텍스트를 표현할 때 사용
h1부터 h6까지 6개가 있음
h : heading
n : 1 ~ 6 까지 숫자
hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식
검색엔진은 hn 태그를 검색할 때 단계적으로 검색함
h1, h2 ~ h6 태그를 사용하다 중간에 h4 태그가 없으면 h5, h6 태그는 검색하지 않음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<!-- hn 태그 사용 -->
<h1> h1으로 표현하는 제목 </h1>
<h2> h2으로 표현하는 제목 </h2>
<h3> h3으로 표현하는 제목 </h3>
<h4> h4로 표현하는 제목 </h4>
<h5> h5로 표현하는 제목 </h5>
<h6> h6으로 표현하는 제목 </h6>
</body>
</html>🔽 <hn> 태그 출력 🔽
🟣 p 태그
본문의 문단을 작성할 때 사용
( 블록요소 , 강제 줄 바뀜 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<h1> h1으로 표현하는 제목 </h1>
<!-- p 태그 사용 -->
<p> p 태그는 본문에서 자주 사용하는 태그 </p>
</body>
</html>🔽 <p> 태그 출력 🔽
🟣 br 태그
문단에서 줄 바꿈할 때 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<h1> h1으로 표현하는 제목 </h1>
<!-- br 태그 없이 -->
<p> p 태그는 본문에서 자주
사용하는 태그 </p>
</body>
</html>이렇게 코드를 작성해도 줄 바꿈 되어서 출력이 되지 않음
HTML은 모든 명령이나 지시를 태그로 해야 하기 때문
🔽 <br> 태그 없이 출력 🔽
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<h1> h1으로 표현하는 제목 </h1>
<!-- br 태그 사용 -->
<p> p 태그는 본문에서 자주 <br>
사용하는 태그 </p>
</body>
</html>🔽 <br> 태그 사용해서 출력 🔽
🟣 blockquote 태그
다른 출저로부터 인용된 블록을 정의할 때 사용
( 인라인 요소 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<!-- <blockquote cite = "출처 URL"> 문단 단위 인용문 </blockquote> -->
<blockquote cite = "출처 URL">
<p> HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는
의미의 웹 페이지를 위한 지배적인 마크업 언어다. <blockquote>HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여
CSS의 사용을 권장한다.</blockquote> </p>
</blockquote>
</body>
</html>🔽 <blockquote> 출력 🔽
🟣 q 태그
문단 안에 짧은 인용문을 작성할 때 사용
큰 따옴표 (" ") 로 묶임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<p> HTML은 하이퍼텍스트 마크업 언어 </p>
<p> (HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 </p>
<p> 의미의 웹 페이지를 위한 지배적인 마크업 언어다. </p>
<p> <q>HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.</q> </p>
</body>
</html>🔽 <q> 태그 출력 🔽
🟣 ins 태그, del 태그
<ins> 태그는 새로 추가된 텍스트임을 나타냄. 사용한 텍스트에 밑줄이 생김
<del> 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타냄. 사용한 텍스트에 취소선이 생김
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<p> S펜 너무 비싸다 <del>60,000원</del>이 넘는다. 반값으로 <ins>30,000원</ins>에 팔았으면 좋겠다. </p>
</body>
</html>🔽 <ins> 와 <del> 태그 사용 출력 🔽
🟣 sub 태그, sup 태그
<sub> 태그는 아래 첨자
<sup> 태그는 위 첨자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body> <!--아래 첨자--> <!--위 첨자-->
<p> <sub>S펜</sub> 너무 <sup>비싸</sup>다 </p>
</body>
</html>🔽 <sub> 와 <sup> 태그 사용 출력 🔽
공부 중. !!! !