FRONTEND

[FE] HTML과 CSS, JavaScript 개요

우진하다 2023. 11. 10. 15:54

HTML, CSS, 그리고 JavaScript는 웹 페이지를 구성하는 핵심 기술
각각은 웹 개발의 다른 측면을 담당하며, 함께 작동하여 사용자에게 인터랙티브하고 매력적인 웹 경험을 제공

 

HTML (Hyper Text Markup Language) - 구조

HTML은 웹페이지의 뼈대를 만드는 마크업 언어
웹의 구조를 담당하며, 웹 페이지 내에서 텍스트, 이미지, 동영상 등 콘텐츠를 정의하고 조직화 한다.

HTML은 '하이퍼텍스트'를 사용하여 문서 간의 연결을 가능하게 하고
이를 통해 사용자는 하이퍼링크를 클릭하여 다른 페이지로 쉽게 이동할 수 있다.

얼굴을 만드는 과정에서 눈, 입, 윤곽 등을 형성하는 것과 같이
HTML은 웹 페이지의 구조적 요소를 만든다.

 

CSS (Cascading Style Sheets) - 스타일

CSS는 웹 페이지의 디자인을 담당하는 스타일 시트 언어
HTML로 만든 웹 페이지의 레이아웃과 스타일을 꾸미는 역할을 한다.

색상, 폰트, 간격, 크기 등 시각적 속성을 지정하여 웹 페이지의 요소들을
아릅답고 일관되게 표현한다.

CSS는 여러 페이지에 걸쳐 같은 스타일을 적용할 수 있게 해주고
브라우저와 디바이스에 관계없이 일관된 외관을 유지할 수 있게 해준다.

얼굴에 메이크업을하고 헤어스타일을 바꾸는 등 개성을 표현하는 것과 비슷하다.

JavaScript (JS) - 동적

JavaScript는 웹 페이지에서 인터렉티브한 기능을 추가하는 프로그래밍 언어이다.
웹 페이지가 사용자의 행동에 반응하여 동적으로 변화하도록 만드는 역할을 한다.
예로 폼을 제출할 때 데이터를 검증하거나, 사용자가 버튼을 클릭할 때 애니메이션을 표시하는 것과 같은 작업을 담당한다.

JavaScript는 웹 페이지가 단순한 정적 문서를 넘어 사용자와 상호 작용을 가능하게 하는 도구이다.
이는 얼굴이 웃고, 말하고, 표정을 변화시키는 것과 유사하며
웹 페이지에 생명을 주는 그런 과정을 담당한다.

 

HTML과 CSS, JavaScript는 협력하여 웹 페이지를 형성한다.
HTML은 기본적인 페이지 구조와 콘텐츠를 마련하고,
CSS는 이런 콘텐츠를 스타일링하며, JS 는 페이지에 동적 요소를 추가하여 사용자 경험을 향상시킨다.

각각 독립적인 기능을 가지면서도 서로 의존하여 통합된 웹 애플리케이션/웹 앱을 만들어 낸다.