📌 웹 표준(Web Standards)
: HTML, CSS, Javascript, DOM 등 웹에서 표준적으로 사용되는 기술
- W3C(World Wide Web Consortium)가 만들었다.
✨ W3C(World Wide Web Consortium)
: 웹 기술의 표준을 개발하고 유지하는 국제 기구
- 팀 버너스리(Tim Berners-Lee, 웹 창시자)가 1994년에 창설했다.
- 웹의 발전과 표준화를 촉진하기 위해 다양한 기술적인 규격과 가이드라인을 제정한다.
📌 웹 접근성(Web Accessibility)
: 모든 사용자가 웹 사이트 및 웹 애플리케이션을 이해하고 이용할 수 있는 능력
- 장애가 있는 사람, 고령자 등을 포함한 모든 사용자가 웹을 사용할 수 있도록 하는 것을 목표로 한다.
- 웹 사이트나 애플리케이션을 설계하고 개발할 때 특정 규칙과 지침을 준수해야 한다.
이러한 규칙은 W3C (World Wide Web Consortium)에서 발표한 웹 콘텐츠 접근성 지침(WCAG)에 기반한다.
📌 HTML (HyperText Markup Language)
: 하이퍼 텍스트를 표현하기 위한 마크업 언어
📍 HTML5의 특징
- HTML5 = HTML 4.01 + XHTML 1.0
XHTML: HTML의 엄격한 버전
(1) 콘텐츠 모델
: 태그를 특성에 따라 7가지로 카테고리화한 것
- HTML 마크업을 할 때 좀 더 의미론적으로 접근할 수 있다 ➡ 웹 접근성 향상
참고하면 좋을 글
콘텐츠 모델, 왜 중요한데?
🚩 시맨틱 마크업을 위한 가이드, 콘텐츠 모델!
velog.io
[HTML] 콘텐츠 모델 (Content Models)
명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화 한 것하나의 요소가 여러 그룹에 속해 있을 수도 있고 그렇지 않을 수도 있
velog.io
(2) 아웃라인 알고리즘(Outline Algorithm)
: 웹 페이지의 정보 구조를 판별할 수 있는 개념
- 책의 목차, 개요와 비슷한 개념
- Heading 컨텐츠, Sectioning 컨텐츠, Sectioning 루트 요소 등
(3) HTML5의 API(Application Programming Interface)
- HTML5에는 API가 추가되었다.
- Canvas API: 그래픽을 그리고 조작하기 위한 API
동적 그래픽 및 애니메이션을 생성 - Web Audio API: 웹 브라우저에서 오디오를 생성, 조작 및 제어하기 위한 API
음악 앱, 음향 효과 및 오디오 시각화 - Web Storage API: 웹 애플리케이션에서 데이터를 로컬에 저장하는 데 사용
사용자 정보, 기본 설정 등을 저장 - Geolocation API: 사용자의 위치 정보에 액세스하여 위치 기반 서비스를 제공하는 데 사용
- File API: 클라이언트 측에서 파일 시스템에 접근하고 파일을 읽고 쓰는 데 사용
- WebRTC: 웹 브라우저 간에 실시간 음성, 비디오 및 데이터 통신을 가능하게 하는 API
- Web Workers: 웹 애플리케이션에서 백그라운드 스레드에서 스크립트를 실행하는 데 사용
메인 스레드의 작업과 병렬로 작업을 처리 - Web Sockets: 서버와 클라이언트 간의 실시간 양방향 통신을 지원
실시간 채팅 애플리케이션 및 멀티플레이어 게임
✨ API(Application Programming Interface)
: 각각의 요청들을 담당하는 서버에게 요청이 잘 전달 및 처리될 수 있도록 교통 정리를 해주는 체계
🔺 컴파일 언어(Compiled Language)
: 코드가 실행되기 전 컴파일러를 거쳐서 기계어로 모두 변환되어 실행되는 프로그래밍 언어
- C언어, Java
🔺 인터프리터 언어(Interpreter Language)
: 소스 코드를 컴파일 하지 않고, 런타임 환경에 문 단위로 코드를 한 줄씩 읽어서 바로 실행하는 방식으로 동작하는 언어
- Javascript
✨ XHTML을 사용하기 위한 설정 (</>)
1. Emmet: Variables 설정
- charest 👉 <meta charset="UTF-8" />
- lang 👉 <html lang="ko">
2. Emmet: Syntax Profiles 추가
- Edit in settings.json 👉 "html": "xhtml" 추가하기
설정 전
<img src="" alt="" >설정 후
<img src="" alt="" />
참고
콘텐츠 모델, 왜 중요한데?
🚩 시맨틱 마크업을 위한 가이드, 콘텐츠 모델!
velog.io
[IT교양] 비전공자를 위한 API 이해하기 (feat. Open API, REST API)
"데이터를 API 형태로 받는다", "지도 API로 코로나 맵을 개발했다"하는 이야기를 들어보신 적 있으신가요? 오늘은 비전공자, IT 무관 업계 분들도 어디선가 들어는 봤을 "API"에 대해 소개해보려고
enjoyinjoanne.tistory.com