개요 Summary

왜 HTML, CSS가 중요한가? 왜 열심히 해야 하는가?

현업 개발자분들이 느꼈고 내가 개발하면서 느꼈듯이 HTML, CSS이 기초이고 쉽다고 느끼고 빨리 넘겨버리기도 하지만 계속해서 사용해야 하는 기초 지식이기 때문에 잘 알고 이해해야 한다. 나중에는 차근차근 꼼꼼히 볼 수 있는 여유가 없다. 그래서 나도 더 집중하고 싶어서 일을 하면서 배우지 않고 기초 공부를 하고 있는 것이기도 하다.

HTML과 웹 브라우저

HyperText Markup Language

HyperText는 다른 위치나 페이지로 이동할 수 있게 해주는 요소를 의미한다. 하지만 지금은 웹 문서를 이루고 있는 요소 하나하나를 모두 HyperText로 보면 된다.

Markup Language

Programming Language와 같이 데이터들이 어떤 action을 하게 하는 것이 아니라 어떤 구조적인 의미를 가지는지 기술하는 언어를 뜻한다.

HTML, CSS, JavaScript

HTML은 제목, 이미지, 본문 등으로 나뉜 웹 문서의 기본적인 골격을 담당한다.

여기에 CSS를 써서 각 요소들의 레이아웃과 스타일링을 처리합니다.

현대에는 사용자와의 인터랙션(유효성 검사, 버튼, 채팅 등)이 많아지고 HTML, CSS의 역할도 일부 대신할 수 있게 되어서 JS의 역할이 커졌다.

나누어 쓰면 좋은 점?

HTML 파일에 여러 개의 CSS로 스타일을 적용하는 것(예를 들면, 적응형 디자인)도 가능하고 HTML파일이 여러개 있을 때 한 개의 CSS를 공유하여 공통된 스타일을 적용하는 것이 가능하다.

웹 표준, 웹 접근성, 웹 호환성

이 용어를 각각 제대로 설명할 수 있는가? 나는 설명하지 못하기에 잘 몰랐던 개념인 것 같다. 하지만 웹 프론트엔드 개발자라면 이것들을 이해하고 신경 써야 남들보다 더 고도화된 웹 사이트를 만들 수 있다.

웹 브라우저는 각각의 코드가 동일하지 않다. 같은 버튼(html 문서)을 띄워도 다 다르게 보인다. 그래도 동일하게 버튼의 모양을 갖추고 있다. 왜냐하면 "웹 표준"이 있기 때문이다.

웹 표준 (Web Standards)

2014년 W3C에서 공식 표준화된 HTML5는 2019년 WHATWG(애플, 모질라, 구글, MS)에 HTML Living Standard로 표준화된 것을 포괄하여 지칭한다.

HTML5 표준화 이전에는 포함되어 있지 않는 멀티미디어 관련 기능 등은 웹 사이트에 추가하기 위해서 플러그인이 필요했다. (ie- activeX)

현대는 웹 표준을 준수하면 대부분 웹 브라우저에서 정상적으로 서비스가 작동한다.

웹 접근성 (Web Accessibility)

나는 웹 접근성에 대해서 노인분들이나 장애를 가진 사람들의 편의성을 증진시켜주기 위한 장치를 마련하는 것으로 생각했는데 다양한 사람이 다양한 환경에서 이 모든 사용자가 웹사이트를 접근할 때 정보와 기능에 동등하게 접근할 수 있는 것을 의미한다고 한다.

예를 들어, 작은 화면, 다른 입력 모드를 가진 폰, 다른 디바이스들을 사용하는 사람이나 기능적 능력이 변한 연로한 사람, 일시적인 장애로 불편을 겪는 사람, 시각이나 청각 등 일시적인 상황적 제약을 겪는 사람, 인터넷이 느리거나 비싼 대역폭을 사용하는 사람 등을 고려하는 것이다.

여기에 쓰이는 보조과학기술은 스크린리더, 화면 돋보기, 음성인식, 키보드 오버레이 등이 있고 Google을 보면 쉽게 이해할 수 있다.

웹 호환성(Cross Browsing)

웹 브라우저 버전과 종류에 관계없이 웹사이트에 접근할 수 있어야 한다. "웹 표준"을 지키면 호환성이 확보된다. (HTMLCSS 문법 준수, 동작, 레이아웃, 플러그인 호환성 준수)

강의 구성 및 학습 순서

HTML 기본 문법을 차례대로 보고 HTML 요소는 필요한 부분만 사전식으로 찾아서 공부할 것이다.