<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1fe8fe11-2b05-472f-bc62-0ed352557a60/html5.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1fe8fe11-2b05-472f-bc62-0ed352557a60/html5.png" width="40px" /> HTML5/CSS/JavaScript
</aside>
HTML이란?
HyperText Markup Language의 약자로 제목, 단락, 목록 등 문서의 구조와 내용을 표준화된 태그를 이용하여 표현하고 웹페이지를 작성하는 언어이다.
HTML 언어의 역사
HTML언어는 물리학자인 팀 버너스리가 1990년에 정의한 것으로, 표준화된 태그로 웹 페이지를 작성하는 언어이다. 그러므로 웹 페이지를 HTML페이지 혹은 HTML문서라고도 부른다. 다음은 HTML언어를 포함하여 CSS와 JavaScript, 웹 브라우저의 발전 과정을 보여준다.
HTML5의 출현 배경
비표준 기술의 혼재와 웹 브라우저의 비호환성
→ 초기 HTML 등장과 함께 웹 브라우저의 전쟁이 시작되었고 많은 기업이 경쟁을 치열하게 해나갔다. 이 과정에서 W3C의 규정을 무시하고 오디오/비디오 등 멀티미디어를 웹 페이지에 삽입하기 위해 플러그인, Active-X등의 "비표준 기술"을 도입하게 되고 브라우저의 호환성은 무너지게 되었다.
인터넷 기기의 다양화
→ 과거와는 달리 데스크톱뿐 아니라 모바일 기기, 태블릿 PC, 스마트TV 등 굉장히 많은 인터넷 기기들이 등장하게 되었고, 이로 인해 많은 웹 사이트들은 모바일 혹은 태블릿용 웹 페이지를 따로 만드는 상황에 이르렀다.
새로운 범용 웹 표준의 필요성
→ Active-X나 플러그인, 플래시 등의 비표준 기술에 의존하는 PC 위주의 기존 웹 방식으로는 한계가 있었기 때문에 플러그인 등의 설치없이 모바일과 PC에서 동시에 사용할 수 있도록 하는 범용 웹 표준을 개발할 필요성이 강력히 대두되었다.
HTML5 표준과 의의
""표준에 담긴 내용""
→ 웹 페이지의 구조는 HTML5태그로, 웹 페이지의 모양은 CSS3로, 웹 페이지의 행동은 JavaScript로 명확하게 분리하여 개발할 수 있도록 한다. 따라서 HTML태그에서 문서의 모양과 관계된 태그나 속성을 폐기하였다.
→ 웹 페이지의 플랫폼이나 장치 의존성을 제거하였다. HTML5로 개발된 웹 애플리케이션은 HTML5 웹 브라우저만 있으면 PC뿐 아니라 어떤 모바일 플랫폼에서도 실행된다.
→ 외부 플러그인 없이 그래픽, 오디오, 비디오 등의 미디어를 사용한다. Active-X나 플러그인이 필요없으며, 태블릿/모바일 등 기기에 관계없이 실행 가능하다.
웹 문서 시대에서 웹 애플리케이션의 시대로
웹 문서 작성을 위한 HTML 태그 셋
→ 문서의 모양을 표현하는 HTML 태그와 속성들은 과감히 청산하였고, 문서의 구조를 명확히 표현하는 "시맨틱 태그"를 추가하였다.
웹 애플리케이션 작성을 위한 API
→ HTML은 웹 브라우저상에서 플러그인의 도움없이 웹 애플리케이션을 만들 수 있는 언어로 발전하였고, 이를 위해 HTML5 웹 브라우저는 웹 애플리케이션에서 개발할 수 있는 자바스크립트 API를 표준화하였다.
HTML5의 기능
CSS란?
→ CSS는 Cascading Style Sheet의 약자로 HTML 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이며, CSS로 작성된 코드를 "스타일 시트"라고 부른다.
CSS의 기능
CSS3 스타일 시트의 구성
셀렉터와 태그
→ 셀렉터(selector)는 HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능이다. 즉, HTML문서에 스타일을 적용할 때 스타일이 적용될 문서 내의 요소(태그)를 선택하는 기능을 한다.
스타일 시트 블록
프로퍼티와 값
→ 각 CSS3 스타일은 "프로퍼티:값"의 형태로 표현되며 세미콜론(;)으로 분리된다.
박스 모델(Box Model)
→ 각 HTML 태그 요소를 하나의 박스로 보고 박스를 둘러싸는 공간등을 나눠서 모델링하고 그 요소 하나하나를 세부적으로 컨트롤 하고자 하는 목적에서 만들어진 것이 "박스 모델" 이다. 박스모델은 HTML태그의 모양을 보는 CSS3의 근본 시각이다.
→ 텍스트 이미지와 같은 콘텐츠 영역과 테두리 내부 여백인 패딩(padding), 패딩 외부의 외곽선에 해당하는 테두리(border), 박스 가장 바깥쪽 영역에 해당하여 인접한 태그와 만나는 공간인 여백(margin)과 같이 4개의 영역으로 구성된다.
자바스크립트(JavaScript)란?
→ 자바스크립트는 1995년 넷스케이프사에서 개발되고 Netscape Navigator 2.0 브라우저에 최초로 탑재되어 웹 프로그래밍의 개념을 창시한 언어이다. 현재는 모든 브라우저에서 실행되는 웹 범용 언어가 되었다.
자바스크립트(JavaScript)언어의 특징
자바스크립트(JavaScript)의 역할
→ 자바스크립트는 사용자의 입력을 처리하거나 웹 애플리케이션을 작성하는 등 웹페이지의 "동적제어"에 사용된다.
