본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

HTML, CSS로 할 수 있는 것들

최초 작성일
최종 수정일
이번 시간에는...
초보 웹 개발자나 웹 디자이너 및 웹을 처음 접하는 분들을 위해, 웹의 구성 요소와 HTML, CSS, Javascript의 역할에 대해 다룹니다. 그리고 왜 이를 프론트 엔드(front-end)라 하는지 알아봅니다.

이 강의는 HTML과 CSS를 다룹니다. 그렇다면 이 둘을 가지고 웹 제작에 있어서 어디까지 할 수 있는 가를 먼저 알아보면서, 웹의 기본 요소에 대해 알아보는 시간을 갖도록 하겠습니다. 이 시간을 통해서 웹이 어떻게 보여지는 지에 대한 사전 지식을 쌓으시고, 더불어 이에 대한 공부를 시작할지 스스로 판단하시기 바랍니다.

웹페이지의 구성 요소

우선, 웹페이지가 어떻게 구성 되는 지 살펴 보도록 하겠습니다.

여러분들은 웹 서핑을 하기 위해서 여러분들의 PC를 키고서, 가장 먼저 무엇을 하시나요?

그렇습니다. '인터넷 익스플로러'를 실행시킵니다. 우리는 이렇게 인터넷을 통해서 웹 페이지를 볼 수 있도록 만들어진 프로그램을 '웹 브라우저' 라고 부릅니다. 그 다음 단계로 웹 브라우저의 주소 창에 'www.google.com'과 같은 인터넷 주소(URL)를 입력할 것 입니다. (물론 대다수의 사용자는 네이버나 다음, 구글 등의 검색엔진을 첫 화면으로 지정해 놓고 해당 페이지의 검색 창을 통해서 서핑이 시작되겠지만 말이죠.) 그렇게 인터넷 주소를 입력하고 엔터(Enter)키를 누르면 웹 브라우저의 화면은 원하는 페이지가 보여집니다.

그렇다면 이 순간 무슨 일이 일어난 것 일까요?

일단 주소를 입력하고 엔터가 눌려졌을 때, 웹 브라우저는 그 인터넷 주소의 서버를 찾아 파일을 요청하여 받아옵니다. 예를 들어 여러분이 보고계신 이 사이트는 'webberstudy.com'이라는 주소의 서버에서 파일을 받아 오는 것입니다.

그렇다면 어떤 파일들을 받아 오는 것일까요?

받아오는 파일에는 해당 페이지의 이미지파일(jpg, gif, png)등을 제외하고 보통 세가지 파일을 받아옵니다. '어쩌구.html', '어쩌구.css', '어쩌구.js' 이렇게 세가지 파일을 웹 브라우저가 받아다가 우리가 보는 페이지의 모습으로 해석해서 보여주는 것입니다. 그리고 위 세가지 파일들의 확장자를 보시면 각각 HTML, CSS, JS로 이것이 웹페이지를 구성하는 세가지 요소입니다. 우리가 항상 보는 네이버나 다음, 구글 등 거의 모든 사이트들은 이와 같이 구성되어있습니다.

서버에서 파일을 받아 브라우저가 여러분 눈앞에 보여줍니다.
웹브라우저가 웹페이지를 보여주기까지

각 구성 요소들의 역할

방금 알아봤듯이 웹은 HTML, CSS, JS(자바스크립트 : JavaScript)로 구성이 되어 있습니다. 그렇다면 순서대로 각 요소들이 어떠한 역할을 하는지 간략하게 알아보도록 하겠습니다.

HTML

HTML'Hyper Text Markup Language'(하이퍼 텍스트 마크업 랭귀지)의 줄임 말입니다. 이거 시작하기도 전에 웬 어려운 영어인가 싶으실지 모르겠지만, 처음 소개이니까 으레 좀 써봤습니다. 다음에 좀 더 자세히 설명하도록 할 테니 일단은 그냥 넘어가세요. 다만 저기 마크업(Markup)이라는 단어 때문에 HTML 코딩을 '마크업한다'라고 부르기도 합니다.

이 요소의 역할은 웹 페이지의 내용을 담당합니다. 정말 순수하게 내용 만을 담당하는데 우리가 보는 현재 페이지에서 모든 장식적인 요소를 배제한 텍스트 정도라고 생각하시면 됩니다. 이게 무슨 의미인지 이해가 잘 안 되실 거라 예상 됩니다만, 잠시 후에 등장하는 예제를 확인하시면 감이 오실 겁니다.

