[HTML -4] 텍스트 표시하기

텍스트 표시하기

문단 표시하기 : p태그(<p></p>)

• 문단 요소를 나타내는 태그로 가장 많이 사용되는 텍스트 태그이다
• 하나의 태그는 하나의 문단을 표시한다
• 문단과 문단 사이에는 여백이 존재한다

제목 표시하기 : h태그(<h1></h1>)

• 제목(표제) 요소를 나타내는 태그이다
• 숫자와 함께 사용되며 1일때 가장 크고 6일 때 가장 작다

텍스트 사이 구분선 : hr태그(<hr>)

• 수평선을 표시하는 태그이다
• 수평선은 주제 변경 또는 내용 구분을 위해 주로 사용된다.

HTML 텍스트의 특징

1. 엔터를 이용한 줄바꿈을 무시한다
2. 스페이스를 이용한 공백은 한 번만 허용한다

줄 바꿈 태그와 공백 문자

• 줄 바꿈 : br태그(<br/>
• 두 개 이상의 공백을 표시 : &nbsp; → 해당 문자를 공백 대신 넣어준다

 

요소의 구분과 인라인 텍스트 요소

요소 구분

웹 요소는 블록레벨 요소, 인라인 요소 두 가지로 구분할 수 있다.

블록 레벨 요소

자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.

인라인 요소

자기에게 필요한 만큼의 공간만 차지 한다.

• <mark> 마크 텍스트 요소 - 형광펜 </mark>
• <strong> 스트롱 텍스트 요소 - 볼드 효과 </strong>
• <em> 이엠 텍스트 요소 - 이탤릭체 효과 </em>
• <q> 큐 텍스트 요소 - 인용구 효과 </q>
• <s> 에스 텍스트 요소 - 취소선 효과 </s>

인라인 요소는 종종 블록레벨 요소에 포함되는 경우가 있다!
→ 태그의 콘텐츠로 다른 태그가 포함될 수 있기 때문이다.
블록 레벨 요소 안에 블록 레벨 요소를 포함할 경우 공간의 균열(줄 바꿈)이 생긴다!

모든 태그의 요소를 알 수 없기 때문에 웹브라우저의 개발자 도구를 통해서 알 수 있다.
크롬 기준

1. 점 세게 클릭
2. 도구 더 보기 클릭
3. 개발자 도구 클릭