대학에서 웹프로그래밍 강의를 듣다보면, 아니 사실 어디서든 웹을 배운다면 무조건 배우는 3형제가 있다. 바로....
HTML , CSS , Javascript
이 3가지는 사실상 우리가 일반적으로 이용하는 대부분의 웹에서 필수적으로 사용되는 친구들이기 때문에 당~~~연히 기초 공부를
하게되면 웹의 역사 이후에 가장 먼저 배운다.
그렇다면 이 3가지가 각각 무엇을 하는 친구인지 간단하게 알아볼 필요가 있다.
첫 번째.
"나는 웹 페이지의 '기본적인 뼈대'가 될 것이다. " - HTML
이 친구는 사실 프로그래밍언어라고 하기엔 눈치껏 빠져야하는 친구이다. 애초에 이름 약자부터가
Hyper Text "Markup Language" 즉 마크업 언어이다.
여기서 마크업 언어가 무엇인가?
- 목적: 데이터가 어떻게 보일지(서식) 또는 어떤 구조인지(분류)를 기술합니다.
- 특징: 브라우저나 문서 처리 프로그램에 정보를 전달하며, 자체적인 연산이나 로직을 수행하지 않습니다.
- 구성: <h1>제목</h1>, <p>내용</p>처럼 태그를 통해 태그와 데이터를 묶습니다.
쉽게 말하면 이 친구는 프로그래밍 언어와 달리 if문, for문 같은 연산이나 로직을 수행하지 않는게 가장 큰 차이라고 생각하면 좋다.
또한 페이지의 기본적인 구성을 작성하는 언어이기에 대부분 웹의 뼈대를 맡는다고 표현한다.
내가 지금 수업에서 간단하게 만들고 있는
이런 식의 코드가 바로 HTML이다.
두 번째.
"나는 웹 페이지의 '아름다운 옷'이 될 것이다. " - CSS
이 친구는 Cascading Style Sheets라는 친구인데 굳이 약자 의미를 번역기 돌려서 찾아볼 필요는 없고
HTML과 같은 마크업 언어의 구조화된 문서에 스타일과 레이아웃을 입혀 글꼴, 배경색, 크기, 위치 등을 꾸미는 선언적 스타일 시트 언어이다. (선언적 스타일 시트라는 추상적인 표현에 굳이 꽂히지 말고 그냥 HTML같은 친구에게 스킨을 입힌다고 생각하면 좋다.)
* {
box-sizing: border-box;
/* 위아래로 떠있는 부분 붙이기 */
padding: 0;
margin: 0;
}
body {
color: #333;
background-color: rgb(253, 240, 245);
font-size: 18px;
line-height: 1.5;
}
ul {
list-style-type: none;
}
/* class를 지정할 때에는 앞에 . 붙이기 */
.container {
max-width: 1100px;
margin: 0 auto;
/* 위아래는 0, 좌우로 30픽셀 띄우기 */
padding: 30px 30px;
}
이런 식으로 우리가 HTML에 썼던 친구들을 가져와서 { } 안에 원하는 꾸미기 옵션들을 추가해주는 식으로 코딩한다.
내 나이 04년생, 내 동년배들이라면 아마 어릴적 윈도우XP 시절 네이버나 야후, 다음같은 웹사이트를 들어갔다가 종종 헐벗은 흰색 배경에 파란 글씨나 검은 글씨만 보이는 경우가 있었을 수도 있는데 그게 바로 아래 이미지와 같이 CSS가 적용되지 않은 HTML
페이지이다.
나는 어렸을때 저렇게 CSS 없는 화면 뜬 걸 보고 해킹당한줄 알고 벌벌 떨었는데 커서 정보보호학과에 오니 그 어릴적 내 모습이 참 순수하고 귀여웠던 것 같다.
본론으로 돌아오자면 저런식으로 웹을 꾸며줄 수 있는 친구가 바로 CSS이다.
세 번째.
"나는 웹 페이지를 원하는대로 '움직이게' 만들 것이다. " - Javascript
우리는 뼈대와 옷은 어떤 친구들이 만들어주는지 알게되었지만 뭔가 부족한 느낌이 들 수 있다.
'아니 예쁘게 생긴 페이지를 만들었는데 정작 뭔가 상호작용하고 움직이지 못하는 건 그냥 예쁜 사진이나 마찬가지 아닌가?'
그렇다. 우리가 비싼 돈 주고 산 마우스와 키보드를 섭섭하게 만드는 그런 사이트는 진정한 Web-Site라고 할 수 없다.
우리가 클릭하고, ID를 입력하고, 마우스를 올리면 미리보기가 뜨고, 이런것이 진정한 Web-Site이다.
그것을 위해 존재하는 친구가 바로 "Javascript" 이다.(줄여서 js)
위 사진처럼 우리가 어느 사이트를 들어가던 마우스를 댔을때 상호작용이 가능한 경우가 많은데 그 동작들이 거의 대부분 js 덕분에 가능한 것이다. 특정 애니메이션이 동작하는 것도 js를 통해서 구현하는 경우도 있다.
이런식으로 애니메이션이 동작하게 만들 수도 있고,
종종 이런식으로 웹으로 게임을 제작하는 경우도 있는데 이럴때도 js를 이용한다.
자 그럼 여기서 문제. Javascript는 프로그래밍언어일까요???
.
.
.
.
.
정답은 "요즘 기준에선 자바스크립트 = 그냥 프로그래밍 언어"라고 보면 된다.
사실 이름에서도 알겠지만 js의 근본은 스크립트언어이다. 옛날 개발자들은
🧱 프로그래밍 언어 (전통적)
- C, Java
- 컴파일 필요
- 실행파일(.exe) 만들어서 실행
📜 스크립트 언어
- JavaScript, Python (초기)
- 인터프리터로 바로 실행
- 비교적 가벼움
이런식으로 구분을 하는 경우가 있었다. 하지만...
- 자바스크립트도 엄청 복잡한 프로그램 작성 가능
- 서버, 앱, 게임 다 만듦
- 구조도 완전 프로그래밍 언어 수준
사실상 요즘 js의 위상은 더 이상 옛날의 그것이 아니기에 충분히 웹을 위한 프로그래밍언어라고 생각해도 크게 지장은 없을 것이다.
이렇게 해서 오늘은 웹의 가장 기본적인 3형제인 HTML,CSS,JS에 대하여 간단하게 알아보았다.
추후에는 이 3가지를 이용하여 웹페이지를 직접 만들어보고 만드는 과정들을 올려보도록 하겠다.
이 글을 읽게 된 독자분들이 쉽게 이해할 수 있다면 좋겠다.
'웹프로그래밍 과제' 카테고리의 다른 글
| 개인 포트폴리오 프로젝트 - JS를 사용한 V.2 반응형 포트폴리오 (1) | 2026.04.26 |
|---|