[웹 기초] HTML, CSS, JAVASCRIPT 란?

 

 

안녕하세요, 김데이입니다. 

저는 사실 웹 퍼블리셔를 시작으로 현재 작은 회사에서 웹 기획 파트를 맡아 일을 하고 있습니다. 제가 알고 있는 지식을 까먹지 않고, 여러 사람들과 공유하기 위해 "웹 퍼블리셔" 파트를 신설하여 포스팅을 시작합니다. 

 

오늘은 웹 퍼블리셔의 가장 기본이 되는 HTML, CSS, JavaScript 에 대해 비교 해 보는 시간을 가지겠습니다.

 

웹 제작의 기초인 HTML, CSS, JavaScript는 각각 역할이 다르지만, 함께 조합되어 웹사이트를 만듭니다. 아래에서 각각의 역할과 특징에 대해 좀 더 자세히 알아보겠습니다!

 

[대표사진] 웹사이트 기본 언어 3가지 로고

 

 

---

 

1. HTML 

HTML은 "HyperText Markup Language"의 줄임말이며, 위에서 말씀드린 것처럼 웹 페이지의 구조(뼈대)를 만드는 역할을 합니다. 

 

HTML의 특징

• 웹사이트의 기본적인 틀을 제공
• 웹페이지 안의 제목, 단락, 목록, 표, 링크, 이미지 등을 정의
• <h1>, <p>, <ul>, <img> 같은 태그(tag)로 구성
• 내용(content)을 담지만 디자인이나 동작은 하지 않음

쉽게 말하면 집을 만드는데 아주 기본이되는 바닥 다지기, 기둥 세우기, 벽 세우기, 지붕 올리기가 바로 HTML의 역할이라고 할 수 있겠습니다. 이를 웹 사이트로 설명하면 상단의 메뉴 영역, 본문의 배너 또는 컨텐츠 영역, 아래쪽에 사용자 정보 영역등 모든 영역을 나누고, 기본적인 정보로 채우는 것이 바로 HTML의 기능입니다. 

 

HTML은 기본 뼈대가 되는 언어이며, 오른쪽과 같이 사용합니다

 

 

 

2. CSS

CSS는 "Cascading Style Sheets"의 줄임말이며, 웹 페이지를 디자인 하는 역할을 담당합니다. 

 

CSS의 특징 

• HTML 요소의 색상, 폰트, 여백, 위치, 크기 등을 조절
• HTML과 분리된 .css 파일로 작성하여 디자인을 따로 관리하거나, HTML 내 <style> 태그로 적용
• 같은 스타일을 여러 요소에 적용할 수 있음

앞서 집을 다 만들었다면, 지붕은 빨강색으로, 벽은 노랑색으로, 기둥은 갈색으로 각각 색을 칠한다거나 일부 벽의 두께를 얇게 조정하는등 "보기 좋게"바꾸는 것이 바로 CSS의 역할입니다. 웹사이트로 설명 하자면 중요한 글씨를 두껍게 하고 다른색으로 표기한다거나, 이미지의 크기를 조절하거나, 보고있는 웹 사이트의 배경 색을 바꾸고자 할때 사용하는 것이 바로 CSS입니다. 

 

CSS은 디자인 하는 언어이며, 오른쪽과 같이 사용합니다

 

 

 

 

 

3. JavaScript

CSS의 기본 기능들을 이용하여 동적인 동작이 가능 해 졌지만, 보다 디테일하고 사용자의 행위 (특정 위치에 마우스를 올리거나, 버튼을 구동하여 사진을 바꾸는 등)를 통해 동적인 동작을 이루고자 할 때에는 JavaScript가 필수로 필요합니다. 

 

JavaScript의 특징

• HTML 요소를 조작할 수 있음 (예: 버튼 클릭 시 색 변경)
• 조건문, 반복문, 함수 등 프로그래밍 로직을 적용 가능
• 사용자와의 상호작용 (클릭, 입력, 애니메이션 등) 가능
• CSS와 함께 사용하여 애니메이션 효과 추가 가능

HTML과 CSS는 직관적으로 보이는 것이라면, JavaScript는 프로그래밍적 로직을 다루는 것이 많기 때문에 사용하는데 어려운 것이 사실입니다. 그래서 이보다 쉬운 버전인 jQuery라는 라이브러리를 사용하여 동적인 기능을 구현하는 경우도 많습니다. 

 

 

 

4. HTML, CSS, JavaScript의 차이점

	HTML	CSS	JavaScript
역할	구조 (뼈대)	디자인 (스타일)	기능 (동작)
형태	<h1>, <p>, <div> 등 태그	color: red;, font-size: 16px;	function() { alert('hi'); }
영향	문서의 내용	문서의 스타일	문서의 동작
독립성	단독 사용 가능	HTML과 함께 사용	HTML, CSS와 함께 사용

 

 

---

 

일단 오늘은 웹사이트를 만드는데 기초가 되는 3가지 언어에 대해서 알아 보았습니다.

궁금하신 점 있으시면 댓글 주세요~

 

감사합니다 😉