웹 페이지 구성의 3요소는 HTML(Hyper Text Markup Language), CSS(Cascading Style Sheet), Javascript이다.
HTML은 웹페이지의 구조와 내용, 골격의 역할을 하고 CSS는 웹페이지의 모양, 옷의 역할, Javascript는 웹페이지의 행동 및 응용 프로그램(동작)을 정의해준다.
웹(Web)
웹(Web)은 전 세계에 흩어져 있는 정보 자원을 연결하는 네트워크(World Wide Web)을 말합니다. 이 네트워크는 컴퓨터와 인터넷을 이용하여 접속할 수 있고 거미줄(web)처럼 복잡하게 얽혀져 있습니다. 사람들이 웹을 통해 정보자원에 접근하여 이용할 수 있는 것은 다음과 같은 메커니즘을 갖고 있기 때문인데 이것을 웹의 3대 요소라고 부른다.
- URI : 정보자원의 위치를 표시하기 위한 표기법
- HTTP : 위치 표시가 있는 정보자원에 접근하기 위한 통신 규약
- HTML : 정보자원과 정보자원 사이를 오가기 위한 하이퍼텍스트
웹페이지(Web Page)
웹페이지는 월드 와이드 웹 상에 있는 개개인의 문서를 가리킨다. 책의 페이지와는 달리, 두 개 이상의 웹 페이지들을 서로 하이퍼링크로 연결시킬 수 있는 특징이 있다. 대부분의 웹 페이지에는 웹 서버에 저장되며 HTML(XHTML), CSS, Javascript, 그림, 플래시와 같은 동영상으로 구성되어 있고 이러한 웹 페이지들은 HTTP를 통해 전송하거나 받아온다.
1) 정적 웹페이지
저장된 그대로 사용자에게 전달되는 웹 페이지로서 모든 상황에서 모든 사용자에게 동일한 정보를 표시한다. 보통 이미지 파일이나 HTML과 같이 자주 바뀌지 않는 것들을 정적 페이지로 제공한다.
2) 동적 웹페이지
파일(코드)를 바꾸지 않아도 조건에 따라 다른 응답 데이터를 전송하는 경우 쿼리 문자열에 따라 다른 검색 결과를 보여주는 경우이다. JSP, PHP, ASP.net등 많은 웹 관련 기술들이 동적 페이지를 만드는데 사용되는 프로그래밍 기술이다.
웹 프로그래밍이란 웹서버가 웹 브라우저에 응답으로 전송할 데이터를 생성해주는 프로그램을 작성하는 것이다.
HTML
HTML(HyperText Markup Language)은 World Wide Web(www)을 위한 마크업 언어이며, 제목이나 문단, 표, 꼬리글 및 기타 요소를 이용하여 콘텐츠의 구조를 정의함으로써 웹 문서를 만드는 기능을 제공한다.
DOCTYPE 이란 doctype 선언문은 HTML 태그는 아니지만 선언된 페이지의 HTML 버전이 무엇인지를 웹브라우저에 알려주는 역할을 하는 선언문으로 대소문자를 구분하지 않으며, 태그를 정의하기 전에 가장 먼저 선언되어야한다. Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것
이다. <!DOCTYPE>
으로 선언하는데 이걸 해주지 않으면 호환 모드(quirks mode)
로 동작한다. 호환 모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 된다.
표준 모드와 호환 모드
과거의 웹 페이지는 넷스케이프와 익스플로러 버전이 따로 존재했고 웹 표준이 없었다. 그러나 W3C가 웹 표준을 만들면서 브라우저가 웹사이트를 제대로 표현할 수 없게 되자 렌더링을 할 때 표준 모드(Standards mode)와 호환 모드(Quirks mode)로 렌더링을 할 수 있게 옵션을 제공했다.
브라우저는 HTML 문서가 DOCTYPE을 가지고 있지 않으면 호환 모드로 렌더링을 하고, 가지고 있다면 주어진 DOCTYPE에 맞게 표준 모드로 렌더링을 한다. 호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 버전의 브라우저에서도 깨지지 않게 하기 때문에 각 브라우저마다 다르게 보일 수 있다. 예를 들어, IE의 경우 호환 모드에서 박스 모델(Box model)을 잘못 해석하지만, 나머지 브라우저들은 그렇지 않다.
결론적으로, 정말 특별한 경우가 아니라면 DOCTYPE을 명시하여 브라우저가 표준 모드로 렌더링 하게 하자. 현재 시점에서 HTML5에서 권장하는 방식인 <!DOCTYPE html> 을 사용하는 것이 가장 바람직하다.
DTD(Document Type Definition)
DTD(Document Type Definition)란 문서 형식을 정의해놓은 것으로 DOCTYPE을 명시할 때 사용한다. 즉, HTML 문서가 어떤 문서 형식을 따르는지 DOCTYPE에서 DTD를 지정하는 것이다.
CSS
Javascript
공부 열심히해요!