웹사이트의 구성
우리가 흔히 보는 웹 사이트들은 알록달록하고, 수없이 움직이는 기능들이 들어있다는 것을 한눈에 알 수 있다. 다양한 이미지와 아이콘, 그리고 오르락내리락하기도 하고 번쩍 나타났다 순식간에 사라지기도 하는 것은 대체 어디서 오는 것인지 궁금할 수 있을 것이다. 그러나 한 번이라도 HTML 코드에 대해 배웠던 사람들은 의문점이 들 것이다. 내가 만든 웹 사이트는 저렇게 화려하지 않은데, 어떤 방법으로 저렇게 만든 건지 궁금했을 것이다. 그런 기능들은 link라는 태그를 활용하여 외부 소스를 끌어오는 방법으로 사이트를 꾸미게 된다. 물론 직접 style을 적용하는 방법도 있지만, 이 방법은 유지보수에 불리하기 때문에 지양하도록 한다. HTML은 뼈대를, CSS는 외관을 화려하게 꾸미고, JS는 갖추어진 환경에서 동적인(살아숨쉬는듯한 느낌) 기능을 불어넣어 준다. 세 개의 구성요소가 조화롭게 연결되어 제 역할을 다할 때 비로소 웹 사이트는 완벽하게 동작한다.
CSS에 대하여
웹 사이트의 구성에 대해 알았다면, CSS에 대해 구체적으로 알아보자. CSS는 Cascading Style Sheets의 약자로 스타일 시트 언어라고 불린다. CSS는 오픈 웹의 핵심 언어이며, 현재까지 출시된 버전은 CSS3이다. CSS는 글자의 모양, 글자의 색상, 글자의 크기, 배경 이미지, 배경 색상, 콘텐츠 간 간격, 페이지 구분 등 수없이 많은 속성들을 정의하여 HTML을 꾸며준다. 대표적으로 화면에 어떻게 보일지와 관련된 display 속성, 위칫값을 어떻게 할지 지정하는 position 속성, 콘텐츠 간 간격을 지정할 때 사용하는 margin과 padding 속성 등이 있다. HTML에 CSS 속성만 더해주더라도 충분히 활기가 넘치는 사이트를 만들 수 있다. 갈수록 성장하는 모바일 디바이스 시장에 꼭 필요한 미디어 쿼리 기능과 실시간으로 동작하는 애니메이션 속성도 지원하여 반응형 웹을 구축하고, 부족하지만 JS를 대신할 일부 동적인 기능을 사용해서 웹 사이트를 꾸밀 수도 있다. CSS에서 .은 클래스, #은 아이디를 의미하고 단어만 적을 경우 태그로 인식한다. 참고로 별표(*)는 최상위 선택자로 해당 웹 페이지 내 모든 태그를 선택하는 속성이다. 코드 자체는 심플하지만 학습할수록 복잡해지고, 사람마다 코드를 구성하는 방법이 각기 다르기 때문에 간단하다고 해서 절대 무시해서는 안 되는 언어 중 하나라고 볼 수 있겠다.
JS는 무엇인가
JS는 무엇이길래 도대체 사람들이 JS를 외치는 것일까. JS는 Javascript의 약자로 웹 페이지에서 동적인 부분을 스크립트로 처리하는 언어이다. 이 스크립트는 의 형태로 끝나는데, 일반적으로 제이쿼리(JQuery)라고 하는 자바스크립트 플러그인과 같이 배우다 보니 JS를 제이쿼리라고 잘못 이해하는 경우도 있다. 하지만 이 둘은 서로 다른 성질을 갖고 있고, 문법도 심지어 다르다. JS를 배우면 흔히 볼 수 있는 모달창이나, 팝업창 등을 직접 만들 수도 있고, 버튼을 클릭하거나 특정 태그에 마우스를 올렸을 때(이것을 보통 호버라고 부른다) 어떤 기능을 수행할지 정의할 수도 있다. 이런 기능들은 일반인 입장에서 아주 사소해 보일 수 있다. 하지만 생각보다 단순하지 않기에 어느 정도의 학습이 필요하다. JS는 변수라는 개념이 탑재되어 변수에 값을 저장하고, 넘겨주고, 해당 변수로 조건을 걸어 함수를 실행하는 등 다양한 동작을 가능하게 하고, 특정 코드에 응답하도록 요청하여 사이트를 동적으로 만드는 역할을 수행한다.
오로지 순수하게 JS 문법만 사용하는 경우에는 VanillaJS라고 부르기도 하는데, 근래에는 플러그인을 사용하거나, 프레임워크, 라이브러리 등을 사용하는 경우가 더 많다. 대표적으로 백엔드에서 사용하는 Node.js와 프론트엔드 개발자들이 애용하는 React, Vue 등이 대표적이다. JS의 특별한 장점 중 또 다른 하나는 API라는 것인데, 애플리케이션 프로그래밍 인터페이스의 약자로 누군가 이미 만들어 놓은 기능들(주로 복잡하고 어려운 코드가 들어가는 것들이다)을 가져와서 사용할 수 있도록 하는 것인데, DOM이라는 API가 가장 유명하다. DOM 구조에 관해서는 추후 구체적으로 다시 다룰 예정이다.
이렇게 웹을 구성하는 세 가지 요소에 대해 알아보았는데, 아마 충분히 이해 했으리라 생각한다. 세 가지 요소는 무엇 하나 빠질 것 없이 중요하고, 필요한 요소들이며 배워둔다면 언제든 유용하게 사용할 수 있는 기술임이 확실하기에 취미로 조금씩이나마 배워두면 좋을 것 같다.