CSS

그 다음은 CSS'Cascading Style Sheet'(캐스캐이딩 스타일 시트)의 줄임 말입니다. 여기서 주목 해야할 단어는 바로 'Style' 입니다. 혹시 예상이 되었나요? 바로 웹 페이지의 외형을 담당합니다. HTML이 메모장에서만 쓴 듯한 투박한 내용을 담고 있다면 CSS는 이 내용들에 색깔도 입히고, 여기저기 배치도 시키고 하면서 우리가 보는 웹 페이지의 모습을 아름답게 바꿔줍니다.

JavaScript

마지막으로 'JavaScript'(자바스크립트)입니다. 자바스크립트는 정말 스크립트로 웹페이지의 기능과 동작을 담당합니다. 웹페이지의 이미지 슬라이드 같은 종류나, 이 사이트의 경우는 우측 상단에 설정 버튼을 누르면 메뉴가 뜨고, 글자 크기를 조절하는 동작 같은 것들이 모두 자바스크립트의 역할 덕분입니다.

일단 아쉽게도 현재 사이트에서는 자바스크립트를 다루지 않습니다. 그리고 아직 다룰 계획도 없고요. 그 이유는 자바스크립트가 사실상 프로그래밍 언어이기 때문에, 지식이 전무한 초보가 접근하기에는 난이도가 좀 있습니다. 그리고 그 분량도 HTML과 CSS를 합친 것 보다 많을 수 있습니다. 이러한 이유로 대부분의 서적들도 HTML, CSS와 자바스크립트를 따로 다룹니다. 그리고 가장 결정적인 이유로 제가 아직 자바스크립트를 강의할만한 실력이 안되기 때문입니다. 그리고 자바스크립트를 다루기 위해서는 기본적으로 HTML과 CSS를 다룰 줄 아셔야 하기 때문에 일단은 이 두 요소를 먼저 공부하셔야 합니다.

일단 이 세가지 요소를 아주 간략하게 살펴보았고요, 다음의 예시를 보시면서 직접 확인해 보시기 바랍니다. (예시의 우측 상단 버튼을 누르시면 각 요소역할을 확인해 보실 수 있습니다.)

HTML, CSS, JS 각 요소들의 역할 예시
/attach/demo/intro-basic.html
모바일의 경우 새창열기로 확인 가능합니다.
새창열기

HTML, CSS, JavaScript로 할 수 있는 것들

그렇다면 이제 우리가 방금 살펴본 세가지 요소를 공부한다면 모든 웹 사이트를 제작할 수 있을까요?

그에 대한 답은. '어느 정도는 가능하나, 많이 부족하다..'입니다.

위의 세가지 요소 만으로는 회원 가입이나, 게시물을 작성해서 올린 다거나 하는 서비스를 구현할 수 없습니다. 이러한 서비스는 서버의 데이터베이스(DB)를 통해서 구현이 됩니다.

예를 들어서 여러분이 어느 사이트에서 로그인을 한다고 합시다. 그렇다면 웹페이지 입력 폼에 여러분의 아이디와 비밀번호를 입력하고서 로그인 버튼을 누를 것입니다. 그리고 그 순간 비밀번호가 틀리다면 비밀번호가 잘못되었다고 나올 것이고, 맞게 입력이 되었다면 보통 '“닉네임”님 환영합니다.'와 같은 문구로 내용이 바뀌어져 있습니다. 여기서 분명 로그인 하기 전이나 로그인 한 후나 그 인터넷 주소(URL)는 동일한데 페이지 내용이 다르게 나옵니다. 그것은 서버에서 HTML파일을 동적으로 만들어서 보내주기 때문입니다. 여러분의 입력 내용을 가지고서, 서버 내의 DB를 확인하고 맞으면 DB에서 여러분의 '닉네임'을 찾아 그 닉네임을 HTML파일에 넣어서 웹 브라우저에 보내는 것입니다. 여러분의 게시 글 또한 마찬가지이고요.

이렇게 서버 쪽에서 이루어지는 작업을 서버 사이드(Server-side) 또는 뒤에서 일어난다고 하여 백엔드(Back-end)라고 부릅니다. 이쪽의 프로그래밍 언어에는 여러분들이 혹시 들어보았을지 모르는 PHP, JSP, ASP등의 언어가 있고요, 이를 '서버 사이드 언어'라고 합니다.

