HTML/CSS/JS/jQuery 개요
1. HTML(HyperText Markup Language)
HTML은 웹페이지를 구성하는 구조(Structure)를 만드는 언어입니다.
HTML에서 HyperText란, 링크를 통해 다른 페이지로 이동(Hyper)이 가능한 문서를 의미하며, 태그(Markup)를 이용하여 웹페이지의 내용을 구조화 합니다.
HTML은 JAVA와 같은 프로그래밍 언어가 아니라, 마크업을 통해 웹페이지의 구조를 정의하는 마크업 언어입니다.
HTML에는 마크업마다 의미와 기능이 정의되어 있으므로, HTML의 구조를 정의하기 위해서는 어떤 마크업이 어떤 기능을 하는지에 대해 자세히 파악하고 있어야 합니다.
2. CSS(Cascading Style Sheets)
HTML이 웹페이지의 구조를 정의했다면, CSS는 HTML의 구조 위에 옷을 입히는 역할을 합니다.
CSS를 통해 웹페이지의 폰트를 정의하거나 , 색상을 정의하거나 요소의 크기를 정렬하는 등 다양한 작업이 가능합니다.
CSS의 Cascading은 순차적인, 단계적인 이라는 의미를 가지며, 단계적으로 적용되는 Style임을 의미합니다.
HTML요소 하나에 다양한 스타일이 겹치는 경우 우선순위에 따라 1가지 스타일이 적용됩니다.
소스코드 작성위치별 우선순위
인라인 > 내부 > 외부
명시도(Specifcity)에 따른 우선순위
명시도 : 얼마나 구체적인 의미를 가졌는지를 의미함.
ID > CLASS > 태그 등.
3. JS(JavaScript) 개요
JS는 웹브라우저에서 사용되는 프로그래밍 언어로 , 웹페이지를 동적으로 만들고 웹페이지를 이용하는 사용자와 상호작용할 수 있게 도와줍니다.
HTML과 CSS를 통해 예쁜 웹페이지를 설계한 후 , Javascript를 활용하여 사용자와 상호작용하는 다양한 기능을 만들 수 있습니다.
버튼 클릭, 서버통신, 입력값 검사 등.
모든 웹브라우저는 JS를 실행할 수 있는 엔진이 내장되어 있으므로 별도의 설치가 불필요합니다.
JS는 자바와 같이 객체지향 프로그래밍을 지원하며, 함수형 프로그래밍 방식도 지원합니다.
JS는 자바와는 다른 인터프리터방식의 언어이며, ECMA표준을 지키는 스크립트 언어입니다.
ES5란, ECMAScript5를 의미하며 2009년 출시된 버전.
4. jQuery 개요
jQuery는 복잡한 javascript문법을 더욱 쉽게 사용하도록 도와주는 javascript기반 라이브러리입니다.
jQuery를 통해 문서탐색, 이벤트처리, 애니메이션, ajax등을 간단한 문법으로 구현할 수 있습니다.
EX) Javscript 문법과 jQuery문법 비교
js : document.getElementById("box") , 요소.addEventListenenr("click", 함수)
jquery : $("#box"), 요소.click(함수)
BootStrap, jQueyUI, FullCanendar, Slick.js 등 jQuery를 기반으로 만들어진 다양한 라이브러리들이 존재합니다.(즉, 위 라이브러리 이용시 jQuery가 필수)
웹서비스 개발에서 빠른 생산성을 만들어 낼 수 있는 좋은 라이브러리 이지만, 성능적인 한계 또한 존재합니다.(javascript 기반이기 때문에 순수 javascript보다 느림)
React, Vue등 웹페이지의 생산성을 늘려주는 다양한 프레임워크/라이브러리가 등장하면서 jQuery의 사용률이 많이 떨어졌습니다.
단, 국내에서는 전자정부 FrameWork나, PHP개발에서 많이 사용되며 예전 프로젝트에서는 jQuery사용이 거의 필수 였기 때문에 현재까지도 jQuery는 javascript기반의 라이브러리들 중 가장 많이 사용되는 라이브러리중 하나 입니다.
Last updated