Frontend

[한 눈에 끝내는 HTML5/CSS3] HTML 기초 태그 정리

HTML, CSS, Javascript를 항상 배우고 나서 정리를 하지 않아 자주 잊어버리곤 했습니다. 그래서 이번 기회에 블로그에 정리하면서 머릿속에 새겨보도록 하겠습니다. [한 눈에 끝내는 HTML5/CSS3] 내용과 더불어 실제로 코드를 작성하다가 새로운 부분이 생긴다면 지속적으로 업데이트 하도록 해보겠습니다.

1. HTML 기초

- HTML(Hypertext Markup Language) : 컨텐츠의 구조를 정의하는 마크업언어로, 컨텐츠(내용)에 태그(마크)를 씌어 구조를 구분하여 정의함.

- HTML요소 : 시작태그와 종료태그, 컨텐츠로 구성

<시작태그> 컨텐츠 </종료태그>

- 컨텐츠마다 앞뒤로 시작 태그와 종료 태그가 작성되어 있어 각 컨텐츠가 어떤 역할을 수행하는지 구분 가능.

<!--제목-->
<h1>바로 실행해보면서 배우는 HTML5/CSS3</h1>
<!--부제목-->
<h2>쉽고 빠르게 배우는 HTML5와 CSS3</h2> 
<!--내용-->
<p>HTML5와 CSS3의 필수 개념과 실습까지</p>

1-1. 기본적인 HTML 문서 구조

- HTML은 기본적으로 다음과 같은 문서 구조를 가짐.

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>구름EDU</title>
	</head>
	<body>
		<h1>바로 실행해보면서 배우는 HTML/CSS</h1>
		<p>HTML과 CSS에 대해서 배워봅시다!</p>
	</body>
</html>

- <!DOCTYPE html> : 문서형식을 정의할 때 사용하는 문장으로 HTML5문서형식 정의를 의미함.

- <html lang="ko">

전체 HTML문서를 감싸는 태그. 단 한 번만 사용 가능! => <html>태그 바깥에는 다른 태그가 존재할 수 없음.
lang="ko"는 주 언어가 한국어라는 것을 명시!

2. Head와 Body

- <html>태그 안에는 크게 <head>태그와 <body>태그가 존재! 그리고 각 태그 안에 여러가지 태그를 배치하여 문서를 구성 가능.

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>구름EDU</title>
	</head>
	<body>
		<h1>한 눈에 끝내는 HTML5/CSS3</h1>
		<p>HTML과 CSS에 대해서 배워봅시다!</p>
	</body>
</html>

2-1. <head>태그

- HTML문서에 대한 정보를 담고 있는 태그 => 일반 사용자는 웹 사이트에서 <head>태그에 속한 정보를 볼 수 없음.

- HTML 문서 안에 단 하나만 존재할 수 있고 <html> 태그 바로 아래에 위치

- <head>태그 안에 담을 수 있는 대표적인 태그들

태그명	역할
<meta>	문서와 관련된 정보를 담는 태그, 해당 태그에 담긴 다양한 정보는 브라우저만 읽기 가능. 위은 HTML 문서에서 한글을 사용할 수 있음을 브라우저에 전달!
<title>	웹 페이지의 제목을 담는 태그. 브라우저에서 탭의 제목이나 즐겨찾기 했을 경우 이름으로 볼 수 있음.
<link>	해당 HTML 문서와 외부 소스 사이의 관계를 정의할 때 사용. css파일이나 js파일을 로드할 수 있음.
<script>	자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용. 태그 뿐만아니라 태그에서도 사용가능하며 <body>태그에 사용하는 것이 더욱 효과적! (그 이유는 HTML문서는 브라우저가 위에서 아래로 로드하기 때문에 너무 많은 <script>태그들이 태그에 있으면 웹 페이지 작동이 간혹 느려지기 때문.)

2-1-1. <meta>태그

- 웹페이지에 대해 구조적인 메타데이터를 제공하기 위한 HTML, XHTML의 <meta ...> 형태의 태그

- 검색엔진최적화에 도움을 주는 태그

- meta 태그에서 name속성에 따라 역할이 다름. 아래의 코드는 해당 웹페이지의 메인 키워드들을 나타낸 것.

<meta name="keywords" content="galaxy, s8, 스마트폰, 삼성폰"/>

name 속성	역할
keywords	해당 웹페이지의 메인 키워드를 나열해 검색엔진최적화를 돕는다. but 해당 페이지와 상관없는 keyword를 작성할 시 어뷰징이기 때문에 웹페이지의 품질이 안좋아질 수 있으니 주의할 것.
description	해당 웹페이지를 설명해 검색엔진최적화를 도움.
robots	네이버, 구글, 다음과 같은 검색포털의 크롤러가 해당 웹페이지를 indexing을 해도되는지 안되는지를 설정(content=index,follow, all, noindex, nofollow, none) / but 권고사항이기 때문에 이를 명시해도 크롤링이 되기도하고 되지않을 수도 있음.
viewport	해당 웹페이지의 화면 넓이 설정(content="device-width, initial-scale=1")

2-2. <body>태그

- body 태그 내부에 있는 시멘틱(Semantic : "의미론적") 태그들의 종류와 역할

태그명	역할
<header>	웹 페이지 혹은 <section>의 소개나 제목을 담기 위해 사용하는 요소. <head>태그와는 다름.
<nav>	내비게이션 역할 수행하는 요소. 페이지 이동을 위한 메뉴를 주로 담고 있음.
<section>	기준에 따라 구획을 구분하기 위해 사용하는 요소. 기준에 맞는 <article>들을 담고 있음.
<article>	주 내용을 담기 위해 사용하는 요소
<aside>	광고 또는 사이트의 주변 부분에 해당하는 내용을 담기 위해 사용하는 요소
<footer>	일반적으로 웹 사이트의 가장 아래에 들어가는 회사 정보나 사이트 정보 등의 추가 정보를 담기 위해 사용하는 요소

저작자표시 비영리 변경금지

Contents

당신이 좋아할만한 콘텐츠

CSS 총정리 2022.03.20

새소식