1. HTML(HyperText Markup Language)
HTML은 HyperText Markup Language의 약자이다.
HyperText란?
순차적 접근을 뛰어넘는 텍스트로, 한 문서에서 다른 문서로 접근할 수 있는 특수한 형태를 가지고 있으며,
위키문서처럼 텍스트 사이에 링크가 있어 다른 페이지로 이동할 수 있는 텍스트를 뜻한다. 이 링크를 Hyperlink라고 한다.
Markup이란?
강아지가 영역을 표시하듯, 문서 내에서 태그를 이용해 구조나 의미를 표시하는 것을 말한다.
예: “이것은 제목이다”, “이것은 본문이다”, “이것은 강조된 글자다”➡️ Markup Language은 이런 마킹을 할 수 있는 언어를 말하며, HTML은 웹 문서의 구조와 의미를 표현하는 언어이다.
⭐️ HTML은?
- HyperText를 표시해주는 Markup Language이다.
- HTML은 프로그래밍 언어보다는 HTML 문서라고 불린다.
- HTML 태그들로 구성되어 있으며, HTML 문서는 기본 에디터로도 작성할 수 있다.
(저장할 때 확장자를.html로 저장한다.)
💡 HTML의 역사와 필수 태그가 생긴 이유
- 초기 웹(1990년대 초반)에는 단순히 텍스트와 링크만 연결하는 기능이었음
- 웹페이지가 점점 복잡해지면서 문서의 구조와 정보를 명확하게 하기 위해 HTML 표준이 생김
head태그
- 문서의 보이지 않는 정보(메타데이터)를 넣기 위해 필요해짐
- 예: 제목, 문자 인코딩, 검색엔진 정보
body태그
- 실제 화면에 보이는 콘텐츠를 구분하기 위해 생김
meta태그
- 검색엔진, SNS 미리보기, 문자셋 정보 등 문서의 속성을 정의하기 위해 추가됨
- 예:
<meta charset="UTF-8">
2. CSS (Cascading Style Sheets)
HTML이 구조를 담당한다면, CSS는 시각적 스타일을 담당한다.
CSS는HTML과 결합하여 스타일을 정의한 문서로,HTML요소들이 웹에서 어떻게 보일지 정의하는 stylesheet language를 의미한다.
Cascading란?
"폭포수처럼 흐르듯, 뒤에 정의된 스타일이 우선 적용되는 규칙(우선순위)을 가진다."는 의미이다.
특징
HTML구조는 그대로 두고CSS만 바꿔도 디자인을 전혀 다르게 할 수 있다.HTML이 없으면CSS는 의미가 없다.HTML위에 스타일을 “입히는” 언어이다.
CSS는 선택자(Selector)와 선언부(declaratives)로 구성되어 있다.
- 선택자는
CSS를 적용하고자 하는HTML요소를 가리킨다. - 선언부는 중괄호를 사용하여 스타일 내용을 선언한다.
3. JavaScript
Javascript는 프로그래밍 언어로, 웹 페이지에 동적인 움직임을 넣기 위해 만들어진 스크립트 언어이다.
컴퓨터, 스마트폰 등의 웹 브라우저는 대부분 JS 인터프리터가 내장되어 있어서, 웹 브라우저 개발에는 주로 자바스크립트를 사용한다는 걸 알 수 있다.
💡 인터프리터란?
프로그래밍 언어를 한 줄씩 읽어서 실행하는 프로그램으로, 런타임 환경에서 기계어(컴퓨터 언어)로 바꿔준다.
또한, 프레임워크를 사용하여 서버 프로그래밍이 가능해 프로젝트 규모에 따라 선택의 폭이 넓어질 수 있는 장점을 가지고 있다.
