본문 바로가기
HTML & CSS

[HTML & CCS] HTML태그 종류와 특징, H태그 검색엔진 최적화 메타 태그 시멘틱 태그

by B_E_D 2023. 4. 12.

1. 웹이란?

 

1) 네트워크

- 컴퓨터와 컴퓨터를 연결해주는 망을 말한다.

- 이런 망들이 모여서 더 큰 네트워크인 인터넷이 된다.

 

2) 인터넷 시초

- ARPANET

 

3) 웹

- World Wide Web (WWW, W3)

- 인터넷에 연결된 사용자들이 서로 정보(텍스트, 이미지, 영상, 소리 등)를 공유할 수 있는 서비스를 말한다.

 

4) 웹 서비스

- 웹 (WWW, 통신 프로토콜 - http/https)

- 이메일 (Email, 통신 프로토콜 - STMP/POP3/IMAP)

- 파일전송 (FTP, 통신 프로토콜 - FTP/SFTP)

 

5) 웹 페이지란?

- 하이퍼텍스트라는 특별한 양식으로 제공하는 웹 문서이다.

  

6) 웹의 동작

- 클라이언트와 서버 사이를 오가며 동작한다.

- 클라이언트가 요청(request)을 하고 서버는 응답(response)을 한다.

- HTTP 통신 규약을 이용한다.

- 실어 나르는 대상인 문서는 하이퍼텍스트 양식으롷 되어 있다.

- 하이퍼텍스트는 HTML이라는 마크업 언어를 사용해서 작성한다.

 

7) HTML (HyperText Markup Language)

- 하이퍼텍스트를 마크업하는 언어를 말한다.

- 하이퍼텍스트는 참조를 통해서 하나의 문서에서 다른 문서로 접근할 수 있는 텍스트이다.(하이퍼링크)

- 마크는 표시의미로 표시하는 언어이다.

 

8) HTML 기본 구조

- <!DOCTYPE html> : 선언으로 시작한다. html의 가장 최신 버전인 html5를 사용한다고 알려주는 것이다.

- <head> 태그 : 페이지에 표시 되지 않는다. 그 대신에 페이지 정보(메타 데이터)를 제공한다.

- <meta> 태그

<meta charset="UTF-8"> : 문서에서 허용되는 문자 표시이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 : viweport : 요소를 볼 수 있는 화면을 말한다.
content : "width=device-width, initial-scale=1.0" = 개인마다 갖고 있는 기기 화면에 맞춘다.

- <title> 태그 : html 문서 제목을 표현한 것이다.

검색엔진 최적화



2. 태그 (Tag)

 

1) 꼬리표

2) HTML에서는 웹 문서에 정보를 정의해주는 형식이다.

3) <>는 시작을 알리고, </>는 끝을 알려준다.



3. Visual Studio Code 확장 프로그램

 

1) Auto Close Tag

2) Live Server

3) Material Icon Theme

4) Prettier - Code formatter

 

 

4. 태그 이해하기

 

1) <태그명> 요소 </태그명>

2) <태그명 요소 > : 닫는 태그가 없는 형태, 자체 닫기 태그(self closing tag). ex) img, input, link 등

3) 작성태그

h : 제목태그
br : 줄바꿈
p : 문단 지정
div : 영역 지정
span : 범위 지정
link : 현재 문서와 외부 소스를 연결해주는 태그
img : 이미지를 나타내는 태그
form : 폼(입력 양식)을 만드는 태그
button : 버튼을 만드는 태그
ol, ul, li : 리스트를 나타내는 태그

 

4) h 태그

- heading

- 제목을 나타낸다.

- 검색 엔진이 h태그에 기반하여 결과물을 보여준다. 검색되고 싶은 키워드가 있다면 h 태그에 넣으면 좋다.

- 자동으로 줄이 바뀐다.

- 숫자가 커질수록 글자크가기 작아진다.

- html 한 페이지에서 h1 태그는 한번만 사용한다.

  

5) br, p 태그

6) div 태그

7) link 태그 : 현재 파일이 다른 파일과 연결되어 있는 관계 정보를 표현하는데 사용한다. 

<link rel = "속성값" href="파일 경로"> => <link rel ="stylesheet" href="style.css">
- rel : relations
- href : hyper-references

 

8) img 태그

- image

- 이미지를 삽입하는 태그이다.

<img src="경로" alt="설명" width="폭" height="높이">
- src : 이미지 경로
- alt(alternative) : 이미지를 설명하는 문구
- width : 이미지 가로 크기
- height : 이미지 세로 크기

 

9) form 태그

- 사용 시 입력 양식을 만들 때 사용한다.

- input, label 등과 같이 많이 쓰인다.

<form>form 요소 태그</form>

<label> : 상품에 스티커 라벨을 붙이듯이 폼에 이름을 붙여주는 것이다.

- for : label이 설명하는 input 등의 id를 지정한다.

 

action : form 태그의 input태그 type 속성을 "submit"으로 준다. 제출 버튼을 눌렀을 때 입력값을 처리할 대상을 지정해준다.(이동하라고 지정함.)

 

id : 이름의 지정해주는 역할

 

type : input태그의 속성을 결정한다.

- text : 텍스트입력
- checkbox : 체크박스
- password : 패스워드
- date : 날짜

 

10) button 태그

- 클릭할 버튼을 만들 때 사용한다.

- button : 누를 수 있는 버튼
- submit : form을 제출하는 버튼
- reset : form 입력 값을 초기화하는 버튼

 

11) 리스트 태그 : ol, ul

- ol (ordered list) : 순서가 있는 리스트를 만들 때
- ul (unordered list) : 순서가 없는 리스트를 만들 때
- li (list item) : 목록을 구성하는 개별 항목(아이템)

 

5. HTML 특징



1) 태그의 부모 자식 관계가 있다.

2) HTML과 검색되는 텍스트를 만들 필요가 있다.

3) 검색 엔진 최적화

 

- 검색 엔진

- 여러 웹 사이트나 웹 페이지 등을 검색해주는 시스템이나 프로그램 등을 통칭한다.
- 웹에서 원하는 정보를 찾는데 걸리는 시간을 최소화해준다.

 

- 메타 태그        

- 검색 엔진에 정보를 제공할 목적의 태그
- head 태그에는 메타 데이터가 들어가고 이 메타 데이터는 추후에 검색 엔진이 웹 페이지를 읽을 때 사용된다.

 

- 시멘틱 태그 : 웹 페이지 구조를 구성하는 태그이고, 검색 엔진 봇이 읽을 수 있는 문서 구조를 작성하는 데 사용한다.

<header></header> : 소개 요소 또는 탐색 링크를 나타낸다.
<nav></nav> : 주로 메뉴를 구현한다.
<section></section> : 본문 내용을 포함하는 공간이다.
<article></article> : 독립적 요소이다.
<aside></aside> : 사이드바처럼 좌우에 위치하는 공간이다.
<footer></footer> : 문서 하단을 정의한다.

 

- 비 시멘틱 태그 : 요소에 대하여 어떤 설명도 하지 않는 태그 (div, span)

 

댓글