-
[ JS ] HTML, CSS, JavaScript의 정의와 기초 문법Study/JavaScript 2025. 3. 22. 23:45
HTML, CSS, JavaScript의 정의와 연관성, 기본 문법에 대해 이 글에서 다뤄보려 한다.(자주 사용하는 HTML의 태그, JS 문법은 다른 게시글에서 자세하게 다룰 것이다.)
먼저 간단하게 정리하면, HTML이 기초 뼈대를 구성하고, CSS가 뼈대 위에 살을 붙이며, JavaScript가 이를 움직인다. 즉, HTML로 기본 요소를 배치하고, CSS로 웹사이트의 글꼴이나 색, 레이아웃 등을 설정한다. JavaScript는 웹사이트의 이벤트에 반응하는 형식이나, 여러 실행되는 기능이 구현되는 걸 말한다. 이들로 구성된 웹사이트, 앱은 구조적으로나 시각적, 기능적으로도 완벽하게 구성된다.
HTML5 HTML이란 무엇인가
HTML이란 *HyperText Markup Language의 약자로 웹사이트의 구조를 만든다. 이는 프로그래밍 언어가 아닌 마크업 정보를 표현하는 마크업 언어이다. 따라서 기능 구현보다 웹브라우저가 코드를 해석할 수 있는 정보를 담고 있다.(해당 웹개발자의 의도를 파악할 수 있다.)
* HyperText란 사용자가 하나의 문서에서 다른 문서로 이동할 수 있는 텍스트이다.(링크)
* Markup Language란 문서를 구조적으로 표기하는 언어이다.
HTML을 기술하기 위해 사용하는 명령어의 집합을 태그(Tag)라고 한다. 태그의 종류는 수십 가지이므로 사용빈도가 높은 태그만 익혀 사용하다가 필요한 명령어가 생기면 태그사전 혹은 구글링을 통해 참고하면 된다.
HTML은 태그로 되어있는 요소 형태로 작성된다. 자세하게 배치해야 하는 항목들은 명확하고 표상적인 마크업을 이유로 CSS 사용을 권장한다.
HTML의 태그는 단순하게 특정 글을 꾸미는 게 아닌, 그 자체로 브라우저를 해석할 수 있다.
:: <>표시로 "/"를 갖는 태그가 나올 때까지 정의한다.
HTML의 기본 구조 태그
<!DOCTYPE> : 마크업 언어용 Document Type DEfinition(DTD) 태그
<!DOCTYPE html><html> : HTML이 작용하는 범위를 지정하는 태그(DTD 태그를 제외하고 모든 내용이 이 안에 담긴다.)
<head> : HTML의 속성 범위를 지정하기 위한 태그(태그 안에 **<meta>, <title>, <style> 등을 넣는다.)
<body> : HTML의 본문 범위를 지정하기 위한 태그(문서가 표시되는 레이아웃을 이 태그 안에 넣는다.)
**<meta> : HTML 문서에 어떤 내용이 있는지 요약 정보를 가진 태그. 즉 페이지 해석 시 도움을 주며 문서의 내용, 키워드, 누가 제작했는지에 대해 파악할 수 있다.
**<title> : 웹페이지의 최상단 제목을 입력할 수 있는 태그
**<style> : CSS 사용을 위해 필요한 태그
CSS CSS란 무엇인가
HTML처럼 마크업 언어로 작성된 문서가 웹사이트에 어떻게 표현되는지 방법을 정해주는 스타일시트(Stylesheet Language) 언어로 Cascading Style Sheet의 약자이다. 즉 선택자에 적용된 스타일들 중 어떤 스타일을 우선으로 적용할지 결정한다.(아래에서 선택자 우선 순위를 다룬다.)
과거에는 HTML에서 디자인적 요소 등 모든 정보를 포함하여 작성하였으나 이러한 이유로 다른 사람이 작성한 HTML 코드를 알아보기 힘들었다. 이에 CSS를 사용하기 시작했고 따라서 문서의 해독 속도와 동적인 기능을 구현하기 쉬워졌다. 또한 HTML의 문서 크기가 상대적으로 줄어들었다.
CSS와 HTML의 용도와 구분이 명확해지고 작업시간도 줄어들었으며, 페이지의 일관성을 유지하기 쉬워지는 등 장점이 극대화되었다.
CSS 작성 방식
선택자 { 스타일의 종류 : 값 ; }
Selector { Property : Property value ; }
중괄호 앞에 적용할 대상(선택자), 중괄호 내에 적용할 스타일과 값, 선언을 마무리하는 세미콜론으로 구성된다.
적용할 스타일이 많다면 세미콜론으로 끊어서 들여쓰기로 구분한다.
선택자란 HTML 문서 속에 스타일을 적용하고자 하는 대상을 선택한다는 의미이다.
.p { color: red; font-size: 16px; }CSS 선언 방식
- 내장 방식 : <head> 태그 속 <style> 태그 내에서 스타일 작성(별도의 CSS 파일이 필요없으나 길수록 수정하기 어려움)
- 링크 방식 : <head> 태그 속 <link> 태그를 사용하여 외부 CSS 파일과 연결(가장 권장되는 방식)
- 인라인 방식 : HTML 요소에서 스타일 속서을 통해 직접 스타일 작성(선택자가 없고 우선 적용 순위 높음)
- @import 방식 : CSS 파일 내에서 또 다른 CSS 파일을 연결하는 방식(지연 문제 발생 높음)
기본 선택자
- 전체 선택자 * : 전체 요소를 선택
- 태그 선택자 p, a 등 : 해당 태그를 선택
- 클래스 선택자 .(class) : 클래스명을 입력하여 해당 클래스 선택
- 아이디 선택자 #(id) : id명을 입력하여 해당 id 선택
클래스와 아이디의 차이로, id는 HTML 문서에서 중복되어 사용할 수 없다.
이 글에서는 기본 선택자만 다룬다. 복합 선택자나 가상 요소 선택자 등은 프로젝트 과정에서 다루겠다.
선택자 우선 순위
- @important 스타일
- 인라인 스타일
- Id 스타일
- Class 스타일
- Tag 스타일
- 전체 선택자
스타일 간의 충돌을 막기 위해 우선 순위에 따라 스타일을 적용한다.
JavaScript 자바스크립트(JavaScript)란 무엇인가
자바스크립트(JavaScript)는 객체 기반 스크립트 언어로, 특수한 경우를 제외하고 모든 웹 브라우저에 내장되어 있다. HTML, CSS만으로 구성된 웹 페이지를 JavaScript로 움직인다. 웹 페이지뿐만 아니라 모바일 앱을 개발하거나 프론트 영역을 넘어 백엔드(Node.JS)까지 사용할 수 있는 언어이다. *Java 언어와는 거의 관련 없는 언어이므로 헷갈리지 말자.
JavaScript는 내부 Script에서는 <script> 태그를 통해 HTML 문서 내부에서 위치 상관없이 사용할 수 있으나 보통 <body> 태그 아래에 사용한다.(주로 테스트용으로 사용된다.)
외부 Script에서는 <script> 태그에서 src의 속성으로 HTML 문서와 별개인 .js 파일(JavaScript 파일)의 파일 경로를 입력하면 된다.
JavaScript의 기본 문법 - 크게 네 가지로 나뉜다
변수
변수란 상자 안에 값을 담는 개념이다. 변수를 선언하는 방법은 다음과 같다.
var (변수명)
var a; var a, b; // 동시 선언 var a = 1; // 선언과 초기화 var a = 1, i = 10, alphabet="abc"; // 동시에 선언과 초기화let (변수명)
let a; let a, b; // 동시 선언 let a = 1; // 선언과 초기화 let a = 1, i = 10, alphabet="abc"; // 동시에 선언과 초기화const (변수명)
const a = 1; // 선언과 초기화 const a = 1, i = 10, alphabet="abc"; // 동시에 선언과 초기화위 세 방법은 각각 차이가 있다.
- var는 이미 존재하는 변수 이름을 또 선언해도 에러가 나지 않는다. 하지만 let, const는 이미 존재하는 변수 이름을 또 선언하면 에러가 난다.
- var, let은 초기 값을 주지 않아도 괜찮으나 const는 반드시 초기 값을 할당해야 한다.
- var, let은 다시 값을 할당할 수 있지만 const는 값을 변경할 수 없다.
함수
함수란 입력값을 받아 처리해서 출력값을 반환하는 코드 블록이다. 이를 사용하여 코드를 재사용하거나 중복되는 걸 방지하고 코드의 가독성과 유지보수성도 높일 수 있다.
함수 선언 방법
function 함수명(함수 내에서 사용할 매개변수1, 매개변수2, ...) { // 함수 내용 return 반환값; }함수명은 식별자이며 매개변수는 함수 내에서 사용되는 입력값이다. 함수 내용을 입력한 후 return 키워드로 출력값을 반환한다. return 키워드가 생략되면 함수는 undefined 값을 반환한다.
함수는 다른 함수 내부에서 선언될 수 있고 선언된 위치에 따라 스코프가 결정된다. 따라서 함수도 변수에 할당하여 선언할 수 있는데, 이를 함수 표현식이라 한다.
함수 표현식
let 함수명 = function(매개변수1, 매개변수2, ...) { // 함수 내용 return 반환값; }함수 표현식에서 함수명을 생략할 수 있는데, 이를 익명 함수라고 한다.
조건문
JavaScript에서의 조건문은 if문, switch문이 있다. 비교, 논리 연산자와 boolean 타입을 이용한다.
if문
if문은 조건식이 true인 경우에만 실행되며, false일 경우에는 else 식이 실행된다.
if (조건식) { // 조건식이 참일 때 실행될 코드 } else { // 조건식이 참이 아닐 때 실행될 코드 }여러 조건이 필요한 경우 else if를 추가할 수 있다.
if (조건식) { // 조건식이 참일 때 실행될 코드 } else if (두 번째 조건식) { // 조건식이 참이 아닐 때 실행될 코드 } else { // 두 번째 조건식이 참이 아닐 때 실행될 코드 }예제
let num = 10; if (num < 0) { console.log("음수"); } else if (num == 0) { console.log("0"); } else if (num < 10) { console.log("한 자리 양수"); } else { console.log("두 자리 이상의 양수"); }switch문
특정 값에 대한 여러 가지 조건을 비교할 때 사용된다. 조건에 맞는 case의 내용은 실행되고 다음 case의 실행을 break 키워드를 통해 중단시킬 수 있다. 다르게 말하면 break 키워드가 없을 때 다음 case도 실행된다.
switch (변수) { case 조건1: // 조건1일 때 실행할 코드 break; case 조건2: // 조건2일 때 실행할 코드 break; default: // 모든 case에 해당하지 않을 때 실행할 코드 }예제
let animal = '사자'; switch (animal) { case '강아지': console.log('강아지입니다.'); break; case '고양이': console.log('고양이입니다.'); break; case '사자': console.log('사자입니다.'); break; default: console.log('일치하는 동물이 없습니다.'); } // 사자입니다.반복문
반복문은 동일한 코드를 여러 번 실행한다. 조건이 true일 때까지 실행하고, false일 때 반복문을 종료한다.
while문
while (조건문) { // 반복적으로 실행할 코드 }while의 조건문 변수 선언이 중괄호 밖에 있으므로 다른 곳에서 같은 변수 사용이 어렵다.
예제
let i = 0; while ( i < 10 ) { console.log(i); i++; }위 코드에서 i 변수는 0으로 초기화 되고 i는 1씩 증가하므로 0부터 9까지의 수가 차례로 출력된다.
do-while문
while문과 달리 조건을 먼저 검사하지 않고, 코드 블록 내부를 먼저 한 번 실행한 후 조건을 검사한다.
코드를 먼저 한 번은 실행해야 될 때 사용한다.
do { // 반복 실행될 코드 } while (조건문);
for문
for문은 while문처럼 변수 선언이 바깥에 있지 않아서 충돌이 잘 일어나지 않는다.
while문보다 간결하고 가독성이 좋다는 장점이 있다.
for (초기식; 조건식; 증감식) { // 실행할 코드 블록 }예제
let sum = 0; for (let i = 0; i < 10; i++) { sum += i; } console.log(sum); // 55