웹프론트(1) - HTML/CSS/JS 의 정의 및 역할

웹사이트는 text 파일이 만든다.

text 파일이 브라우저에게 코드를 전달하고, 브라우저가 그 코드를 이해하고 구현해서 사용자에게 출력하는 것이다.

웹사이트(프론트)를 만들 때 사용되는 언어는 HTML, CSS, Javascript가 있다.

 

 

HTML이란?

HTML은 HyperText Markup Language 의 약자로 말 그대로 '컨텐츠의 구조를 정의하는 마크업 언어'이다.

컨텐츠(내용)에 태그(마크)를 씌워 구조를 구분하여 정의한다.

브라우저는 멍청해서 사람들이 사용하는 언어를 이해 못한다. 즉, 우리의 웹사이트/Content를 이해 못한다.

우리가 해야 할 일은 브라우저에게 Content가 무엇인지 알려주는 것이다. (ex. title은 무엇이고, link가 무엇이고, 이건 이미지, 제목이야 등등...)

그리고 그것을 'HTML'을 통해 알려준다. HTML은 뼈같은 존재이다.

 

html tag 구조

HTML 문서는 요소를 구조화한 일반 텍스트 문서인데, 위 예시처럼 요소는 한 쌍의 태그(tag)로 열고 닫으며, 각각의 태그는 부등호로 감싼다. 예외로 텍스트를 감싸지 않는 태그도 있다.(img 등) 

태그 사이에는 content가 들어가고, 태그에는 속성과 속성값이 들어간다.

 

 

 

CSS란?

CSS는 Cascading Style Sheets의 약자로 웹페이지를 꾸밀때 쓰는 언어이다.

브라우저에게 웹사이트가 그 content를 어떻게 보여야 하는지에 대해 알려준다.(그건 가로 10px 세로 15px여야 해, 녹색으로 해줘, 그리고 link는 검은색이어야 해 등등...)

HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다. (Cascading은 스타일을 적용할 때 폭포처럼 위에서 아래로 적용한다며 지어진 것이다.)

HTML이 뼈대였으면 CSS는 근육과 같은 존재이다(형태 지정)

다른말로 html이 없으면 css는 존재할 이유가 없다. content가 없는데 뭘 꾸미겠는가!

css 구조

선택자(Selector)은 html 요소의 이름을 말한다. 즉, 꾸밀 요소(들)을 선택하는 것이다. 

속성(Property)은 꾸밀 속성을 선택하는 것이고, 속성 값(Property value)은 말 그대로 속성 값이다.

위 예시를 해석해 보면 html의 p요소의 color를 red로 변경한다는 것이다. 

 

 

 

Javascript란?

javascript(줄여서 js)는 웹을 똑똑하게, 동적으로 만들어주는 프로그래밍 언어이다. 

북마크 아이콘을 클릭했을 때 그 쪽 내용으로 스크롤 되는 것, 탭을 누르면 내용이 바뀌는 것, 마우스를 따라 요소가 움직이는 것 등...

이외에 많은 동적인 기능들을 js가 만든다.

 

 

비유로 정리하자면 html은 뼈대, css는 근육, js는 뇌같은 존재이다.