기본부터 정리
개발환경이 갖춰져 있다는 조건으로 정리 시작
HTML이란
HTML, 혹은 하이퍼텍스트 마크업 언어는 웹페이지의 구조를 정의하는 웹을 위한 마크업 언어.
VSCode에서 확장자 .html인 파일안에서 !입력하면
Emmet이 나옴. Emmet은 HTML 및 CSS 등의 다양한 파일 종류에 유용한 코드 단축키
엔터 쳐주면 HTML 기본구조가 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>html을 뜯어보자
기본 문법
html 개발자라고 하면 "html은 개발 언어가 아니야"라고 하는 사람들이 있지만 언어이긴하다.
그러므로 문법이 있다.
태크(요소)
웹페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등 매우 다양. 태그는 웹사이트를 이루는 뼈대에 요소이며 HTML에서 가장 작은 단위. 기본 형식은 다음과 같이 홑화살괄호(<>) 사이에 태그명을 넣어줘야함.
<tag>속성(Atributte)
태그안에 의미나 기능 등을 부여하는 역할. 태그 없이는 사용 못하며 속성명과 속성값으로 구성됨
<tag 속성명="속성값">문법
콘텐츠가 있는 문법
<tag>Hello World!</tag>
<!-- <시작 tag> 컨텐츠 </종료 tag> -->콘텐츠가 없는 문법 <tag />
- br 태그 <- HTML5부터
<br>을 권장하지만React나Vue등 라이브러리의 등장으로<tag />를 보편적으로 사용 - meta 태그
- link 태그 등등
주석
주석(comment)은 실행결과(웹 브라우저)에는 표시되지 않지만, 코드에 어떠한 메모나 설명을 남기고 싶을 때 사용
<!-- 주석 내용 -->웹 요소(태그)
DTD(Document Type Definition)
문서형 정의(DTD, Documen Type Definition)는 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려 주는 것. HTML 문서를 작성할 때 항상 처음에 삽입.
DTD 파고 들기
DTD(!DOCTYPE = 홑화살표괄호)
과거에 사용되던 DTD(Document Type Definition)에는 몇 가지 주요 종류가 있으며,
HTML과 XML 문서에서 유효성을 검증하기 위해 사용.주로 HTML 4.x와 XHTML 문서에서 DTD가 사용되었고, 각각의 DTD는 문서가 따르는 규칙에 따라 몇 가지 버전으로 나뉨.
<!DOCTYPE html> <!-- DTD(Document Type Definition --->head 태그
head 태그는 HTML 문서의 메타데이터(metadata)를 정의하는 영역. 메타데이터란 HTML 문서에 대한 정보(data)로, 웹 브라우저에는 직접 노출되지 않습니다. 보통 meta, title, link, style, script 등의 태그를 사용해 HTML 문서의 여러 정보를 정의.
title 태그
웹 페이지의 제목을 지정할 때 사용.
body 태그
body 태그는 웹 브라우저에 노출되는 내용을 작성하는 영역. 따라서 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성.
Heading
h1은 문서 당 1개씩만 사용 ← 중요⭐️
블로그 프로젝트 진행 중 에디터는 보통 마크업 또는 마크다운 에디터를 사용한다. 그로인하여 블로그 컨텐츠에 경우 블로그 글 안에 h1 요소가 들어갈 수 있다. 그렇다면 여기서 문제는 블로그 컨텐츠(contents)에 h1이 있다면 h1이 마크업 될 것이고 블로그 자체에도 h1 요소가 있다면 블로그 글을 볼 수 있는 뷰어(Viewer) 페이지에 경우 한 페이지에서 두개 이상의 h1이 있을 수도 있다는 문제가 있다. 이에 대해 질문하니 수코딩님께서
"한 페이지에서 두개 이상의 h1이 나오면 개발자의 역량이 부족하다고 느껴진다.
뷰어 페이지라면 그에 맞게 화면을 설계하는 것도 개발자로서 신경써야할 부분이라고 생각된다."
뭔가 개발자로서 멋진 말인 것 같아서 적어봤다.
hN의 N 순서는 중요함 (1~2 없이 3이 나오면 안됨) ← 문서에 N 순서대로 있다면 문서 순서는 중요하지 않음 (h3,h2 ←X, h3,h2,h1 ← O)
Paragraph, 문단(문장)
blockquote - 인용구
안에 반드시 p 태그
cite라는 태그를 사용하거나 cite라는 속성을 사용
<!-- 태그 -->
<blockquote>
<cite>https://example.com</cite>
<!-- 참조가 많으면 아래로 추가 -->
</blockquote>
<!-- 속성 -->
<blockquote cite="https://example.com">
</blockquote>일부 인용구 ← ex) p태그 안에 짧은 인용구에 경우 q태그로 감쌈
ins(새로 추가된 텍스트), del(기존에 있었던 텍스트가 삭제)
sub(아랫첨자), sup(윗첨자)
sub ← 원소 기호등
sup ← 제곱 등 위에 쓸때
Div, Span ← 공간 분할
div ← 블록 요소 분할
span ← 인라인 요소 분할
HTML에 암묵적인 룰
부모와 자식의 들여쓰기 철저하게 하기
