[HTML] html 기초 태그 정리

Recent Posts

Recent Comments

Tags more

Today

Total

관리 메뉴

👩🏻‍💻

[HTML] html 기초 태그 정리 본문

WEB/HTML & CSS

[HTML] html 기초 태그 정리

tskyoi 2020. 4. 30. 05:40

html 코드의 기본 구조

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title></title>
  </head>
  <body>
 
  </body>
</html>

<!DOCTYPE html> : 이 웹페이지가 html로 만들어졌다는 것을 표현

1. html : html 코드 전체를 둘러쌈

2. head : 본문을 설명

3. body : 본문

head 태그 안에 위치하는 태그

1. meta : 문서에 대한 metadata를 제공

charset, name, content 등의 속성을 가짐

닫는 태그가 없음

2. title : 문서 제목 지정

웹브라우저의 탭에 표시되는 제목을 태그 안의 내용으로 바꿈

3. style : css를 이용한 스타일 지정

<style>
  a {
  	color : red;
  }
</style>

body 태그 안에 위치하는 태그

1. strong : 강조

<strong>강조할 문구</strong>

2. u : 밑줄 (underline)

<u>밑줄 칠 문구</u>

3. h1~h6 : 제목

숫자가 커질수록 글자가 작아짐

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

4. p : 단락 나누기 (paragraph)

<p>단락 1</p1><p>단락 2</p>

+) 단락 사이의 여백을 조정하기 위해서는 p 태그에 style을 추가

<p style="margin-top:45px;">단락</p>

5. br : 줄바꿈

문장1<br>문장2

+) br 태그는 닫는 태그가 없으며, 단락 사이의 여백을 조정하기 위해서는 태그를 여러 개 붙여서 사용

+) br과 p 태그는 보이는 결과는 같지만 '단락'을 표현하기 위해서는 p 태그를 사용하는 것이 웹페이지를 보다 가치 있게 만드는 선택이 됨

6. li : 리스트 (list)

parent 태그 - ul/ol

> 목록을 다른 목록과 구분

chlid 태그 - li

1) ul (unordered list)

<ul>
	<li>내용 1</li>
	<li>내용 2</li>
	<li>내용 3</li>
</ul>

내용 1
내용 2
내용 3

2) ol (ordered list)

<ol>
	<li>내용 1</li>
	<li>내용 2</li>
	<li>내용 3</li>
</ol>

내용 1
내용 2
내용 3

7. img : 이미지 추가

img 태그에 속성 src(source)="이미지 주소" 추가

<img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60">

이미지 파일이 웹페이지 파일과 같은 위치에 있을 경우, src=이미지 파일 이름 추가

<img src="image.jpg">

8. a : 하이퍼링크 생성(anchor)

a 태그에 href(hypertext reference)="링크할 페이지 주소" 추가

<a href="https://daily-codinglife.tistory.com/">일상코딩</a>

+) 링크를 클릭했을 때 새 창에서 페이지가 열리게 하기 위해서는 a 태그에 target="_blank" 추가

+) 링크가 어떤 내용을 담고 있는지를 툴팁(말풍선)으로 보여주기 위해서는 a 태그에 title 추가

<a href="https://daily-codinglife.tistory.com/" target="_blank" title="blog">일상코딩</a>

일상코딩

9. div

의미를 가지지 않는 태그로, 영역을 설정하여 레이아웃을 적용할 때 주로 사용

<div>첫번째 영역</div>
<div>두번째 영역</div>

10. span

div 태그와 비슷하지만 div 태그는 block 속성, span 태그는 inline 속성을 가짐

따라서 div 태그는 자동으로 줄바꿈이 적용되지만, span 태그는 바로 옆에 이어서 표현됨

+) 주석 태그

<!--
	주석 처리
-->

모든 html 태그의 사용법, 예제가 정리되어 있는 사이트

https://developer.mozilla.org/ko/docs/Web/HTML

HTML: Hypertext Markup Language

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소입니다. HTML은 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 말고도 웹 페이지의 외형과 표현을 서술하고(CSS), 기능과 동

developer.mozilla.org

전 세계의 웹사이트를 분석하여 html 태그 사용 빈도수를 정리한 사이트

https://www.advancedwebranking.com/html/

The average web page from top twenty Google results

Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency:

www.advancedwebranking.com

egoing님의 생활코딩 WEB1 - HTML&Internet 수업을 듣고 정리한 내용입니다.

- 2020/07/15 수정

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

[CSS] 미디어 쿼리를 이용한 반응형 웹 만들기 (0)	2020.06.01
[CSS] 그리드 레이아웃(Grid Layout) (0)	2020.05.23
[CSS] 박스 모델 테두리 만들기 (0)	2020.05.22
[CSS] CSS 선택자 기본 정리 (0)	2020.05.20
[HTML] 웹페이지에 여러 기능을 추가할 수 있는 사이트 정리 (0)	2020.05.13

'WEB/HTML & CSS' Related Articles

Comments

👩🏻‍💻

[HTML] html 기초 태그 정리 본문

[HTML] html 기초 태그 정리

html 코드의 기본 구조

head 태그 안에 위치하는 태그

body 태그 안에 위치하는 태그

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

티스토리툴바