본문 바로가기

front-end

[HTML] 코드 기초 문법 / 텍스트 태그

태그
HTML 코드에서 정보(콘텐츠)를 정의하는 형식
<> 와 </>를 사용하여 콘텐츠의 시작과 끝 표시

예) <태그명>콘텐츠</태그명>
단일 태그
시작과 끝을 구분할 필요 없는 태그

예) <태그명/> or <태그명>

 

속성
태그의 부가적인 기능 정의 (선택사항)
- 시작 태그 내부에 정의 !
- 단일 태그에는 단일 태그 내부에 정의
- 속성의 개수 제한 x

예) <태그명 속성명="속성값">내용</태그명 or <태그명 속성명="속성값"/>
- 태그명과 속성 정의는 공백으로 구분되어야 함

 

주석

<!-- 주석 작성 -->

 

 

텍스트 태그
문단(paragraph) ≫ p 태그

문단 요소를 나타내는 태그. 가장 많이 사용되는 텍스트 태그
하나의 p 태그는 하나의 문단을 표현
문단과 문단 사이에는 공백이 있음!

 

제목(headline) ≫ h 태그

제목 요소를 나타내는 태그
숫자와 함께 사용 → h1~h6
h1일 때 가장 크고 h6일 때 가장 작음

 

수평선 ≫ hr 태그

수평선을 표시하는 태그
주제 변경 또는 내용 구분을 위해 주로 사용됨
단일 태그 !
<p>지금까지 스포츠 뉴스였습니다.</p>

<hr> <!-- 주제 변경 -->

<p>날씨입니다.</p>

 

 

HTML 텍스트의 특징
  • 엔터, 스페이스를 통한 줄바꿈, 공백은 여러 번 입력되어도 한 번씩만 인정됨
<p>스페이스 한 번만이 HTML에서 허락한 유일한 공백</p>

<p>스페이스

한    번만이 HTML

에서    허락한   유일한                          공백</p>
  • 두 문장의 결과는 같음

 

줄바꿈 태그와 공백문자
  • br 태그 ≫ 줄바꿈
  • &nbsp; ≫ 공백 두 번 이상 표시할 때
<p>

공&nbsp;&nbsp;&nbsp;&nbsp;백

<br/>그리고<br/>줄<br/>바<br/>꿈

</p>

 

공    백

그리고

줄

바

꿈

 

 

 

 

'front-end' 카테고리의 다른 글

[HTML] 링크 만들기  (0) 2024.12.01
[HTML] 컨테이너와 전역 속성  (0) 2024.12.01
[HTML] 이미지 표시하기  (0) 2024.12.01
[HTML] 블록 태그와 인라인 태그  (0) 2024.12.01
[HTML] 문서 기본 구조  (0) 2024.12.01