본문 바로가기
코딩공부/웹 개발

나만의 홈페이지 만들기(1) - HTML, CSS, JS는 뭘까?

by 에반셀린 2023. 1. 4.

*이 글은 개인적인 공부/기록 목적으로 올립니다.

부족하다고 느껴질 수 있는 글이니 양해 부탁드립니다.*

 

 

처음 개발자를 입문할 때 가장 먼저 해보는 공부는 개인적인 생각에 HTML, CSS, JS라고 생각한다.

물론 다른 것부터 시작하는 분들도 계시지만 보편적으로 학원이나 독학할 때 시작하는 공부이기 때문에

쉽게 접근할 수 있다.

그래서 이번 부트캠프를 진행하면서 커리큘럼에 따라 첫 시작을 이 세가지를 먼저 공부하려고 한다.

 

먼저 HTML, CSS, JS를 빵 만드는 법에 비유하면서 설명하고자 한다.

(필자가 빵을 좋아해서 빵으로 비유하고 싶었다.😅)

 

 

1. HTML(Hyper Text Markup Language)

HTML은 Hyper Text Markup Language의 약자로 빵을 만들 때 빵 모양을 잡는 틀이라고 생각하면 쉽다.

빵이 그냥 만들어 지는 것이 아니라 어떠한 틀이 있어야지 다양한 모양의 빵이 만들어지듯이,

HTML은 사용자가 원하는 모양으로 틀을 만들 수 있다.

사진 출저 : 네이버쇼핑('마이베이킹')

 

HTML은 마크업 언어 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를

명시하기 위한 규칙들을 정의한 언어의 일종이라 볼 수 있다.

현재는 HTML5를 쓰고 있으며 대부분의 브라우저에서 상용화되고 있다.

 

 

2. CSS(Cascading Style Sheet)

CSS는 Cascading Style Sheet의 약자로 빵을 만들 때 어떤 재료를 가지고 빵을 만들지,

빵의 색은 무엇을 할지, 빵의 장식을 어떻게 해야할지, 빵의 전반적인 디자인을 책임진다고 생각하면 쉽다. 

사진 출저 : 네이버블로그('포식이의 세상')

CSS는 HTML와 마찬가지로 마크업 언어로서 문서가 실제로 웹사이트에

표현되는 방법을 정해주는 스타일 시트 언어라고 볼 수 있다.

디자인을 담당하는 언어이기 때문에 HTML보다 상대적으로 어렵다.

그 이유는 틀을 제작하는 HTML은 문법 자체가 비교적 해야하는 것이 많지 않지만,

CSS은 지금도 계속해서 새로운 버전이 올라가고 있고 쓸 수 있는 문법도

많이 때문에 추후에 프로젝트를 진행할 때 유지보수에 어려움이 있을 수 있다.

그럼에도 CSS을 잘 쓴다면 멋있는 웹 페이지를 만들 수 있다.

 

 

3. JS(JavaScript)

JS는 JavaScript의 약자로 빵을 비유하자면...

JS는 동적인 부분, 즉 동작을 담당하고 있기 때문에 비유하는 것이 어렵지만

빵을 반으로 나눌 때 빵 안에 있는 내용물이 흘러나온다...?라고 생각해볼 수 있다.

사진 출저 : 네이버블로그('몽글한 심장을 가진 infp 김몽글 블로그')

JS는 웹 페이지의 동적인 부분을 담당하고 있기에 어떤 버튼을 클릭했을 때 변화된 모습을 볼 수 있는

역할을 하는 게 JS라고 할 수 있다. JS의 또다른 장점은 위의 HTML, CSS와 다르게

프로토 타입 기반의 프로그래밍 언어, 스크립트 언어에 해당된다.

JS는 프론트엔드에서 많이 쓰이는 언어인데 백엔드에서도 개발을 할 수 있는 만능 언어라고 볼 수 있다.

 

 

이렇게 HTML, CSS, JS에 대해서 알아보았는데 자신이 프론트엔드, 백엔드 개발자의 길에 가기전에

개발자라면 누구나 한번쯤 해봐야 하는 언어이다.

그만큼 웹 개발에 중요하고 알아야 하기 때문에 공부를 해야 추후에 도움이 되기 때문에

다음부터는 차근차근 순서대로 게시글을 올려보려고 한다.

(잘할 수 있겠지...나??)