HTML&CSS 텍스트 관련 태그

💜 HTML,CSS

HTML&CSS 텍스트 관련 태그

Genie_. 2024. 3. 23. 02:41

728x90

240312

1. HTML 기본 문서 구조

태그는 소문자로 작성합니다.

태그는 < , >로 이루어져있습니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>문서 제목</title>
    </head>
    <body>
    	문서 내용
    </body>
</html>

<!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻
<html> ~ </html> : 웹 문서의 시작과 끝
<head> ~ </head> : 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분
<lang="ko"> : 현재 문서에서 사용할 언어 지정
<title> ~ </title> : 문서 제목
<body> ~ </body> : 실제로 웹 브라우저 화면에 나타날 내용

2. <hn> 태그 - 제목 표시

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

<h1>이 가장 큰 제목이고 <h6>이 가장 작은 크기의 제목

3. <p> 태그 - 단락 만들기

P태그 시작
<p>
	내가 적는건 단락으로 표시
	P 태그 내용은 다음줄에 표시된다
</p>
P태그 끝

'단락'이란 앞뒤에 줄 바꿈이 있는 텍스트 덩어리

4. <br> 태그 - 줄바꾸기

<br>

닫는 태그 없음

5. <hr> 태그 - 수평 줄 넣기

<hr>

닫는 태그 없음

6. <blockquote> - 인용문 넣기

ABC 
<blockquote>
   들여쓰기 입니다
   -ㅁ- 잘 안쓰임 
</blockquote>
DEF

다른 블로그나 사이트의 글을 인용할 경우 사용

7. <strong> <b> 태그 - 굵게 표시하기

8. <em> <i> 태그 - 이텔릭체로 표시하기

<strong>STRONG태그</strong>
<b>B태그</b>
<br> ===================== <br>
<em>em태그</em>
<i>i태그</i>

9. <span> 태그 - 줄바꿈 없이 영역 묶기 (★)

<span>영역구분SPAN</span>
<span>영역구분SPAN2</span>

태그 자체로는 아무 의미 x 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일 적용 할때 사용

10. 기타 텍스트 관련 태그

<abbr>	약자 표시. title 속성을 함께 사용할 수 있음	<abbr title="줄임말이라는 것은 말을 줄이는 것으로 ~...">줄임말 표시하기(설명)</abbr>
<small>	작게 표시	<p>가격 : 13,000원 <small>(부가세 별도)</small></p>
<sub>	아래 첨자	<p>물의 화학식은 H<sub>2</sub>0다</p>
<sup>	위 첨자	<p>E=mc <sup>2</sup></p>
<s>	취소선	<p><s>34,000원</s> 19,000원</p>
<u>	밑줄	<p>링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u>u태그</u></p>

참고 책 : Do It! HTML5 + CSS3 웹 표준의 정석

학원 수업 : 코리아IT아카데미 웹개발1

728x90

저작자표시 비영리 변경금지