🥊 환경 정보
- HTML ver : HTML5
🥊<body> 태그
<body> 태그의 안에 들어갈 내용들은 실제 브라우저에 표시될 내용이다.
내용을 표현하는 여러 태그가 있는데, 이번에는 텍스트 관련 태그들을 알아보자.
🥊 텍스트 관련 태그
💧 <h1> ~ <h6>
- 제목을 표시할 때 사용하는 태그.
- 닫는 태그와 함께 사용한다.
- h 뒤의 숫자는 제목글자의 크기를 뜻한다.
1의 글자 크기가 가장 크며, 숫자가 작아질수록 제목의 크기도 작아진다.
아래와 같은 형태로 사용된다.
<h1>가장 큰 제목</h1>
<h2>두 번째로 큰 제목</h2>
<h3>세 번째로 큰 제목</h3>
<h4>네 번째로 큰 제목</h4>
<h5>다섯 번째로 큰 제목</h5>
<h6>가장 작은 제목</h6>가장 큰 제목
두 번째로 큰 제목
세 번째로 큰 제목
네 번째로 큰 제목
다섯 번째로 큰 제목
가장 작은 제목
💧 <br />
- 줄 바꿈 태그.
- 닫는 태그 없이 단독으로 사용한다.
- 해당 태그를 여러번 사용하면 사용 횟수만큼 줄바꿈 처리가 된다.
아래와 같은 형태로 사용된다.
줄바꿈용 문장1<br />줄바꿈용 문장2<br /><br />줄바꿈용 문장3줄바꿈용 문장1
줄바꿈용 문장2
줄바꿈용 문장3
💧 <hr />
- 수평 줄 생성 태그.
- 닫는 태그 없이 단독으로 사용한다.
- 해당 태그를 여러번 사용하면 사용 횟수만큼 수평 줄이 생성된다.
아래와 같은 형태로 사용된다.
테스트 문장1<hr />테스트 문장2<hr /><hr />테스트 문장3테스트 문장1
테스트 문장2
테스트 문장3
💧 <p> ~ </p>
- 텍스트 단락 태그.
- 닫는 태그와 함께 사용한다.
- 해당 태그에 작성한 내용 앞/뒤로 빈 줄이 생기며 텍스트 단락이 생성된다.
아래와 같은 형태로 사용된다.
테스트 문장1<p>테스트 문장2</p>테스트문장3
테스트문장4테스트 문장1
테스트 문장2
테스트문장3
테스트문장4
💧 <blockquote> ~ </blockquote>
- 텍스트 인용 태그.
- 닫는 태그와 함께 사용한다.
- 해당 태그에 작성한 내용은 다른 텍스트들보다 안으로 들여 써지는 인용문으로 생성된다.
아래와 같은 형태로 사용된다.
테스트 문장1
<blockquote>테스트 문장2</blockquote>
테스트문장3테스트 문장1
테스트 문장2테스트문장3
💧 <pre> ~ </pre>
- 텍스트 입력 태그.
- 닫는 태그와 함께 사용한다.
- 다른 태그들과 달리, 해당 태그에 작성한 내용은 그대로 표시된다.
ex) 공백을 여러번 입력해도 그대로 표시된다.
아래와 같은 형태로 사용된다.
<pre>테스트 문장1</pre>
<!-- 비교를 위한 <p> 태그 -->
<p>테스트 문장2</p>테스트 문장1테스트 문장2
💧 <mark>
- 텍스트에 형광펜 효과를 내는 태그.
- 닫는 태그와 함께 사용한다.
아래와 같은 형태로 사용된다.
테스트 <mark>문장</mark>1, 테스트 문장2테스트 문장1, 테스트 문장2
💧 <span>, <div>
<span>: 줄 안에서 묶는 태그(인라인).<div>: 줄 바꿔 단락으로 묶는 태그(블록).- 두 태그 모두 닫는 태그와 함께 사용한다.
아래와 같은 형태로 사용된다.
테스트 <span>문장</span>1, 테스트 문장2
테스트 <div>문장</div>1, 테스트 문장2테스트 문장1, 테스트 문장2
테스트문장1, 테스트 문장2
🥊 엔티티 코드
HTML 문서에서 여러 개의 공백 ( ) 을 입력하거나, 특수 문자를 화면에 표시하고자 할때 사용한다.
🥊 썸네일
제작자 : wonkooklee
차근차근 한 걸음씩 걸어나가는 개발자 꿈나무.