HTML, CSS, JavaScript 간단 정리

티스토리 블로그를 운영하다 보면 아무래도 HTML이라는 마크업 언어에 대해 한번쯤 관심을 가지게 되지 않나 싶습니다. 근데 꼭 티스토리가 아니더라도 일반적인 웹 페이지의 소스를 통해 이미 HTML이라는 언어를 본 적은 있을 것입니다. 실수로 F12키가 눌러지면 나오기도 하니까 말입니다. 

 

위 캡처 화면처럼 F12키를 누르면 정신없는 창이 생깁니다. html이라고 몇 군데 써져있는 것이 눈에 띕니다.

 

티스토리 글쓰기창은 직접 HTML 문서 상태로 수정할 수가 있게 되어있습니다. 그래서 블로그 운영에 도움이 되는 부분들 때문도 있지만, 매일 같이 보는 데스크톱 화면인데 어떤 것들이 그것을 이루고 있었는지 한번 보는 것도 재미있을 것 같아서 HTML을 포함한 웹언어를 조금 공부해보려고 합니다. 

---

 

보통 보면 HTML, CSS, JavaScript 세가지를 많이 묶어놓던데 각각에 대해서 용어 정의를 위주로 간략하게 찾아보았습니다. 

 

HTML

'Hypertext Markup Language'의 약어입니다. 솔직히 '하이퍼텍스트', '마크업 언어' 등 쉽게 와닿지 않는 용어들을 사용하여 HTML을 설명하고 있습니다. 

---

​하이퍼텍스트: 컴퓨터를 통하여 저장된 정보를 학습자가 자신의 필요와 관심 및 인지 스타일에 따라 자유롭게 검색하도록 도와주는 비순차적 텍스트의 전개원리 [네이버 지식백과]

-> 컴퓨터를 통해서 타 학습자에게 공유되는 텍스트임을 알겠는데, '비순차적'이라는 게 조금 걸립니다. 서로 연결된 링크를 통해서 넘어다니듯이 문서를 통하는 데 정해진 순서가 있는 것이 아니라는 의미 같습니다.

 

마크업 언어: 문서의 논리적 구조와 배치 양식에 대한 정보를 표현하는 언어 [네이버 지식백과]

---

HTML은 우리가 정보를 구현할 때 기본이 되는 텍스트 자체의 골격(규약)이라고 생각하면 될 것 같습니다. 그렇게 완성된 문서들과 사이트가 모여진 정보망을 웹이라고 하기 때문에 '웹 언어'라고 흔히들 말하는 게 아닐까 싶습니다. 일반적으로  전달하고자 하는 내용에 대해서 꺾쇠 기호(<, >)를 통한 tag를 통해서 명령을 전달하는 방식입니다. 

 

 

CSS

'Cascading Style Sheets'의 약어로 HTML을 통해서 짜놓은 골격에 스타일을 집어넣는 것입니다. 일괄적으로 적용되는 스타일 시트를 만들면서, 글자색이나 글꼴 등 일일이 태그를 통해서 지정해야 하는 수고를 덜게 된 것입니다.

 

 

JavaScript

웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 언어라고 합니다. 말이 조금 어려워서 직접 보지 않은 사람들에게는 어떤 역할을 수행하는지 이해가 쉽지 않을 것 같습니다. 웹에서의 스크립트가 무엇인지 동적인 처리란 무엇인지 조금 더 보아야 할 것 같습니다. 웹 페이지를 위한 것이라고는 하지만 비브라우저 환경에서도 쓰일 수 있는 것으로 알고 있습니다.

cf) 자바스크립트는 자바와는 다른 언어입니다. 특정 사이트 내에서 동작하는 동적인 기능은 모두 자바스크립트가 담당한다고 보면 될 것 같습니다.

---

 

cf) 프론트엔드 vs. 백엔드

프론트엔드냐 백엔드냐 이런 말도 접하게 됩니다. 프론트엔드는 우리가 방금 살펴본 HTML, CSS, 자바스크립트와 같은 프로그래밍 언어를 통해서 구현하는 가시화되는 개발을 말합니다. 말 그대로 프론트이고 백엔드는 서버처럼 눈에 보이지 않는 영역을 맡는다고 합니다