본문 바로가기
Knowledge/HTML & CSS

[HTML-1] 기본 태그

by w.developer 2023. 5. 30.

1.블록 태그 

: 블록을 가지고 있음.

 

1-1. 문단 (paragraph)

 

p 태그는 문단요소 태그로써, 가장많이 사용되는 텍스트 태그이다.

하나의 태그는 하나의 문단을 표현한다.

<p>안녕하세요!</p>
<p>문단과 문단 사이에는 공백이 있습니다.</p>

 

1-2. 제목 (headline)

 

h 태그는 제목요소를 나타내는 태그이다.

숫자(1~6)와 함께 사용되며, 1일때 가장 크고 6일 때 가장 작다.

<h1>제목!</h1>
<h2>제목!</h2>
<h3>제목!</h3>
<h4>제목!</h4>
<h5>제목!</h5>
<h6>제목!</h6>

 

1-3. 수평선

 

hr 태그는 수평선을 표시하는 단일태그이다. 수평선은 구분을 위해 주로 사용된다

<h1>제목!</h1>
<hr>
<p>내용입니다</p>

 

1-4. 줄바꿈 태그와 공백문자

 

br 태그는 줄바꿈 태그이고, 칸을 띄워 공백을 나타내는 문자조합은 &nbsp 이다.

<p>
    br은 줄바꿈태그 <br><br><br>br은 줄바꿈태그
    &nbsp;&nbsp;&nbsp;&nbsp; 이거는 칸 공백태그~~
    br은 줄바꿈태그 <br><br><br>br은 줄바꿈태그
</p>

 

2.인라인 태그

: 블록을 가지고있지 않음

 

2-1. 글자를 굵게함

<strong>굵은 글자 생성</strong>

 

2-2. 글자를 기울임

<em>기울여진 글자를 만듬</em>

 

2-3. 형광색으로 칠한 글자를 만듬

<mark>형광팬 쫙</mark>

 

3.기타 태그

 

3-1. 이미지 삽입

 

이때 이미지 width와 heigh는 px단위로 조정된다

<img ulr = "이미지주소" src="표시할이미지파일" alt="이미지설명" width="너비값" height="높이값" >

 

3-2. 컨테이너 태그

 

요소 여럿을 묶어서 관리하기 편하게 만드는 역할을 하는 태그

<div>블록태그 컨테이너</div>
<span>인라인태그 컨테이너</span>

 

 

'Knowledge > HTML & CSS' 카테고리의 다른 글

[CSS-4] float, clear  (0) 2023.05.30
[CSS-3] 박스모델 (Box-model)  (0) 2023.05.30
[HTML-4] 메타 태그, 뷰포트  (0) 2023.05.30
[HTML-3] 입력요소  (0) 2023.05.30
[HTML-2] 속성 링크 목록  (0) 2023.05.30