‘car’ 상자에 넣어준 부품들이 리스트 형태로 출력되었습니다.

 

저렇게 짧은 코드만 입력했을 뿐인데, 리스트가 만들어지다니 정말 신기하죠?

 

그런데 여기서 질문을 하나 드리겠습니다.

 

위의 사진이 자동차라는 느낌이 드시나요? 아마 아니라고 답하실 것 같은데요.

 

그 이유는 바로 차의 뼈대만으로는 자동차가 될 수 없기 떄문입니다.

 

뼈대에 예쁘게 칠을 하고, 바퀴에 바람을 불어야 자동차처럼 보일 것입니다.

 

이는 홈페이지에서도 마찬가지입니다. 뼈대만으로는 홈페이지가 될 수 없으며, 디자인을 하고 살을 붙여줘야 홈페이지처럼 보일 것입니다.

 

위의 HTML 코드를 더 아름답게 꾸며주는 방법에 대해서는 아래에서 설명하도록 하겠습니다.

 

 

2. CSS

 

 

홈페이지 제작 시 알아야 할 홈페이지 용어 두 번째는, CSS입니다.

 

CSS란 Cascading Style Sheets의 약자로, HTML이 실제로 보이는 모습을 바꿔주는 스타일 언어입니다.

 

즉, HTML로 짜여진 구조에 살을 붙이고 꾸며주는 역할을 합니다.

 

글자의 색과 크기를 조절한다던지, 박스의 여백을 만든다던지, 네모난 도형을 동그랗게 바꿔준다던지 말이죠.

 

감이 오시나요? HTML이 차의 뼈대였다면, CSS는 바로 차의 외관을 담당하는 역할입니다.

 

아래는 방금 전 HTML로 만든 자동차를 꾸며주기 위해 5분만에 작성한 간단한 CSS 코드입니다.

(지금 당장 이해가 안 가셔도 괜찮습니다.)

 

차의 외관을 꾸며주는 CSS 코드

 

네모난 자동차를 빨간색으로 칠하고, 검정색 바퀴를 달아 주었습니다.

 

웹에서 보는 출력 결과는 다음과 같습니다.

 

 

어떻습니까? 방금 전의 리스트보다는 제법 자동차 같아지지 않았나요?

 

하지만 지금 보시는 자동차는아주 치명적인 문제가 있습니다.

 

바로 가만히 서서 움직이지 않는다는 것입니다.

 

움직이지도 않는 차를 자동차라고 부르기에는 무리가 있을 것 같은데요.

 

그렇다면 아래에서는 이 차를 움직이게 하는 방법을 알려드리겠습니다.

 

 

3. JavaScript

 

 

홈페이지 제작 시 알아야 할 홈페이지 용어 세 번째는, JavaScript입니다.

 

JavaScript(JS)란, 정적인 웹페이지의 데이터나 외관을 동적으로 움직이게 하는 인터프리터 언어입니다.

 

HTML과 CSS에게 동력을 심어주기도 하고, 마음대로 바꿀 수도 있습니다.

 

애니메이션 효과를 만들어 웹 페이지를 움직이는 것처럼 보이게 한다던지, CSS처럼 요소들의 색과 크기를 바꾼다던지 말이죠.

 

HTML이 차의 뼈대, CSS가 차의 외관이라면, JavaScript는 차의 동력입니다.

 

가령, 차가 움직이게 한다던지, 의자를 뒤로 눕힌다던지, 창문을 연다던지 이런 역할이겠네요.

 

아래는 자동차를 움직이기 위한 아주 간단한 JS 코드입니다.

(CSS와 마찬가지로 당장 이해가 안 가셔도 괜찮습니다.)

 

차를 움직이게 하는 JS 코드

 

간단하게 설명해드리자면, 자동차를 2px씩 오른쪽으로 움직이는 걸 반복해서 차가 굴러가듯 자연스럽게 움직이는 것처럼 보이게 하는 코드입니다.

 

코드의 실행 결과는 다음과 같습니다.

 

 

HTML과 CSS만 사용했을 때보다 움직이기 때문에 훨씬 자연스럽게 보이지 않나요?

 

이처럼 자동차가 되기 위해선 구조, 외관, 동력 이 세 가지를 모두 갖추어야 합니다.

 

셋 중에 하나라도 문제가 생긴다면, 위에서 설명했듯 자동차의 역할을 하기 힘들어지기 때문입니다.

 

이는 홈페이지에서도 마찬가지입니다.

 

웹의 구조, 외관, 기능 셋 중 하나라도 문제가 생긴다면 홈페이지는 더이상 홈페이지로서의 기능을 할 수 없을 것입니다.

 