반대로 웹 브라우저 표면 상에 드러나는 HTML, CSS, JS같은 것을 표면에 보인다고 하여 프론트엔드(Front-end) 또는 클라이언트 사이드(Client-side)라고 부릅니다.

서버에서 파일을 받아 브라우저가 여러분 눈앞에 보여줍니다.
동적인 웹페이지는 서버 사이드에서 동적으로 만들어져 우리에게 제공됩니다.

이 강의 사이트를 통해 할 수 있는 것들

이렇게 보면 이 강의에서 배우는 HTML과 CSS만으로는 홈페이지 구축이 힘들어 보입니다.

그렇다고 불가능한 것은 절대 아닙니다. 일단 정말 간단한 소개 페이지 정도는 굳이 서버 사이드 언어로 구축을 하지 않아도 만들 수 있습니다. 페이지마다 html 파일을 직접 만들어서 서버에 올리는 방법이 있습니다. 예를 들어 intro.html, profile.html … 등으로 말이죠. 메뉴에 수정이 있거나 하면 반복 작업이 들어가는 방법이지만, 가장 쉬운 방법이기도 합니다. 실제로 회사 소개 페이지와 같이 웹페이지 내에서 글의 입력 같은 것을 받을 필요 없는 페이지의 경우 이런 식의 작업을 하기도 합니다.

하지만, 여러분이 회원 가입을 받거나 게시 글을 웹페이지에서 직접 작성하거나, 또는 쇼핑몰을 구축하고자 한다면 방법은 있습니다. 바로 서버 사이드 언어를 자동으로 구축해주는 서비스를 사용하시면 됩니다. 요새 유명한 워드프레스나 제로보드, 쇼핑몰이라면 카페24나 고도몰 같은 서비스를 사용하시는 겁니다. 이른바 설치형 블로그라는 것들이 이런 종류인데 보통 해당 사이트에서 다운 받아 본인이 사용할 서버에 올려서 설치하면 바로 구축이 되어 사용하실 수 있게 됩니다.

여기서 이제 여러분은 스킨을 수정함으로써 여러분의 사이트를 만드는 것입니다. 스킨은 보통 우리가 배우게될 HTML, CSS로 구성되어있습니다. 이 스킨을 수정한다는 것이 언듯보면 할 수 있는 것이 별로 없어 보이지만, 실제로는 거의 여러분에게 보여지는 모든 것을 바꿀 수 있습니다. 사실 대부분의 사이트가 외형이 다를 뿐 DB에서 콘텐츠를 보여주는 것은 동일합니다. 여러분이 지금 보고 있는 이 사이트 역시 워드프레스를 기반으로 제작된 사이트입니다. 스킨을 제가 제작한 것이고요. 특히 워드프레스의 경우는 원래 블로그를 만드는 용도로 제작되었으나 점점 그 용도가 방대해져 일반 사이트 구축에도 많이 활용되고 있습니다. 이러한 설치형 블로그는 대부분 무료이기 때문에 나중에 좀 더 찾아보시고 만들어 보는 것을 추천합니다.

정리

우리가 앞으로 배우게 될 HTML과 CSS의 역할, 그리고 그것의 한계를 살펴보았습니다. 이제 다음 장으로 넘어가 본격적으로 배우기 시작할 것인지, 아니면 그냥 포기하고 다른 방법을 찾을지는 이제 여러분의 몫입니다. 하지만 앞서 말씀드렸 듯이 이 둘 만을 가지고도 좋은 사이트를 만들 수 있습니다. 그리고 맨 처음 말씀 드렸듯이 이 둘은 정말 어렵지 않습니다. 특히 CSS같은 경우는 태생이 디자이너가 쓰기 쉽도록 만들어진 언어입니다. (이 때문에 오히려 개발자가 CSS를 어려워 하기도 합니다.)

이제 여러분이 배우기로 마음을 먹었다면, 다음 장에서 뵙도록 하겠습니다.

요점 정리
  • 웹 페이지의 기본 구성요소 - HTML, CSS, JS
  • HTML - 웹의 기본적인 내용과 의미를 담당
  • CSS - 페이지의 외형을 담당
  • JS - 페이지의 동적 동작을 담당
  • 회원가입이나, 게시글 작성/관리와 등이 가능한 동적인 사이트는 서버언어가(PHP,JSP,ASP 등) 필요
  • 서버언어를 잘 몰라도 워드프레스나 제로보드 등 CMS를 통해 어느 정도 동적인 사이트 구축 가능

이 글이 유용하셨다면 친구들에게 공유 해주세요.