[HTML] <body> 작성할 수 있는 태그들

Front-End/HTML 2022. 11. 23. 16:33

 

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

: 제목 태그

: 문서에 있어 중요한 요소로서의 웹 페이지에 대한 개요를 표현할 때 사용

: <h1>이 가장 큰 폰트 사이즈의 제목을 나타냄.

 

<div>

: 블록을 구성하기 위한 태그

 

<span>

: 텍스트 일부분에 특별한 모양을 주거나, js 코드로 텍스트 일부분을 제어하고자 할 때 사용

 

<p>

: 문단 태그로서 텍스트를 감싸는 태그

: 문단으로 구분하기 위한 블록 요소로 사용됨.

 

<pre>

: 형식화된 태그를 나타내는 태그

: <pre> 태그 안에 띄어쓰기, 들여쓰기, 줄바꿈 등이 그대로 웹페이지에 표시.

 

<br>

: 줄바꿈 태그

 

<hr>

: 화면에 수평선을 그려주는 태그

: 웹페이지 내 내용을 구분할 때 주로 사용.

 

<strong>

: 글자를 굵게 표시하는 강조 태그

 

<em>

: 글자를 기울게 하여 강조하는 태그

 

<a>

: 하이퍼링크 태그

<a href = "www.naver.com">naver로 이동</a>

: target 속성으로 링크로 연결된 웹 페이지가 출력된 윈도우를 지정할 수 있음

_blank 새 윈도우
_self 현재 윈도우
_parent 부모 윈도우
_top 브라우저 윈도우

 

<img>

: 이미지를 출력하는 태그

<img src = "image.jpg" alt = "이미지">

: alt 속성은 이미지를 불러오지 못했을 때 대체해서 화면에 출력하도록 하는 요소이다.

 

 

<ul><li>

: 순서가 없는 목록

  • 예시1
  • 예시2
  • 예시3
<ul>
<li>예시1</li>
<li>예시2</li>
<li>예시3</li>
</ul>

 

<ol><li>

: 순서가 있는 목록

: type과 start 속성을 지정하여 순서 스타일을 변경할 수 있지만 CSS로 바꾸는 것을 추천

 

+) type: "1", "A", "a" 등 마커 종류를 바꿀 때 사용.

    start: 마커의 시작 값을 설정.(숫자에만 적용 가능)

 

  1. 예시1
  2. 예시2
  3. 예시3
<ol>
<li>예시1</li>
<li>예시2</li>
<li>예시3</li>
</ol>

 

<dl><dt><dd>

: 정의 리스트

: 용어, 설명을 하나의 아이템으로 나열하는 리스트

: 용어는 dt, 설명은 dd로 표현

<dl>
	<dt>용어</dt>
  	<dd>설명</dd>
</dl>

 

반응형

'Front-End > HTML' 카테고리의 다른 글

[HTML] id와 class 차이  (0) 2022.11.24
[HTML] 사용자에게 입력받을 수 있는 태그  (0) 2022.11.23
[HTML] HTML 문서 내에서 SVG 이용  (0) 2022.11.23
[HTML] 문서 구조 표현하는 시맨틱 태그  (1) 2022.11.23
[HTML] doctype과 <html><head> 내 작성 태그  (0) 2022.11.23