너와 나의 개발 고리

[HTML] HTML 텍스트 작성(hn 태그, p 태그, br 태그, blockquote 태그, q 태그, ins 태그, del 태그, sub태그, sup 태그, div 태그, span 태그) 본문

CSS _HTML_JavaScript/HTML

[HTML] HTML 텍스트 작성(hn 태그, p 태그, br 태그, blockquote 태그, q 태그, ins 태그, del 태그, sub태그, sup 태그, div 태그, span 태그)

Oli-Viaaaa 2023. 6. 20. 22:44

hn 태그

hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용한다.

형식)
	<hn>제목</hn>

hn 태그는 h1 부터 h6 태그까지 있으며 여기서 h는 heading을 의미하며 n에 들어가는 숫자는 중요도를 나타낸다.

같은 hn 태그라고 하더라도 h1 태그가 가장 중요하며 h6 태그가 상대적으로 덜 중요하다.

실행결과를 보면 중요도가 가장 높은 h1 태그일 때 글자가 가장 크고 굵으며

h6 태그로 갈 수록 크기가 작아지고 가늘어지는 것을 확인할 수 있다.

TIP
검색 엔진은 hn 태그를 검색할 때 h1 태그부터 단계적으로 검색하기 때문에 만약 h4 태그를 사용하지 않고
h1, h2, h3, h5, h6 태그를 사용한다면 검색 엔진은 h1 태그부터 단계적으로 태그를 검색하다가 h4 태그가 없으면
h5, h6 태그를 검색하지 않는다. 따라서 hn 태그는 중간에 숫자를 건너뛰지 말고 h1 태그부터 단계적으로 사용해야한다

 

p 태그

p 태그는 본문의 문단(paragraph)을 작성할 때 사용한다.

형식)
	<p>내용</p>

HTML에서는 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p 태그를 자주 사용한다.

 

 

br 태그

br 태그는 문단에서 줄 바꿈할 때 사용한다.

형식)
	<br>

작성 시 예상했던 결과는 입력한 코드처럼 다음줄에 줄 바꿈이 되어 '코딩 콩부하기 좋은 날입니다.'가 출력되는 것인데

HTML은 모든 명령이나 지시를 태그로 해야 하기 때문에 실제로는 한 줄로 출력되는 것이다.

여기서 줄 바꿈을 하고자 한다면 <br> 태그를 활용하여 줄 바꿈을 하는 방법이 있다.

 

blockquote 태그

blockquote 태그는 출처에서 인용한 문단 단위의 텍스트를 작성할 때 사용한다. 이때 출처가 확실한 인용문은 cite 속성으로 출처 경로를 명시해야 한다.

형식)
	<blockquote cite="출처 URL">문단 단위 인용문</blockwuote>

blockquote 태그는 반드시 한 개 이상의 p태그를 포함해야 한다.

 

q 태그

q 태그는 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용할 수 있는 태그이다.

q 태그를 사용할 콘텐츠는 큰따옴표(" ")로 묶인다.

형식)
	<q cite="출처 URL">짧은 인용문</q>

ins 태그

ins 태그는 새로 추가된 텍스트임을 나타낼 때 사용한다. ins 태그를 사용한 콘텐츠에는 밑줄이 생긴다.

형식)
	<ins>추가 텍스트</ins>

del 태그

del 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용한다. del 태그를 사용한 콘텐츠에는 취소선이 생긴다.

형식)
	<del>삭제 텍스트</del>

sub 태그

sub 태그는 아래 첨자에 해당하는 텍스트를 작성할 때 사용한다.

형식)
	<sub>아래첨자</sub>

sup 태그

sup 태그는 윗 첨자에 해당하는 텍스트를 작성할 때 사용한다.

형식)
	<sup>윗 첨자</sup>

 

 

div 태그

div 태그는 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>DIV</title>
</head>
<body>
	<p>영화 소개</p>
   	<p>영화를 소개하는 페이지입니다.</p>
  	<p>TV 프로그램 소개</p>
  	<p>TV 프로그램을 소개하는 페이지입니다.</p>
</body>
</html>

위의 예시 코드 처럼 body 태그 안에 영역 구분 없이 표시하려는 텍스트만 작성하면

코드가 복잡해질 수록 텍스트를 구분하기 어려워진다.

div 태그를 사용해 영역별로 그룹을 지으면 다음과 같다.

 

<div class="movie">
	<p>영화 소개</p>
    	<p>영화를 소개하는 페이지입니다.</p>
</div>

<div class="tv">
	<p>Tv 프로그램 소개</p>
    	<p>Tv 프로그램을 소개하는 페이지입니다.</p>
</div>

단순하게 관련 있는 요소를 그룹으로 묶기만 해도 HTML 문서의 구조가 훨씬 깔끔해진다.

 

span 태그

span 태그는 인라인 요소를 그룹으로 묶을 때 사용한다.

span 태그는 별도의 의미를 가지지 않고, 스타일링이나 스크립트와 같은 처리를 위해 사용된다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>span</title>
</head>
<body>
	<p>이 문장은 <span style="color: blue;">파란색</span>으로 표시됩니다.</p>
	<p>이 문장은 <span class="highlight">강조</span>됩니다.</p>
</body>
</html>

위의 예시에서 첫번째 span 태그는 인라인 스타일을 사용하여 텍스트를 파란색으로 표시하며

두번째 span 태그는 highlight 클래스르르 적용하여 강조 효과를 부여한다. 

 

span 태그는 다른 태그들과 함께 사용하여 더 복잡한 레이아웃과 디자인을 구성할도 있어 태그의 스타일을 변경하거나 스크립트를 통해 특정 요소에 접근할때 유용하다.

'CSS _HTML_JavaScript > HTML' 카테고리의 다른 글

[HTML] HTML 링크와 이미지 넣기  (0) 2023.06.25
[HTML] HTML ul 태그의 스타일 변경(아이콘, 배열, 글자색, 크기, 글씨체, 배경색 변경)  (0) 2023.06.23
[HTML] 목록을 만드는 ul태그, ol태그, dl태그  (0) 2023.06.23
[HTML] HTML의 기본 구조  (0) 2023.06.20
[HTML] HTML의 기본 구성 요소  (0) 2023.06.20
'CSS _HTML_JavaScript/HTML' Related Articles more