HTML, CSS, JavaScript의 주요 차이점은 무엇일까?

경력이 만 1년 정도 되어 이직을 준비하고 있는 요즘, 내가 얼마나 내 직무에 대해 이해하고 있고, 기술을 얼마나 이해하고 작업하는지, 내가 준비되어 있는지 궁금해졌습니다. 그래서 gpt 에게 아래처럼 물어봤습니다.

난 이직을 준비하는, 경력 만 1년된 프론트엔드 개발자야. 네가 면접관이 된거처럼 나한테 기술면접 질문을 해줄래?

이 질문에 대해 10가지 면접 질문이 들어왔습니다. 그중 첫번째가 제목과 같습니다. 막상 실제 상황이라고 생각하고 답하려니 벌써부터 숨이 막히더군요. 제가 생각한 답변과 그 내용에 대해 좀더 깊이 기록해 보겠습니다.

나의 답변

html 은 어떠한 리소스 요청에 대해 우리가 웹 브라우저를 통해서 볼수 있는 문서이고,  DOM 구조와 외부 리소스에 대한 정보를 담고 있습니다.  css 는 html 에 있는 dom 을 스타일링 함으로써 좀더 문서를 사람이 보기 좋게 만들고 시각적인 효과등을 표현할수 있습니다.  javascript 는 브라우저가 이해할수있는 프로그래밍 언어로써,  다양한 기능이나 클라이언트에서의 인터렉션 처리나 ajax 요청을 할수 있습니다.

 

gpt 4 의 보충 설명

- HTML (HyperText Markup Language)은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. 
웹 페이지에 텍스트, 이미지, 비디오 등 다양한 콘텐츠를 포함시킬 수 있으며, 
DOM(Document Object Model) 구조를 통해 웹 브라우저가 해석할 수 있도록 합니다.

- CSS (Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 스타일 시트 언어입니다. 
CSS를 사용하여 웹 페이지의 폰트, 색상, 간격 등 다양한 스타일 속성을 조절할 수 있습니다.

- JavaScript는 웹 페이지의 동적인 요소와 상호작용을 구현하는 스크립트 언어입니다. 
브라우저에서 실행되는 언어로, 클라이언트 측에서 이벤트 처리, DOM 조작, AJAX 요청 등 다양한 기능을 수행할 수 있습니다.

대체적으로 잘 답변 한것 같지만, 조금 핵심 내용이 빠진 것 같긴합니다. gpt 보충설명도 뭔가 사전적 정의 같긴하지만, 제가 빠트린 내용도 잘 보충 해준것 같습니다.

제가 생각한 HTML 은 '우리가 어떠한 url이나 리소스 요청에대해, 웹 브라우저를 통해 볼수 있는 문서' 
CSS 는 '사람이 눈으로 보는 문서이기에, 웹 페이지의 스타일링을 하여 보기 좋게 만들어 줄수 있는 언어'
JS 는 '브라우저에서 동작하는 유일한 프로그래밍 언어이며, 다양한 인터렉션이나 추가 리소스에 대한 ajax 요청등을 할수 있는 언어'

가 한마디로 내릴수 있는 정의 인것 같습니다.

부연 설명으로 부족했던것

HTML
- 페이지 구조나 콘텐츠를 정의하는 마크업 언어
- 텍스트, 이미지, 비디오등 다양한 콘텐츠의 포함

CSS
- 웹 페이지의 스타일과 레이아웃을 정의

JS
- 웹 페이지의 동적인 요소와 상호작용을 구현하는 스크립트 언어
- 클라이언트 측에서 이벤트 처리, DOM 조작 (다양한 기능에 대한 부가설명)

 

이제 각 답변에 대해 조금 더 나은 답변이 될수 있게 정리 해보겠습니다.

HTML :

• html 은 어떠한 리소스 요청에 대해 우리가 웹 브라우저를 통해서 볼수 있는 문서이고, 
  페이지 구조나 텍스트, 이미지, 비디오 등 다양한 콘텐츠를 정의하고 외부 리소스에 대한 정보를 담고 있는 마크업 언어입니다.

CSS :

• css 는 html 문서의 스타일과 레이아웃 을 정의함으로써, 사람이 눈으로 보기 좋게 만들고
  시각적인 효과등을 표현할수 있는 스타일시트 언어입니다.

JS : 

• javascript 는 브라우저가 이해할수있는 프로그래밍 언어로써, 
  웹 페이지의 동적인 상호작용, 클라이언트에서의 인터렉션 처리나 DOM 조작, ajax 요청 등을 할수 있는 스크립트 언어 입니다.

 

여기서 좀더 꼬리물기식 질문을 해보면, 아래와 같이 물어볼수 있을것 같습니다.

1. DOM 구조가 무엇?, 어떻게 해석?
2. 스크립트 언어?
3. 브라우저가 js 해석하는 과정?
4. js 가 어떻게 실행?
5. ajax 란?

 

이 내용도 같이 담고 싶었지만 주제에서 빗나가기도하고, 내용이 너무 길어질것 같아서 또 다른 포스트에서 정리해보겠습니다.