HTML/CSS/JS의 역할

HTML/CSS/JS의 역할

 

HTML, CSS, JS는 프론트엔드(Front-End) 개발을 위해 반드시 필요한 언어이다.

쉽게 말해 웹 사이트, 우리 눈에 보이는 영역을 구성하기 위해 반드시 필요하다.

 

프론트엔드 개발을 위해서는 이 세 가지 언어만 공부하면 된다.

이것들 외에 필요없는 것이 아니라 이것들 밖에 없다.

다만, 서로 대체 할 수 있는 것이 아니고 서로 어우러져서 하나가 되기 때문에 이 세 가지 중 하나라도 빠져서는 안된다.

 

---

한 문장을 예로 들어본다.

" 왕초보 개발자는 공부한다. "

이 문장에서 HTML, CSS, JS가 어떤 역할을 맡는지 알아본다.

 

HTML (HyperText Markup Language)

하이퍼텍스트(Hypertext)의 구조를 명시하는 언어(Markup Language)이다.

즉, 웹 페이지를 구조화하기 위해 사용하는 언어이다.

HTML의 역할은 '개발자' 이다.

웹 사이트를 구성하는 구성 요소를 담당한다.

여기서 구성 요소는 텍스트, 버튼, 스크롤, 이미지 등이다.

다음 언어를 설명하기 위해 아래에 HTML로 버튼을 하나 만들어 놓는다.

1

 

CSS (Cascading Style Sheets)

웹 사이트의 디자인을 묘사하는 언어이다.

CSS의 역할은 '왕초보'이다.

HTML로 나타낸 구성 요소들을 꾸며준다.

구성 요소의 크기, 모양, 색깔, 위치 등을 표현한다.

간단한 애니메이션도 넣을 수 있다.

위에서 HTML로 버튼을 만들었다면 CSS로 다음과 같이 꾸며줄 수 있다.

1

 

JS (JavaScript)

정적인 웹 페이지를 동적으로 만들어주는 언어이다.

JS의 역할은 '공부한다'이다.

HTML만으로는 시계의 틀을 만들어도 작동하지 않고 버튼들은 아무리 눌러도 동작하지 않는다.

JS는 HTML로 만든 구성 요소들의 동작을 나타낸다.

CSS로 나타내지 못하는 구체적인 애니메이션도 나타낼 수 있다.

위에서 HTML로 만든 버튼은 JS를 만나 이제서야 작동된다.

1

(click)(click)(click)...

입력 : 111...