HTML과 Web Browser
- HTML & 웹 브라우저(Web Browser)는 떨어질 수 없다.
확장자별로 사용되는 도구
.pdf--> PDF 뷰어
.doc,.docx--> MS Word
.html--> 웹 브라우저
- 웹 브라우저 : 크롬, 엣지, 익스플로러, 사파리, ...
웹 브라우저는 단순 뷰어 역할만 하는 것이 아니다.
사용자 입장 : 이동(탐색)할 수 있는 도구.
개발자 입장 : 분석할 수 있는 개발 도구.
HTML 이해를 위해서는 브라우저 이해도 중요하다.
HTML 정의
하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML)는 웹 페이지를 위한 지배적인 마크업 언어다.
출처 : https://ko.wikipedia.org/wiki/HTML
HTML = Hyper Text Markup Language
개발자가 작성하고 컴퓨터(웹 브라우저)가 이해하는 언어이다.
텍스트로 이루어져있는 html 파일을 웹 브라우저가 해석하여 화면에 보여준다.
기본 동작 : 특정 웹페이지 --- 요소 클릭 --->> 다른 웹페이지
텍스트나 이미지를 클릭하여 이동하는 방식으로 동작한다.
웹문서를 이루고 있는 요소 하나하나를 지칭한다.
(로고, 검색창, 이미지, 본문, ...)
- 프로그래밍 언어 / 마크업 언어 개념적 차이
Programming Language : 데이터를 가공하여 특정 명령(action)을 내린다.
Markup Language : 데이터 자체를 어느 곳에 어떻게 표현할지 정의한다.
HTML, CSS, JavaScript
- 프론트엔드 개발자가 되려면 필수적으로 알고있어야하는 언어다.
[구조]
HTML: 웹 문서의 기본적인 골격을 담당 = 건축가
[표현]CSS: 각 요소들의 레이아웃, 스타일링(색, 모양, 크기, ...)을 담당 = 디자이너
--> 사용자 경험 증대, 웹페이지간의 identity 강조.
[동작]JavaScript: 동적인 요소(사용자와의 인터랙션)를 담당 = 웨이터
과거에는 HTML과 CSS로만 이루어진 웹페이지가 많았다. (뉴스, 정보 문서가 주류였기 때문에)
But, 현재에는 JavaScript가 추가되어 웹 어플리케이션의 형태를 띄게 되었다.
ex) 검색 창을 만들 때
텍스트 입력창과 버튼을 마크업 -->
HTML
입력창과 버튼의 색과 모양을 변경 -->CSS
느낌표(!) 입력 시 "특수문자는 입력불가능합니다!" 경고 문구 출력 -->JavaScript
- 각각의 역할이 명확히 나누어지는게 아닌 유기적인 관계로 이루어진다.
But, 개발을 위해서 각 언어의 역할은 정확하게 인지해야한다.
- 웹사이트 접속시 PC에서의 화면 / 모바일에서의 화면
구조는 동일하지만 보여지는 배치가 다르다. --> 서로 다른 스타일링을 적용할 수 있다.
⭐각각의 특징을 이해해야 생산성 있는 빠른 접근이 가능하다.
웹 표준, 웹 접근성, 웹 호환성
- 웹 표준, 웹 접근성, 웹 호환성 세 가지를 알고 있으면
학습 시 더 나은 코드, 더 나은 웹페이지를 완성할 수 있다.
웹 표준 (Web Standards)
- HTML5 : W3C에서 2014년에 공식 표준화
2019년에 WHATWG(애플, 모질라, 구글, MS)에 의해 HTML Living Standard가 표준화되었다.
HTML5 = HTML Living Standard
HTML 표준화 이전에는 익스플로러의 Active X 처럼 독자적인 플러그인이 존재하기도 했다.
독자적인 플러그인 : 더이상 사용되지 않는다. --> 다양한 브라우저, 운영체제의 탄생
웹 표준을 준수하여 작성하면 OS나 Browser마다 의도된 대로 보여지는 웹 페이지 생성이 가능하다.
🖋 HTML Standard Site : http://www.w3.org/TR/html5/
- 브라우저를 구성하는 자체 코드들에 차이가 있다.
--> html을 이해하고 해석하는 방식에 조금씩 차이가 있다.
IF) 똑같은 html 문서를 다른 브라우저에서 연다면?
--> 버튼 하나를 만들더라도Chrome,Firefox,Safari에서 전부 다르게 표현된다.
But, 표준은 정해져있기 때문에 모양에 따른 차이일 뿐 성능이나 동작에 대한 차이는 아니다.
브라우저들끼리의 하나의 약속.
언어(Language)이기 때문에 문법적, 의미적으로 통용될 수 있는 웹 표준이 필요하다.
웹 접근성 (Web Accessibility)
https://ko.wikipedia.org/wiki/웹_접근성
-
장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식이다.
-
모든 사용자들은 (장애와 상관없이) 정보와 기능에 동등하게 접근할 수 있다.
웹 호환성 (Cross Browsing)
-
웹 브라우저 버전, 종류과 관계없이 웹사이트 접근이 가능해야 한다.
-
웹 표준 준수를 통한 브라우저 호환성을 확보한다.
--> HTML, CSS 문법 준수 / 동작, 레이아웃, 플러그인 호환성