잘 만든 홈페이지가 되려면 HTML, CSS, JavaScript는 반드시 한 쌍으로 존재해야 한다는 점, 명심해주시길 바랍니다.

 

 

4. 반응형 웹

 

 

홈페이지 제작 시 알아야 할 홈페이지 용어 네 번째는, 반응형 웹입니다.

 

반응형 웹이란 핸드폰, 태블릿, 노트북, 데스크탑 등 다양한 기기 환경에 맞춰 이미지나 글자 등 레이아웃의 크기가 알아서 변하는 웹 페이지를 말합니다.

 

환경에 따라 홈페이지를 여러 버전으로 제작하기엔 아주 귀찮을뿐더러 너무 많은 시간과 돈이 소요되기 때문에 반응형 웹이 등장하게 되었죠.

 

반응형 웹에 대해 더 자세하게 알고 싶다면 아래 링크를 클릭해주시길 바랍니다.

 

반응형 홈페이지란? 가장 쉽게 설명해 드립니다.

 

우리가 주로 이용하는 홈페이지들은 대부분 반응형 웹으로 만들어져있지만, 그렇지 않은 경우도 간혹 있습니다.

 

기술 수준이 부족하여 반응형 웹 대신 여러 버전으로 웹을 만들었다던지, 아니면 PC버전의 웹만 지원한다던지 말입니다.

 

여러 버전으로 만드는게 잘못된 것은 아닙니다만, 위에서 설명했듯 어마어마한 시간과 유지보수 비용이 들기 때문에 추천하지는 않습니다.

 

그런데 아예 PC버전만 지원하는 경우는 문제가 될 수 있습니다.

 

여러분께서 핸드폰으로 병원 예약을 하려는 상황이라고 가정해봅시다.

 

예약을 하기 위해 홈페이지를 방문했는데, 모바일에서 예약하기 버튼이 어딨는지 안보여 확대하고, 축소하고, 또 확대하고를 반복해야 할 것입니다.

 

심지어는 모바일에서는 지원되지 않는 기능이 있을 수도 있겠네요.

 

여러분께서는 다른 잘 만들어진 홈페이지들 대신 이런 홈페이지를 이용하고 싶으신가요?

 

아마도 아니라고 말씀하실 것 같습니다.

 

이와 같은 정보를 기억하시고, 여러분의 홈페이지를 제작할 때는 반드시 반응형 웹으로 제작하시길 바랍니다.

 

 

5. 웹 호스팅

 

 

홈페이지 제작 시 알아야 할 홈페이지 용어 다섯 번째는, 웹 호스팅입니다.

 

아무리 잘 만든 홈페이지라고 해도 웹 호스팅이 없다면, 여러분을 제외한 다른 사람들은 아무도 여러분의 홈페이지를 방문할 수 없을 것 입니다.

 

물론 자신만 보기 위해 만든 홈페이지라면 상관이 없을 것이지만 말입니다.

 

웹 호스팅이란, 여러분이 만든 홈페이지를 cafe24 같은 웹서버에 올려 다른 사람들이 도메인을 통해 홈페이지에 방문할 수 있도록 연결해주는 것입니다.

 

이해를 돕기 위해 예시를 들어 설명해드리겠습니다.

 

여러분께서 화가가 되었다고 가정해봅시다.

 

몇 년을 걸쳐 열심히 그림을 그렸고, 마침내 완성한 작품들을 개인전을 열어 전시하려고 합니다.

 

여기서 ‘돈을 받고 열어주겠다’ 라고 말하는 사람이 웹 호스팅 업체, 그림을 전시해놓은 전시회 공간이 웹서버, 사람들이 전시회까지 오는 길이 홈페이지 주소, 즉 도메인입니다.

 

웹 호스팅은 말 그대로 서버라는 공간을 임대해주는 서비스입니다.

 

실제로 임대 서비스도 그렇듯이, 서버에서도 공간이 넓으면 넓을 수록 임대 비용은 더 커질 것입니다.

 

그렇기 때문에 자신의 홈페이지의 용량에 맞춰 적당한 공간을 임대하시고, 홈페이지 특성에 따른 호스팅 방식을 찾으시길 바랍니다.

 

많은 사람들이 이용하는 서비스라면 서버가 빨라야 할 것이고, 당연히 서버 공간도 넓어야겠죠?

 

 

---

 

 

지금까지 홈페이지 제작 시 알아야 할 홈페이지 용어들에 대해 설명했습니다.

 

1. HTML
2. CSS
3. JavaScript
4. 반응형 웹
5. 웹 호스팅