HTML이란?
웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.
HTML은
HyperText (웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것)
Markup (태그로 이루어짐)
Language
의 약어로 HyperText 기능을 가진 문서를 만드는 언어
HTML 문서의 구조
- 필수적으로
<html>,<head>,<body>,<title>태그를 가지고 있어야 한다 - 확장자가 html 혹은 htm으로 끝난다
- 최상위 태그로
<html>을 사용한다. 그 하위에<head>태그와<body>태그를 컨텐츠로 가지고 있다 <!DOCTYPE html>은 현재 문서가 HTML5 문서임을 명시한다<html>는 HTML 문서의 루트(root) 요소를 정의한다.<head>태그는 문서의 메타데이터(metadata)를 정의함. 문서를 설명하는 태그로 제목이나 키워드와 같은 정보를 담는다.<title>태그는 HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됨
- 웹 브라우저의 툴바(toolbar)에 표시된다
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다
- 검색 엔진의 결과 페이지에 제목으로 표시된다<body>태그에는 웹 브라우저를 통해 보이는 내용(content) 부분
시멘틱 마크업(Semantic Markup)
시멘틱 태그란 마크업 대상 컨텐트가 화면에 표현되는 방식 시각적으로 어떻게 보이는지를 결정하기 위함이 아닌, 해당 컨텐츠에 어떤 의미(역할 또는 목적) 를 부여하기 위해서 사용되는 태그
<div> 태그로만 마크업된 문서는 검색 엔진이 효과적으로 해당 웹페이지를 분석하기 어려워 SEO 측면에서 좋지 않다.
시멘틱 태그를 사용하면 좋은점
- SEO(Search Engine Optimization) 최적화에 유리
- 웹 접근성에 효율적
- 유지보수의 용이성
시멘틱 태그의 종류
<header>: 머리글, 머리말, 제목 영억으로 문서 또는 섹션의 헤더를 나타냄. 이 태그로 마크업된 헤더 영역은 일반적으로 웹사이트의 로고, 이름, 소개글 그리고 메인 메뉴가 위치하게 됨.<nav>: 네비게이션(navigation), 목차, 리스트 등 다른 페이지로의 이동, 탐색을 위한 링크의 집합. 문서 안의 모든 링크가 다 nav 영역에 포함되는 것은 아님<main>: 문서 body의 중심 주제, 주요 내용(content) 또는 응용 프로그램의 중심 기능과 직접 관련되거나 확장되는 콘텐츠. 한 페이지에 한 번만 사용 가능하다<section>: 주제. 어느 한 구역. 제목을 갖고 있으면서 문서 전체와 관련있는 콘텐츠의 집합을 말함. 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화<article>: 문서 본문 중 독립된 컨텐츠. 기사, 블로그, 게시물 등 텍스트 위주의 페이지를 구성할때 주로 사용. section은 여러 개 콘텐츠의 묶음이고 article은 그 자체로 독립적 콘텐츠이다<aside>: 사이드 바라고 불리며 좌측과 우측 사이드 위치의 공간을 의미. 본문 외에 광고 등의 부수적인 내용을 주로 표현하는 태그. 필요하지 않으면 안 써도 상관없음<footer>: 꼬리말 혹은 바닥글로, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그. 주로 화면 제일 아래에 위치해 회사 소개, 약관, 저작권, 사이트나 콘텐츠 작성자나 소유자나 제작자의 정보 등 제작 정보 등을 표시함<address>: 연락처 정보를 표시<hgroup>: 제목과 관련된 부제목을 묶어서 나타내는 태그- 많이 쓰이지 않는 태그들인
<figure>,<figcation>,<mark>,<time>,<summary>도 있음
div
아무런 역할이나 목적이 없이 단순히 컨텐트를 그룹화하는데만 사용됨. css로 시각적 효과를 적용할 때 사용
HTML 문서 작성을 위한 DTD
DTD(Document Type Definition)는 우리말로 문서 형식 정의. 브라우저에게 '이 문서가 어떤 문서 형식을 따르고 있다'라고 알려주는 것으로, 랜더링 모드를 지정해주고 유효성 검증기(Validator)의 기준이 되므로 HTML 문서의 상단에 반드시 선언해줘야함
참고
생활코딩 - DTD(Doctype)
[ HTML ] DTD(Document Type Definition) 란?
주요 태그들
제목
heading <h1>~<h6>
- 웹페이지의 정보를 계층별로 구조화하는 기능을 담당함
<h1>은 해당 웹페이지의 최상위 계층의 제목을 마크업하기 위해서 사용됨- 제목 단계를 건너뛰는 것을 피하기. 언제나
<h1>로 시작해서,<h2>, 순차적으로 기입 - 페이지 당 하나의
<h1>만 사용하기. 오류는 나지 않지만 모범 사례로 꼽힘 - 기본적으로 볼드체가 적용되며, 태그의 숫자가 커질수록 제목 글자의 사이즈는 작아짐
단락
paragraph <p>
목록
순서가 없는 목록 <ul>
순서가 있는 목록 <ol>
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>테이블
<table>
<tr>
<td>1행1열</td>
<td>1행2열</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table>사용자의 입력과 관련
img
block, inline 요소
cookie, Web Storage(sessionStorage, localStorage)
Cookies
- 작지만 강력
쿠키는 웹사이트에 의해 유저의 컴퓨터에 놓이는 작은 텍스트 파일들로, 최대 4KB의 용량을 가진 매우 작은 양의 데이터임. 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용됨. 그리고 문자열만 저장할 수 있다는 제한이 있음
Cookies는 두 가지 유형이 있음. 바로 persistent cookies와 session cookies
Session cookies는 만료일을 포함하지 않음. 대신 브라우저나 탭이 열려있는 동안에만 저장되며 닫히면 영구적으로 삭제됨 (은행 유저들의 자격 증명을 저장)
Persistent cookies는 만료일을 가짐. 이 쿠키는 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제됨 (유저 경험을 위해 행동을 기록)
Web Storage
서버가 아닌, 클라이언트에서 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능
Local Storage
- 더욱 영구적인 솔루션
HTML5가 나온 이후, cookies의 많은 사용 방법들은 LocalStorage의 사용으로 대체됨. 가장 중요한 차이점 중 하나는 쿠키와 달리 모든 HTTP 요청에서 데이터를 주고받지 않고 클라언트와 서버 간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있음. 그리고 최대 5MB의 정보를 저장 가능
만료 조건은 persistent cookies처럼 동작함. JavaScript 코드를 통해 삭제하지 않으면 데이터는 자동으로 삭제되지 않으므로 더 오랜 시간 동안 저장해야 하는 큰 데이터에 유용함. 문자열뿐만 아니라 javascript의 primitives와 object도 저장할 수 있음
로컬 스토리지를 잘 사용하려면 이 상황에 저장된 데이터의 위협 수준이 매우 낮아야 함. 쉽게 해킹되지 않도록 저장된 데이터를 암호화하는 등의 보안 작업이 필요. 재무 정보와 같은 매우 취약한 데이터는 로컬스토리지를 사용해 제대로 저장하거나 보호할 수 없음
Session Storage
localStorage에 비해 자주 사용되진 않음. 각 세션마다 데이터가 개별적으로 저장됨. 현재 떠 있는 탭 내에서만 유지되므로 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없음
- 옐님
쿠키는 사용자가 어떤 웹사이트를 방문할 경우 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫습니다. 정보를 유지하지 않는 Stateless 성격을 가진 HTTP의 단점을 해결하기 위해 쿠키가 도입되었습니다. 이 쿠키 정보를 기록하여 동일한 서버에 재요청 시 저장된 쿠키 정보를 같이 전송합니다. 하지만 쿠키는 공개된 정보로 보안에 취약하여 개인 정보나 보안상 중요한 정보를 담기에는 적합하지 않습니다. 이러한 보안상의 이유로 HTML5부터 쿠키 대신 웹 스토리지를 사용하는 곳도 있습니다.
웹 스토리지는 사용자 측에 이름:값 쌍의 데이터를 저장하는 두 가지 메커니즘을 의미합니다. 첫 번째는 로컬스토리지, 두 번째는 세션스토리지 입니다. 웹 스토리지의 데이터는 쿠키와 다르게 HTTP 헤더를 통한 조작이 불가능하며 서버로 전송되지 않습니다. 로컬스토리지는 컴퓨터를 종료하거나 브라우저를 종료하더라도 지속되며, 세션 스토리지는 페이지가 열려 있는 동안이나 페이지 리로딩 혹은 복원 시에는 데이터가 유지되지만 다른 세션이나 창이 종료될 경우 데이터에 접근할 수 없습니다.
쿠키와 웹스토리지의 큰 차이점 중 하나는 쿠키의 경우 서버와 클라이언트 측 모두 데이터를 읽을 수 있지만, 웹스토리지는 클라이언트 측에서만 데이터를 읽을 수 있습니다.
참고
생활코딩 - HTML이란?
HTML 기본 구조
[HTML] 시멘틱 마크업
[HTML5] 시멘틱 태그(sementic tag)
#1 HTML 이란 무엇인가?
HTML 기본 지식
HTML 태그 모음 & 요약정리
참고하기
#1. 웹 브라우저 & HTML
프론트엔드 면접 질문 정리 ① HTML 질문
[프론트엔드 면접 준비] 링크 모음집!
프론트엔드 개발자가 되기위해 알아야할 기초지식
신입 프론트엔드 개발자가 되려면 무엇을 학습해야 하나요?
HTML5-기본 & 중요 필수지식
