대략적인 기본 개념만 정리한 글
HTML
HTML은 웹 컨텐츠의 구조와 의미를 결정하며, 표준화 된 마크업 언어를 사용한다.
- HTML 없이 웹사이트를 만들 수 없음
- 마크업 언어: 일반적인 텍스트와 문법적으로 구분하기 위해 태그 등을 이용하여 문서나 데이터의 정보를 구조적으로 표현 가능한 언어
Tag & Element
- Tag: 열고 닫는 꺽쇠 괄호로 구성
- 내용(Content): 요소의 내용이며, 단순한 텍스트로 구성
- 요소(Element): 태그와 내용을 통틀어 요소 라고 한다.
// HTML 태그는 대소문자를 구분하지 않지만, HTML5 표준 명세에서는 태그와 태그 안에 사용하는 속성들은 모두 소문자로 사용할 것을 권장한다.
Attribute
요소의 성질과 특징을 정의하는 명세이며 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있다.
- 속성을 이용하면 나중에 해당 요소를 특정하여 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있다.
HTML 문서의 구성 요소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
기본 구조
</body>
</html>를 입력하세요<!DOCTYPE html> 해당 문서는 html5 문법이 적용 된 문서임을 명시
<html lang="ko"> html 파일의 최상위에 있는 태그이며 웹 문서의 시작을 알린다.
- 검색 결과를 '한국어로 된 문서'로 범위를 제한 할 경우
<html lang="ko">으로 된 문서를 우선 검색함
<head> 사용자에게 보여지는 UI요소가 아닌 메타 데이터를 정의한다.
<meta charset="UTF-8"> html 문서의 문자 인코딩 설정을 UTF-8로 지정
<title> 브라우저 검색이나 북마크 추가 시 보여지는 문서의 제목
<body> 실제 브라우저에 표시되는 내용이며 페이지에 표시되는 모든 콘텐츠가 포함된다.
Sementic 요소
‼️
<div>는 의미가 없는 non-sementic 요소이다.
<header> 소개 및 탐색에 도움을 주는 콘텐츠
- 제목, 로고, 검색 폼, 작성자 이름 등의 요소 포함
<nav> 다른 페이지로의 링크를 모아둔 네비게이션 메뉴
<aside> 본문 이외의 별도 콘텐츠
<main> <body> 의 주요 콘텐츠
<main>요소의 컨텐츠는 문서의 유일한 내용이어야 하며 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해서 안됨
<article> 주로 독립적이거나 재사용 가능한 컨텐츠에 사용
- 뉴스, 기사, 매거진, 블로그 글 등
<section> 연결성 있는 컨텐츠의 집합
<footer> 문서 제작 정보와 저작권 정보가 담긴 영역
Block level & Inline Level
같은 모양의 노란 박스를 분홍 박스 옆에 배치 하려고 할 때, 노란 박스가 block 레벨인지 inline 레벨인지에 따라서 배치구조가 달라진다.
Block level
항상 새로운 줄에서 시작하며 사용 가능한 전체 너비를 차지한다.
- 제목, 단락, 목록, 탐색 메뉴 또는 바닥글을 나타낼 수 있다.
- block-level 요소는 상단 및 하단 여백을 가진다.
- 일반적인 block, inline 레벨 등을 모두 포함할 수 있다.
→ 블록 레벨 요소는 인라인 요소보다 더 큰 구조를 생성 할 수 있음
예시) <div>
Inline level
새로운 줄을 만들지 않으며 필요한 너비만 차지한다.
- 문서 흐름에서 줄바꿈을 강제하지 않는다.
- 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없다.
! html5 에서 생긴 한가지 예외
-><a>는 인라인 레벨 요소지만 블록 레벨 요소를 가질 수 있다.
예시) <span>
참고 사이트 & 강의
https://developer.mozilla.org/en-US/docs/Web/HTML
https://poiemaweb.com/html5-syntax
https://youtu.be/i0FN-OwJ7QI
https://youtu.be/OoA70D2TE0A
