본문 바로가기
Cording/HTML & CSS

[HTML / CSS] 기본 HTML 태그 정리

by €€£¥ 2019. 12. 15.

 

<!DOCTYPE> 선언

 - HTML 5(최신)를 사용해서 문서를 작성하겠다는 선언의 개념

 - HTML 파일 시작에 아래와 같이 입력

<!DOCTYPE html>

 

 

<title> 태그

 - 페이지 제목을 설정해주는 태그

 - 브라우저 탭이나 방문 기록에 나와있는 제목을 설정

 

<title> Samla's Web Site</title>

 

 

<h1>~<h6> 태그

 - 머릿말(본문 내 제목) 설정 태그

 - <h1>에서 부터 순서대로 의미상 크기상으로 작아진다.

 - 단순히 폰트 크기의 설정이 아닌 문서 내 제목 혹은 소제목으로써 의미를 갖게 한다.

 

<h1>머릿말 1</h1>
<h2>머릿말 2</h2>
<h3>머릿말 3</h3>
<h4>머릿말 4</h4>
<h5>머릿말 5</h5>
<h6>머릿말 6</h6>

 

 

<p> 태그

 - 문단 구분 태그

 - 문단의 시작과 끝을 구분할 때 사용

 - 문단관 문단 사이에는 기본적인 약간의 여백이 있음.

 

<p>태산이 높다 하되 하늘 아래 뫼이로다. 오르고 또 오르면 못 오를 리 없건마는 사람이 제 아니 오르고 뫼를 높다 하는구나.</p>
<p>A good plan, violently executed now, is better than a perfect plan next week.</p>

 

 

<b> 태그

 - 폰트를 굵게(bold) 만드는 태그

 

<p> 폰트를 <b>굵게</b> 만들어 줍니다.</p>

 

<strong> 태그

 - 폰트를 시각적 + 의미적으로 굵게 만들어 주는 태그

 - 시각적 + 의미적으로 강조해주는 태그

 

<p> 폰트를 <strong>시각적 + 의미적으로 강조</strong> 합니다.</p>

 

<i> 태그

 - 폰트를 기울게(italic) 만드는 태그

 

<p> 폰트를 <i>기울게</i> 만들어 줍니다.</p>

 

<em> 태그

 - <i> 태그와 같이 폰트를 기울여주지면 의미적으로도 강조해주는 태그

 - em -> emphasized의 줄임

 

<p> 폰트를 <em>시각적 + 의미적으로 강조</em> 합니다.</p>

댓글