HTML
HTML이란 어떤 것일까? 용어를 살펴볼때 이 단어의 약자를 풀어보는게 도움이 된다.
HTML은 Hyper Text Markup Language의 약자이다.
Hyper란 '매우 활성화 되었거나', '특별히 활발하다' 라는 뜻이다. 그럼 Hyper Text는 단순히 text가 아니라 text 그 이상의 것을 의미한다. Hyper Text는 다른 정보와 연결해주는 텍스트로 정의한다. 여기서 말하는 정보는 다른 웹페이지를 의미한다. 즉, Hyper Text는 두 개이상의 웹페이지를 서로 연결해주는 고리라고 할 수 있다.
Markup에서 Mark는 무언가를 알아보게 해주는 기능이다. 웹 페이지를 Markup 함으로써 웹페이지의 내용을 HTML 요소로 작성하는 것이다. 브라우저에 '이건 제목이고, 이건 그림이고, 이건 단락이고'(<head>, <title>, <body> ...) 이러한 정보들을 알려주는 것이다.
마지막 Language는 언어라는 뜻이다. 즉, HTML은 소통 수단이다. HTML은 브라우저와 소통하는 일종의 수단으로 웹페이지가 어떻게 생겼고 다른 웹페이지와 어떻게 연결되어있는지를 말해준다.
파이어폭스가 제공하는 MDN을 웹 개발 공식문서라고 생각하고 보는데, 여기서 HTML이 어떻게 설명되어있는지 보자.
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는 데 사용됩니다.
즉, HTML은 웹페이지와 그 안의 내용을 구조화하는데 사용하는 코드라고 정의되어 있다. 여기서 중요한 것은 구조이다. 브라우저에 이 웹사이트는 이러한 구조를 가져서 이러한 모습이고 이러한 역할을 할거라고 말해주는게 HTML이라고 볼 수 있다.
CSS
HTML이 구조를 잡아서 빌딩을 만들었다고 하자. 빌딩의 뼈대를 세운 다음에는 페인트도 칠하고 안에 인테리어도 해야할 것이다. 이것이 CSS의 역할이다.
CSS는 Cascading Style Sheet의 약자이다. Sheet는 말 그대로 종의를 의미한다. 그러므로 Style Sheet은 여러 스타일이 들어간 종의로 볼 수 있다. 스타일이란 무언가를 더 매력적으로 만들기 위한 일련의 작업을 뜻한다. 웹페이지를 더 매력적으로 만들어주는 것이 바로 ‘스타일 시트’이다.
색상이나 글꼴, 이미지 배치 등을 스타일 시트에서 정의한다.
Cascade의 의미는 여러 소스의 속성값을 결합하는 데 사용하는 알고리즘이다. Cascading을 이용해서 브라우저에서 각 HTML 요소에 어떤 색상을 지정할지 결정한다.
JavaScript
JavaScipt는 웹과 사용자가 상호작용 할 수 있도록 동적인 환경을 만든다. 웹 페이지에서 볼 수 있는 모든 효과를 구현한다고 생각하면 된다. 자바스크립트는 어떻게 시작되었을까? 먼저, 웹 브라우저에 대하여 알아야 한다.
1993년, 일리노이 대학 국립 슈퍼컴퓨팅 애플리케이션 센터에서 Andressen은 Mosaic이라는 최초의 웹 브라우저를 출시했다. 앤드레슨(?)은 이후에 1995년에 Netscape를 설립했고 Netscape Navigator라는 보다 발전된 브라우저를 런칭했다. 그러나 앤드레슨은 웹이 조금 더 동적이고 사용자와 상호작용하길 원해서 웹을 위한 스크립팅 언어가 필요하다고 생각했다.
그래서 Netscape에서는 프로그래밍 언어 Mocha를 만드는데 이것이 자바스크립트의 최초 버전이다.
그리고 Mocha의 베타버전을 LiveScript로 이름을 바꾼다. 근데 이때쯤 Java라는 언어가 나오고, Java가 너무 인기가 많으니까 LiveScript를 JavaScript로 이름을 바꾸어버린다. (그냥 Java 인기에 올라타기..) 그래서 Java와 JavaScript는 아아무런 연관이 없다. NetScape가 Java의 인기를 얻기 위해 JavaScript로 이름을 바꿨을뿐이다.
'프론트엔드 > HTML CSS' 카테고리의 다른 글
| CSS 포지셔닝 (0) | 2021.04.13 |
|---|---|
| display 속성 (0) | 2021.04.11 |
| CSS 활용하기 (0) | 2021.04.11 |
| 웹에서의 박스 모델(Box Model) 다루기 (0) | 2021.04.09 |