HTML&CSS 텍스트 관련 태그

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

저작자표시 비영리 변경금지 (새창열림)

'💜 HTML,CSS' 카테고리의 다른 글

HTML&CSS 실습2 (정리x) (0)	2024.03.23
HTML&CSS 실습1 (정리x) (0)	2024.03.23
HTML&CSS 4일차 (정리x) (0)	2024.03.23
HTML&CSS 3일차 (정리x) (0)	2024.03.23
HTML&CSS 2일차 (정리x) (0)	2024.03.23

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

HTML&CSS 텍스트 관련 태그

1. HTML 기본 문서 구조

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

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

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

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

6. <blockquote> - 인용문 넣기

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

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

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

10. 기타 텍스트 관련 태그

'💜 HTML,CSS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

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

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

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

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

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