javaboiii의 Web/Web 요약정리(HTML5&CSS3그리고JS)

Web -3) 문서를 구조화하는 HTML

javaboiii 2024. 8. 5. 20:13

Web

1. HTML 개요 및 기본 태그

HTML은 마크업 언어(Markup Language)로 웹 문서를 작성하며, 태그를 사용해서 문서의 구조등을 기술하는 언어

태그 설명
<!DOCTYPE> 현재의 문서를 HTML 문서로 선언
<html> </html> <html>와 </html> 사이에 html 문서를 작성
<head> </head> <head>와 </head> 사이에 인코딩, 키워드, 뷰포트 등의 문서에 대한 정보를 제공
<title> </title> <title>와 </title> 사이에는 문서의 제목을 씀
<body> </body> <body>와 </body> 사이에는 화면에 표시되는 문서의 내용을 씀

html에는 더 많은 태그들이 있고 일반적으로 한쌍으로 기술하지만 단독으로 사용하는 단독 태그도 있다.

<태그이름>내용</태그이름> 앞 태그를 시작 태그 뒤 태그를 종료 태그라고 부른다.

 

태그에는 어느 태그에나 넣어서 사용할 수 있는 글로벌 속성이 있다.

글로벌 속성 설명
class 태그에 적용할 스타일 이름 지정
dir 내용이 텍스트 방향을 지정 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 등과
같이 사용되어 왼쪽 맞춤, 오른쪽 맞춤과 유사한 형태로 표현
id 태그에 유일한 ID를 부여함 자바스크립트 제어에서 주로 사용
style 인라인 스타일시트를 적용하기 위해 사용

 

문서의 영역 구조를 표현한 태그들

태그 설명
<header> 사이트의 소개나 내비게이션 등을 표시
<nav> 사이트의 내비게이션(메뉴) 항목을 표시, 주로 <header> 태그에 넣어서 사용
<article> 문서의 내용(글)을 표시하는 태그로, 주로 블로그의 글이나 기사와 같이 독립적인 콘텐츠를 표시
<section> 문서의 내용을 표시하는 태그로, 주로 문서의 영역적인 의미로 사용됨
문서의 내용을 표시할때 <article>, <section>, <div> 중 아무거나 사용해도 됨
<aside> 본문의 내용과 독립적인 내용(주로 광고나 부 메뉴 등)인 사이드바 콘텐츠를 표시
<footer> 사이트의 제작자, 주소, 저작권 정보 등을 주로 표

 

이 외에도 정말 많은 태그와 속성들이 있지만

구글링과 유튭을 잘 활용하면 외우지 않아도 손쉽게 HTML 태그들을 사용할 수 있다