#서비스기획 - Web 이해 - HTML/CSS/JavaScript

🤔 Web이 만들어지게 된 계기

우리가 사용하고 있는 Webpage(이하 웹페이지)가 만들어지게 된 계기는 운영체제(OS: window, mac)와 프로그램(OA: microsoft, 한글 등) 상관없이 일정한 형식이 통일하게 보일 수 있도록 하기 위함이다.

 

✅ Web의 구성 요소

1. HTML (Hypertext Markup Language)

프로그래밍 언어라고 이해하기보다는 브라우저(ex. 크롬, 엣지, 파이어폭스, 사파리, 네이버 웨일)가 볼 수 있는 문서를 적는 언어이다.
HTML에서 사용되는 코드는 "태그"라고 일컫는다.

각 태그의 역할은 웹페이지의 내용을 구조화한다.
예를 들면, 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있다.

다시 말하면, HTML로 웹페이지에 보이는 콘텐츠를 지정하는 것이다.

2. CSS (Cascading Style Sheets)

포토샵이나 일러스트를 활용한 이미지를 입힐 수 있는 코드이다.

HTML로는 웹페이지를 꾸밀 수 있는 것에는 한계가 있다.
우리가 보고 있는 웹페이지의 다양한 이미지 요소가 CSS에 해당된다. 

이미지 요소라고 하면 '글자색', '글자를 대신해 등록되는 이미지' 등이다.

* HTML과 CSS는 프로그래밍 언어라고 할 수 없다.

3. JavaScript(=js)

JavaScript 또는 js라고 불려진다. (줄임말 또는 파일 확장명이 js라서?)
웹사이트에 상호작용성(예를 들면, 게임, 버튼이 눌리거나 폼에 자료가 입력될 때 반응, 동적인 스타일링과 애니메이션)을 더해 주는 프로그래밍 언어이다.

화면과 서버와의 연결을 돕는 프로그램 언어이다.

예를 들면, 구글이나 네이버에 검색어를 입력했을 때 '추천키워드'를 제안한다.
이때 실시간으로 바뀌는 추천키워드는 화면과 서버가 json 형식으로 데이터를 주고받으며 사용자 화면에 보이게 된다.
JavaScript는 응답에 따라 HTML 또는 CSS 형태로 보이게끔 한다.

이 모든 동작은 JavaScript만 가능하다. HTML과 CSS는 불가능하다.

* 여기서 말하는 JavaScript(자바 스크립트)와 Java(자바)는 다릅니다.
* 빠르고 쉽게 개발하기 위해 "React.js"라는 라이브러리 사용

 

🖥️ 퍼블리싱(=마크업)

퍼블리싱을 한다는 표현을 마크업을 한다라고 표현하기도 한다.
퍼블리싱(마크업)을 하는 사람을 퍼블리셔라고 부른다.

퍼블리싱을 한다는 것은 HTML과 CSS 작업까지 완료한 것으로 우리가 흔히 말하는 Front(=Front-end, 사용자화면, 사용자단...)가 보이는 작업까지를 말한다.
하지만 JavaScript 작업이 안되어 있다면 동적인 화면을 볼 수 없다.

 

⭐️ Web 구성 요소는 모두 서버에 저장되어 있다.

완성본은 모두 서버에 저장되어 있기 때문에 크롬에서 개발자 모드로 얼마든지 수정해도 실제로 반영되지 않는다.

따라서 서버에 저장되어 있는 내용을 수정하면 사용자 화면의 내용도 바뀌기 때문에 App보다 수정이 용이하다.
App은 사용자의 OS, version에 영향을 받으며 무엇보다 OS의 심사를 받기 때문에 수정 및 적용이 Web보다 어렵다.

 

출처 : [비전공자를 위한 이해할수 있는 IT지식]. 최원영. 티더블유아이지

출처 : https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics