HTML, CSS, JS란?

HTML, CSS, JS란?

---

오늘은 프론트앤드 개발에 가장 핵심이 되는 HTML, CSS, JS에 대한 이론에 대해 설명드리겠습니다. 

일단 사람을 예시로 간단하게 HTML, CSS, JS에 대해 설명하자면

HTML은 뼈를 CSS는 살과 옷을 JS는 움직임을 담당한다고 아시면 좋을 것 같습니다.

 

(1)

HTML

HTML은 Hypertext Markup Language의 약자로 Hypertext는 하이퍼링크를 생각하시면 편한데 하이퍼링크는 링크를 통해 상대방에게 내용을 전달해 주는 텍스트 문자인데 Hypertext도 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트를 의미합니다.

그리고 Markup Language는 마크업 언어로 마크업 언어는 태그를 사용하여 문자나 데이터를 연결해 주는 언어를 의미합니다.

즉, HTML은 상대방에게 내용을 전달해 주기 위해 태그를 사용하여 내용을 전달하는 언어 방식을 의미합니다.

앞서서 HTML을 뼈대로 비유를 했는데 이유는 HTML만으로는 디테일한 디자인이나 움직임을 표현하기에는 한계가 있기 때문에

HTML은 기본적인 문자, 텍스트, 이미지를 배치하면 CSS나 JS를 사용하여 더욱 디테일한 작업에 들어가기 때문에

HTML을 뼈대라고 비유하게 되었습니다.

HTML의 기본 문법은 '<태그>텍스트</태그>'로 구성됩니다.

 

(2)

CSS

CSS는 Cascading Style Sheets의 약자로 Cascading은 '위에서 아래로 흐르는'이란 뜻을 가지고 있고

Style Sheets는 '스타일 페이지'란 뜻을 가지고 있으며

즉, CSS는 위에서 아래로 진행되는 스타일 페이지를 뜻하고 있습니다.

CSS는 HTML에서 작성된 값을 가지고 와서 우선순위를 가지고 스타일 적용하는 페이지라고 할 수 있는데

이렇게 말로만 듣는다면 어렵게 느껴질 수도 있습니다.

CSS 코드를 통해 설명을 드리면 CSS는 코드를 작성하고 실행을 하게 된다면 위에서 아래로 컴퓨터가 코드를 읽고 위에서 아래로 코드를 실행하는 방식으로 실행이 됩니다.

그렇기 때문에 CSS 코드를 보면 항상 마지막에 작성된 값이 적용되기 때문에

 

작성된 코드

결과 값

예시를 보여드리면 'div{ color: red; color: blue;}'를 보시면 color라는 속성이 2개가 겹치지만 실행을 해보면

마지막에 작성된 blue의 값이 적용되는 것을 볼 수 있습니다.

이렇듯 CSS 코드는 위에서 아래로 진행되기 때문에 위에서 설명드렸던 것처럼

'이래서 위에서 아래로 흐른다는 표현을 했구나' 이렇게 이해하시면 좋을 것 같습니다.

CSS의 기본 문법은 '선택자{속성: 속성값;}' 이렇게 구성됩니다.

Tip. ;을 쓰는 이유는 마무리를 했다는 것을 표현하는 것인데 속성을 1개만 사용한다면 ;를 생략하셔도 됩니다.

https://jjong-wiki-bigdia.tistory.com/8

CSS의 적용 방식

(3)

JS

JS는 JavaScript의 약자로 Script 언어의 한 종류이다. Script 언어는

응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리킵니다.

JS는 주로 웹페이지에서 사용하며 JAVA, C언어, C++언어를 기반으로 만들어져서 구성이 비슷합니다.

JS의 기본 문법은 '선언 문자 = 값;' 이렇게 구성됩니다.

프론트앤드 개발에 가장 중요하게 사용되고 배워야 할 범위가 넓지만 반드시 알아둬야 하는 언어입니다.

 

JS를 움직임을 담당한다고 표현했는데 이유는 JS를 통해 디테일한 움직임을 표현할 수 있고

반응형 웹을 표현하기 위해 사용되기 때문에 JS가 움직임을 담당한다고 표현했습니다.

---

오늘은 여기까지 해보겠습니다.

오늘은 HTML, CSS, JS의 기본 이론과 기본 문법에 대해 알아보았습니다.

오늘 이 과정이 중요한 이유는 어떻게 사용되는지 알고 배워야지 더욱 효율적으로

지식을 습득할 수 있기 때문에 오늘 작성된 글을 자신의 것으로 만들고 

HTML, CSS, JS를 배우게 된다면 더욱 이해하기 쉽고 배우는데 재미가 생길 수 있습니다.

 

감사합니다!