본문 바로가기
Development/Frontend

[HTML] HTML 태그

by Skills 2021. 3. 4.

※ 학교 수업시간에 배우는 정보처리산업기사 정리하기!

 

* 많이 사용하는 HTML 태그

이미지 출처 : https://www.advancedwebranking.com/html/

 

* HTML Tag

컴퓨터가 인식하는 HTML 명령어이다. <> 이 꺾쇠를 HTML 태그라고 한다.

 

* HTML 기본 태그
<!DOCTYPE html>
Document Type의 줄임말 웹 페이지가 HTML5문서임을 알리는 명령어이다.

<html>..</html>
HTML 문서의 시작과 끝을 의미한다.

<head>..</head>
스타일과 스크립트를 선언하는 부분이다. (머릿말 / ex. 주소창)

<body>..</body>
사용자에게 보여주는 실제 내용이 구현되는 부분이다. (본문 / ex. 뉴스등과 같은 내용들)

* head 태그 종류
<title>..</title>
브라우저의 제목 (ex. 탭 이름, 북마크)

<meta>
정수형 변수는 int a=5; 이런식으로 선언하듯이 HTML에서도 동일하게 속성값을 정해준다.
ex) <meta charset="UTF-8"> 한글이 깨지지 않도록 인코딩 UTF-8을 선언해준다.

* body 태그 종류
<h1>..</h1>
h 태그는 글씨도 커지고 줄바꿈도 된다. (중요한 제목에 사용)
h1 ~ h6까지 있는데 1이 크기가 제일 크고 숫자가 내려갈수록 작아짐

<p>..</p>
paragraph의 약자로 줄바꿈 할 때 쓰는 태그이다. (위 아래 공백이 생김)

<br>
닫는 태그가 없음 얘는 공백 없이 엔터키 하는 역할을 한다.

<img>
그림의 위치를 나타내는 태그 <img src="">이게 기본 틀이다.

ex) <img srv="cat1.jpg"> 이런식으로 그림의 위치를 넣으면 끝

ex) 추가 옵션으로 <img src="사진위치" width="" height=""> 크기와 높이를 정해줄 수 있음 (보통 CSS에서 설정한다.)

 

<a>

하이퍼링크를 걸어준다. <a href="">이게 기본 틀이다.

ex) <a href="http://www.naver.com"> 이렇게 하이퍼링크를 걸어줄 수 있다.

ex) <a href="http://www.naver.com" target="_blank"> 타겟 blank를 설정해서 새 탭으로 naver.com을 시작할 수 있다.

 

<hr>

주제를 분리하기 위한 용도로 수평선을 그린다.

ex) <hr width="500"> 수평선 너비를 500만큼으로 지정해줄 수 있다.

ex) <hr align="left" width="500"> 수평선 너비를 500만큼 위치는 왼쪽으로 지정해줄 수 있다.

 

* HTML 완성 코드

728x90

'Development > Frontend' 카테고리의 다른 글

[JavaScript] 호이스팅  (0) 2022.03.29
[JavaScript] 스코프  (0) 2022.03.29
[jQuery] attr()과 prop()의 차이  (0) 2022.03.29
[JavaScript] Function  (0) 2022.02.18
[JavaScript] Variables  (0) 2022.02.10

댓글