HTML이란?
Hyper Text Markup Language
웹 페이지에서 다른 페이지로 이동할 수 있도록 태그로 이루어짐결론적으로 HTML은 HyperText 기능을 가진 문서를 만드는 언어이다.
HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
</body>
</html>
- <!DOCTYPE html>
- HTML 파일이라면 제일 첫 줄에 위치해야 하는 선언문
- 버전이 HTML5인 html을 사용했다고 브라우저에 알려주는 역할
- <html></html>
- 모든 HTML elements(요소)들은 최상위의 <html\> 태그로 감싸져 있음
- <head></head>
- 사이트의 제목, 설명, 부가 정보, 기술적 내용(ex. 이 사이트는 주로 모바일용인지)이 들어가는 부분
- head 태그에는 style, script, title, link, meta 태그가 들어감
- <meta/>
- 문서의 키워드 또는 설정 등 문서와 관련된 여러가지 항목들을 지정할 때 사용하는 태그
- charset="utf-8
- 그 중 대표적인 항목이 바로 문서의 인코딩 방식을 설정해주는 문자셋(character set) 설정
- 문자셋에 인코딩 방식을 utf-8 방식으로 설정하면, 한글을 비롯한 세상의 모든 언어 표시
- name="viewport" content="width=device-width"
- 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미
- 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상 ㅇ
- <title>repl.it</title>
- 브라우저 탭에 보이는 페이지 이름
- <body></body>
- 항상 head 태그 다음에 위치
- body태그 내부에는 화면에 보여질 각종 태그들이 위치
HTML5
1. HTML5에서 추가된 요소 및 타입
- 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
- 멀티미디어 요소 : <video>, <audio>
- 그래픽 요소 : <canvas>, <svg>
- input 요소의 타입 : number, date, time, calendar, range
2. HTML5에서 추가된 자바스크립트 API
- Geolocation
- Drag and Drop
- Web Storage
- Application Cache
- Web Worker
- Server Sent Events
HTML5의 Semantic Web이란?
Semantic Web 이란 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성하는 것이다.
Semantic Web 을 사용하면 이로운 점이 뭘까?
1. SEO(Search Engine Optimization) 최적화에 유리하다.
2. 시각장애가 있는 사용자가 스크린리더로 탐색할때 의미론적인 마크업을 푯말로 사용할 수 있다. (웹 접근성에 효율적)
3. 의미가 없는 끊임없는 <div>를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 쉽다.
4. 개발자에게 태그 안에 채워질 데이터 유형을 제안할 수 있다.
5. 유지보수의 용이성
Semantic Tags의 종류
1. <header/> : 제목
- 소개 및 탐색에 도움을 주는 콘텐츠
- 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함
2. <nav/>
- 현재의 웹페이지의 상위나 현재 페이지내의 개요
3. <main/> : body 내용 중 핵심 주제 작성
- 하나 이상을 써야 할 경우 주요 콘텐츠 외의 부분은 <hidden>을 사용하여 눈에 보이지않게 해야 한다. (접근성과 관련 있음)
4. <article/> : 다른 웹페이지에 표시하더라도 문제되지 않는 콘텐츠를 담을 때
- 제목을 사용할 땐 <h2> ~ <h3>을 이용
- 여러 <article>을 가질 수 있다
5. <section/> : 독립적인 구획을 나타내며 제목을 가질 수 있음
- <article>과는 다르게 제목요소 (h1~h6)는 필수 ✕
- 전체글의 흐름에서 문맥적으로 호흡이 끊길때 사용
- <article>이 될수있다면, <article>을 쓰고 아니면 <section>을 사용
- 요소의 컨텐츠를 따로 구분해야할 필요가 있다면 <article>을 사용
- 일반 컨테이너로 사용하면 안되며, 단순 스타일링을 위해서라면 <div>를 사용
6. <aside/> : 문서의 주요내용과 간접적인 내용, 주로 사이드바/콜아웃박스로 표현
- 영어의 단어 뜻이나 블로그 류의 추가적인 콘텐츠(광고 등)를 나타날 때 사용
7. <footer/> : 가장 가까운 구획의 콘텐츠나 루트의 푸터를 나타냄
- 모든 웹페이지에 동일하게 들어가며, 전체를 아우르는 링크
- 웹의 맨 하단에 위치
- 웹페이지의 정보, 연관된 사이트를 나타낼 때(구획 작성자, 저작권 정보, 관련문서에 대한 내용)
8. <address/> : 연락처 정보를 표시
9. <hgroup/> : 제목과 관련된 부제목을 묶어서 나타내는 태그
10. 많이 쓰이지 않는 태그 : <figure>, <figcation>, <mark>, <time>, <summary>
cookie와 localStorage
1. Cookies
- 정보를 유지하지 않는 Stateless 성격을 가진 HTTP의 단점을 해결하기 위해 쿠키가 도입
- 쿠키는 웹사이트에 의해 유저의 컴퓨터에 놓이는 작은 텍스트 파일들로, 최대 4KB의 용량
- 문자열만 저장 가능
- ex) 사이트에서 방문한 페이지를 저장, 유저의 로그인 정보를 저장 등
1-1. Cookies의 종류
- Session cookies
- 만료일을 포함하지 않음.
- 대신 브라우저나 탭이 열려있는 동안에만 저장되며 닫히면 영구적으로 삭제
- ex) 은행 유저들의 자격 증명을 저장
- Persistent cookies
- 만료일을 가짐.
- 이 쿠키는 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제
- ex) 유저 경험을 위해 행동을 기록
2. Web Storage
- 서버가 아닌, 클라이언트에서 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능
- 클라이언트 측에서만 데이터를 읽을 수 있음
2-1. Web Storage의 종류
- Local Storage
- cookies에 사용했던 것들이 대부분 LocalStorage의 사용으로 대체
- 가장 중요한 차이점 중 하나는 쿠키와 달리 모든 HTTP 요청에서 데이터를 주고받지 않고 클라언트와 서버 간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있음
- 최대 5MB의 정보를 저장
- JavaScript 코드를 통해 삭제하지 않으면 데이터는 자동 삭제되지 않으므로 더 오랜 시간 동안 저장해야 하는 큰 데이터에 유용
- 문자열뿐만 아니라 javascript의 primitives와 object도 저장할 수 있음
- 매우 취약한 데이터는 로컬스토리지를 사용해 제대로 저장하거나 보호할 수 없음
- Session Storage
- localStorage에 비해 자주 사용되진 않음
- 각 세션마다 데이터가 개별적으로 저장
- 현재 떠 있는 탭 내에서만 유지되므로 세션을 종료하면 데이터가 자동 제거
- 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없음
SEO(검색 엔진 최적화) 란?
웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색결과의 상위에 나올 수 있게 하는 작업
progressive rendering
프로그레시브 렌더링이란 콘텐츠를 가능한 빠르게 유저에게 보여주기 위한 기술
HTTP response가 여러 번 일어날 때 브라우저는 모든 요청이 끝날 때까지 기다리지 않고 각각의 아이템을 차례대로 렌더링
data-속성
data-속성을 사용 이유
- JS 없이 HTML element에 non-standard attribute로써 새로운 데이터를 저장하기 위해 data- 속성을 사용
- 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있음
요즘 지양하는 이유
- 사용자가 브라우저의 inspect 기능를 사용하여 데이터 속성을 쉽게 수정 가능
- 데이터 모델은 JavaScript 자체에 더 잘 저장
- 라이브러리나 프레임워크의 데이터 바인딩을 통해 DOM을 업데이트된 상태로 유지하는 것이 더 나음
window 객체란?
window 객체
- 웹 브라우저의 창(browser window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원
- 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티
- window 객체의 메소드는 전역 함수, window 객체의 프로퍼티는 전역 변수
- 문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티
window 객체 예시
- window.location : 브라우저의 주소
- window.location.href : 현재 브라우저 창에 입력된 주소,
- window.navigator : 브라우저 정보
- window.document : 문서의 HTML/CSS 접근가능한 접근자
document 객체
- window 객체의 가장 중요한 프로퍼티 중 하나
- 브라우저 창에 표시되는 내용에 해당하는 문서(document)를 나타내는 객체
참고 자료
'🍀오늘도 삽질 중🍀 > HTML | CSS' 카테고리의 다른 글
| CSS에 대해 알아보자 (1) | 2023.10.13 |
|---|---|
| CSS로 요소 정중앙에 배치하는 4가지 방법 (0) | 2023.06.22 |
| CSS 파일 import 순서 알아보기 (0) | 2023.06.22 |
| CSS를 SASS의 한 종류인 Sass로 바꿔보기 (0) | 2023.06.15 |
| @midea를 이용해 반응형 웹 구현하기 (0) | 2023.06.13 |
