이전 시간에는 프론트엔드, 백엔드 그리고 풀 스택 개발에 대한 간단한 정의에 대해 살펴봤습니다. 이번 시간에는 프론트엔드 개발에 사용되는 HTML, CSS, JS(Java Script)에 대해 배워 보겠습니다.
HTML, CSS, JS의 정의와 차이
스타벅스 홈페이지입니다. 상단에는 커피, 메뉴부터 로그인까지 다양한 기능을 포함한 메뉴창이 있습니다. 다양한 음료 이미지와 알록달록한 텍스트가 보입니다.
HTML(Hyper Text Markup Language) 언어는 웹 앱(웹 애플리케이션의 줄임말, 홈페이지를 의미)의 뼈대를 구성하는 언어입니다. 하이퍼 텍스트(Hyper Text)는 링크 같은 개념이고, Markup은 만들다는 의미인데요. 따라서 HTML 언어는 링크의 개념을 활용하여 웹 앱의 제목, 문단, 표, 이미지, 동영상 등의 구조물들을 만드는 언어라고 할 수 있습니다.
HTML은 정보를 담고 있는 언어입니다. 그러나 가독성이 조금(사실은 많이) 떨어집니다. 제목이나 본문의 글자 크기가 다 똑같거나 이미지가 불규칙적으로 배열되어 있는 홈페이지를 상상해 보세요. 있던 정도 떨어질 겁니다. 이때, HTML 정보를 실제 화면에 아름답게 꾸며주기 위한 언어가 CSS입니다.
CSS(Cascading Style Sheets)은 'Style'이라는 단어에서 알 수 있듯, 콘텐츠를 꾸며주고 시각적인 표현(정적)을 담당하는 언어입니다. 주로 글자 크기, 색깔과 같은 명령어를 활용합니다.
HTML로 뼈대를 세우고 CSS로 꾸몄다면, 이를 동적으로 움직일 수 있게 해야합니다. 이 과정에서 최종 화룡정점을 찍는 언어가 바로 JS(Java Script)입니다.
JS(Java Script, 이하 자바 스크립트)는 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 '동적 처리'를 담당하는 언어입니다.
CSS와 자바 스크립트로 작성된 파일은 HTML에서 <link>, <style>, <script> 등의 태그로 호출되어서 웹 앱에 함께 연동됩니다. 자세한 내용은 뒤에서 코드로 다뤄보도록 하겠습니다.
다음 시간에는 웹이 브라우저와 어떻게 소통하는지, 웹 표준과 브라우저에 대해 배워보도록 하겠습니다.
'Front_End > 기초' 카테고리의 다른 글
| 프론트엔드? 백엔드? 풀 스택 개발? (0) | 2023.07.20 |
|---|
댓글