본문 바로가기
[HTML&CSS]

[html] 기본 태그 1

by 쥰5017 2022. 9. 12.

많이 쓰이는 32개의 태그 중 일부.

 

 

§ 제목 태그

<h1>어쩌구 저쩌구</h1>

<h2>어쩌구 저쩌구</h2>

...

<h6>어쩌구 저쩌구</h6>

 

제목이나 부제목에 사용. 숫자는 정보의 중요도를 나타내며 숫자가 클수록 폰트 사이즈 작음. 크기 조절용으로 사용하지 말 것!

 

 

§ 본문 태그

<p>어쩌구 저쩌구에 대한 본문 내용</p>

본문 내용을 담는 태그. p 태그끼리 이어서 쓰면 p태그 덩어리 사이에 한 줄 공백이 자동으로 들어가므로 p를 사용해 여백 조절하지 말고 css를 통해 스타일링 할 것.

 

§ 줄바꿈 태그

<br />

본문 내용 중에서 행갈이 하고 싶은 부분에 태그 하나만 적용.

 

§ 수평선(가로줄) 태그

<hr />

내용의 분리 등을 위해 가로줄을 긋고 싶을 때 사용하는 태그.

 

 

§ 이미지 태그

<img src="../imges/파일명.jpg" alt="대체 텍스트">  상대 경로

<img src="https://이미지 주소" alt="대체 텍스트">  절대 경로

 

 

§ 리스트 태그

<ul>

   <li>메뉴1</li>

   <li>메뉴2</li>

</ul>

unordered list의 약자로 순서가 없는 리스트 생성. 메뉴 버튼을 만들 때 사용.

 

<ol>

   <li>1번 내용</li>

   <li>2번 내용</li>

</ol>

ordered list. 순서가 있는 리스트. 기본값은 숫자로 순서를 매기고 type으로 소문자(a), 대문자(A), 로마자(i, I) 등을 지정하여 순서를 매길 수 있음.

 

 

§ 하이퍼링크 태그

<a href="https://www.naver.com">네이버</a> 절대 경로

<a hrer="../폴더명/파일명.html">다른 파일</a> 상대 경로

<a href="https://www.naver.com" target="_blank">Naver</a> 새창에서 열기

 

 

 

'[HTML&CSS]' 카테고리의 다른 글

[css] grid  (0) 2022.09.19
[css] flexbox  (0) 2022.09.18
[css] transform, transition, animation  (0) 2022.09.14
[html] 기본 태그 2  (0) 2022.09.14

댓글