#7-웹 Web

웹을 구성하는 3요소

웹은 HTML, CSS, Javascript로 구성되어 있다. 아래 내용을 통해 각각 웹에서 어떤 일을 하는지 살펴보자.

HTML

네이버의 HTML 노출 화면(좌)과 HTML 문서(우)

HTML은 Hyper Text Markup Language의 약자다. HTML은 운영체제나 프로그램에 상관없이 언제나 동일하게 보이도록 하기 위해 '팀 버너스리'가 고안했다. 때문에 HTML 문서는 운영체제에 상관없이 브라우저만 있으면 어디서든 동일한 정보를 볼 수 있다.

 

Hyper Text Markup Language의 Markup이란, "태그를 이용하여 문서나 데이터의 구조를 표현하는 것"을 말한다. 그래서 HTML 작업을 '마크업 / 마크업 개발 / 마크업 디자인 / 마크업 작업'이라고 하며, 작업자를 '마크업 개발자'라고 한다.

 

태그는 HTML을 구성하는 코드다. 대표적인 5개의 코드를 보면 아래와 같다.

 

코드	뜻
<h>	header	제목
<p>	paragraph	문장
<ol>	ordered list	순서가 있는 목록
<ul>	unordered list	순서가 있는 목록
<li> 등	list	목록

 

여기서 주의해야 할 점은 HTML은 프로그래밍 언어가 아니라 "브라우저가 볼 수 있는 문서"라는 것이며, 문서이기 때문에 디자인 적 요소가 없다. 이 HTML을 예쁘게 꾸미기 위해 CSS가 등장했다.

CSS

네이버 HTML에 CSS가 적용된 화면(좌)과 CSS 문서(우)

CSS는 Cascading Style Sheets의 약자이다. 앞서 말한바와 같이 CSS는 HTML을 꾸며주는 역할을 한다. HTML과 CSS를 함께 작업하는 것을 '퍼블리싱'이라고 하며, 작업자를 '퍼블리셔'라고 한다. 

Javascript

네이버 검색창에 'a'를 입력했을 경우 Javascript의 동작 

HTML은 문서의 구조를 나타내고, CSS는 HTML을 꾸며주면, 복잡한 동작을 가능하게 하는 것이 Javascript다. Javascript는 컨텐츠 및 데이터를 바꾸고, 멀티미디어를 다루는 등 여러 가지 일을 할 수 있는 프로그래밍 언어다. 참고로 Javascript와 JAVA는 아예 다른 언어이며, '인도네시아'와 '인도'와 같이 글자만 비슷할 뿐 전혀 다른 개념이라고 봐야 한다. 

 

 

 

---

 

반응형 웹이란

반응형 웹이란, 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 이때 일부 CSS는 재활용하고, 일부 CSS는 추가로 코딩해야 하기 때문에 하나의 사이즈를 작업하는 것보다 많은 코드가 필요하다.