HTML, CSS, JavaScript 차이

 

1. HTML , CSS, javascript의 차이

 

웹 개발을 하려면 가장 먼저 HTML, CSS, JavaScirpt를 필수로 이해를 해야한다. 

도대체 HTML, CSS, JavaScript가 뭐길래 필수로 알아야 하고 사람들은 쉽다고 하는지 ㅇㅅㅇ 

(살짝 재수없다~ㅇㅅㅇ~)

 

쉽게 말해 

웹 페이지를 구성하는 언어는 크게 HTML, CSS, JS(=javaScript , 앞으로는 JS라 부르겠다) 3가지가 있다.

여기서 흔히 알고 있는 java, python, c언어와 같은 프로그래밍 언어 쉽게 말해 기능을 구현하는 언어는 JS뿐이다.

마크업 언어 : HTML, 스타일 언어 : CSS, 프로그래밍 언어 : JS 

HTML CSS JS

 

그렇다면 마크업 언어 HTML,  스타일언어 CSS란 무엇일까?

한 단어로 말해 

 

 

HTML : 배치,  CSS : 꾸미기


이다. 

어렵다 어려워 웹 개발 세계~~~~~~~~~~~

얄코 선생님의 웹페이지를 예를 들어 설명을 하겠다.

 

 

https://showcases.yalco.kr/html-css/00-04/

Yalco Stopwatch

위의 스톱워치 사이트가 있다. 웹페이지이므로 HTML, CSS, JS의 세 가지 언어 쓰였는데

 

여기서 

 

1.  HTML

: 텍스트, 이미지, 버튼 등을 웹페이지에 배치하는 것으로 아무런 꾸밈도 동작도 하지 않는 상태이다.

 

웹 페이지의 구조와 콘텐츠를 정의하는 데 사용되며,

텍스트, 이미지, 링크 등과 같은 콘텐츠를 표시하고, 웹 페이지의 레이아웃을 구성하는 데 사용된다.

HTML은 요소와 속성으로 구성되며,

웹 페이지의 구조를 나타내기 위해 여러 태그들을 사용한다.

HTML

 

 

 

2. CSS

: 위의 요소들을 보기 좋게 꾸미는 것으로 여기서는 CSS에 의해 색깔, 폰트 등이 바뀌었다.

 

CSS는 웹 페이지의 디자인과 스타일을 정의하는 데 사용된다.

HTML이 웹 페이지의 구조를 정의하면, CSS는 해당 구조를 스타일링하여 시각적으로 보기 좋게 만든다.

색상, 폰트, 여백, 정렬 등과 같은 스타일을 지정하고, 웹 페이지의 레이아웃을 조정하는데 사용된다.

HTML 요소들에 스타일을 적용하기 위해 선택자와 속성을 사용한다.

 

CSS

 

 

 

3. JS

: 위의 요소들의 기능을 구현하는 것으로 파란색 재생버튼을 누르면 스톱워치가 작동을 한다.

 

JavaScript는 웹 페이지의 동적인 기능을 추가하는 데 사용된다.

HTML과 CSS가 웹 페이지의 정적인 부분을 담당한다면, JavaScript는 사용자와 상호작용하고 웹 페이지를 동적으로 변경하는 데 사용된다.

js는 이벤트 처리, 애니메이션, 폼 유효성 검사, 데이터 요청과 응답 등 다양한 기능을 제공한다.

웹 페이지의 HTML 오소들에 접근하고 조작할 수 있으며,

이를 통해 웹 페이지를 보다 동적으로 만들 수 있다.

예를 들어, 클릭 이벤트에 대한 응답으로 HTML 요소를 숨기거나 보이게 하거나,

폼 입력 값을 검증하는 등의 작업을 수행할 수 있다.

 

JS

 

이렇게 간단하게 웹개발의 3가지 언어의 기능에 대해 알아보았다.