웹사이트 코딩 기초 ; 웹사이트 구동 방식 이해

 

 

화면을 만드는 언어 (프론트엔드)

프론트엔드는 "사용자가 직접 보는 화면"

언어	설명
HTML	웹페이지의 뼈대/구조 (예: 제목, 문단, 이미지 등)
CSS	HTML을 예쁘게 꾸미는 스타일 (색, 글씨 크기, 배경 등)
Bootstrap	CSS를 쉽게 쓸 수 있게 도와주는 디자인 템플릿 모음
jQuery	자바스크립트를 더 쉽게 쓰게 해주는 도구 (지금은 덜 씀)
JavaScript	클릭, 스크롤, 팝업 등 사용자 행동에 반응하는 코드
react.js / vue.js	복잡한 UI를 효율적으로 만들 수 있는 자바스크립트 프레임워크/라이브러리

 

서버를 만드는 언어 (백엔드)

 

백엔드는 "보이지 않는 서버"에서 데이터 처리, 저장, 전송을 담당

 

언어	기술설명
PHP	서버에서 돌아가는 오래된 웹 언어, 워드프레스도 이걸로 만듦
python	요즘 많이 쓰는 다목적 언어, 웹 서버도 가능 (Django, Flask 등)
asp	마이크로소프트에서 만든 웹 서버 언어 (.NET 기반)
jsp	자바(Java)로 웹 서버 만들 때 쓰는 기술

 

도메인(domain)은 웹사이트의 주소

도메인은 인터넷에서 웹사이트를 찾기 위한 사람이 읽을 수 있는 주소

복잡한 IP 주소(숫자) 를 사람들이 기억하기 쉽게 만듦

 

DNS는 도메인 이름을 숫자(IP 주소)로 바꿔주는 전화번호부 역할

 

브라우저는 주소로 서버에 접속해서 HTML 문서를 받아와 화면에 웹사이트를 보여줌 

 

웹사이트가 뜨는 전체 과정 요약 (한 줄씩 이해)

1. 우리가 브라우저에 naver.com 입력
2. DNS 서버가 "그거 IP 주소는 이거야!" 알려줌
3. 브라우저가 그 IP 주소에 접속
4. 서버는 80번 문(PORT) 열어놓고 대기 중
5. 서버는 내부 폴더에서 HTML 코드 꺼냄
6. 그 HTML 코드를 브라우저한테 전달
7. 브라우저가 코드를 해석해서 화면에 웹사이트 출력

 

 "네이버 집주소 알려줘!" → DNS가 주소 알려줌
네이버 집 문(80번 포트)을 두드림 → 안에서 HTML 문서 줌
그 문서 읽고 네이버 사이트 화면으로 보여줌

 

브라우저는 주소로 서버에 접속해서 HTML 문서를 받아와 화면에 웹사이트를 보여줌 

 

 

변수(let)와 상수(const)

핵심 차이: let vs const

구분	설명	바꿀 수 있나?
let	나중에 값을 바꿀 수 있는 변수	✅ 가능
const	한 번 정하면 값을 못 바꾸는 상수	❌ 불가능

let myAge = 29;
let myName = "허슬러";
const bloodType = "O";

 

 

• myAge, myName은 나중에 값 변경 가능 → 예: 나이 바뀌면 myAge = 30; 가능
• bloodType은 O형으로 고정 → 절대 변경 불가!
• const는 선언할 때 무조건 값을 넣기
• let은 나중에 값을 넣어도 OK

 

함수 ( OOO계산기 기계)

어떤 작업(계산 등)을 반복할 때 이름 붙여서 묶어둔 코드 덩어리

 

 

부분	뜻
function	함수 만들기 키워드
get(  )	함수 이름 (OOO 계산하는 함수)
(weight, height)	매개변수 (사용자가 넣어줄 값)
return	계산한 결과를 밖으로 보내줌

 

function

getTotal(price, quantity) {
return price * quantity;
}

getTotal(3000, 4); // → 12000

👉 물건 가격이랑 개수를 넣으면 총 금액 계산
🛒 예: 커피 4잔 × 3000원 = 12000원

 

 

 if 

조건이 맞으면 A 실행, 아니면 B 실행"하는 분기 문장

 

if (조건) {
  // 조건이 true일 때 실행되는 코드
} else {
  // 조건이 false일 때 실행되는 코드
}

 

조건이 신호등처럼 판단 기준 → true면 위, false면 아래로 실행

 

if (조건1) {
  // 조건1이 true면 이 코드 실행
} else if (조건2) {
  // 조건1은 false, 조건2가 true면 이 코드 실행
} else {
  // 위 조건 다 false면 이 코드 실행
}

 

조건을 여러 단계로 검사!
위에서부터 순서대로 검사, 걸리는 조건 하나만 실행

 

let x = 20;

if (x / 5 == 4) {
box("A");
} else if (x / 4 == 5) {
box("B");
} else {
box("C");
}


x / 5 == 4 → 20 / 5 = 4 → true → ✅ box("A") 실행
else if, else는 무시됨 (첫 번째에서 이미 걸렸으니까)


만약 x가 20이 아니라 16이었다면?
16 / 5 == 4 → ❌
false 16 / 4 == 5 → ❌
false 둘 다 아니니까 → box("C") 실행됨

넌 A문, B문, C문 앞에 서있어.
조건을 보고 맞는 문 하나만 통과할 수 있어
처음 통과한 문에서 멈춘다!

키워드	기능
if	첫 번째 조건 확인
else if	추가 조건 확인
else	아무 조건도 안 맞을 때 실행
비교 연산자	==, ===, !=, >, < 등 사용 가능

 

alert 

이 코드는 숫자 a가 3, 2, 5 중 어떤 수의 배수인지 순서대로 확인해서
해당되는 메시지를 alert로 보여준다.

 

a % 숫자 == 0 뜻

a를 숫자로 나눴을 때 나머지가 0이면 → 배수

 

let a = 6;

if (a % 3 == 0) {
  alert("3의 배수입니다.");
} else if (a % 2 == 0) {
  alert("2의 배수입니다.");
} else if (a % 5 == 0) {
  alert("5의 배수입니다.");
}

 

해석 (입력값: a = 6)

a % 3 == 0

• 6 ÷ 3 = 2 → 나머지 0 → 맞음
• 그래서 alert("3의 배수입니다.") 실행됨
• 뒤에 조건은 아예 무시돼 (첫 조건에 이미 걸렸으니까!)

 

if ~ else if ~ else if 구조 핵심

• 위에서부터 조건을 차례로 검사
• 조건이 처음으로 맞는 곳에서 멈추고 실행
• 뒤에 조건은 무시

 

연산자

 

 

|| (또는, OR 연산자)

하나라도 조건이 맞으면 실행됨
→ "둘 중 하나라도 OK?"

 

if (a > 10 || b > 10) {
  // a나 b 둘 중 하나라도 10보다 크면 실행
}

 

&& (그리고, AND 연산자)

둘 다 조건이 맞아야 실행됨
→ "둘 다 OK여야 해!"

 

if (a > 10 && b > 10) {
  // a도 b도 둘 다 10보다 커야 실행
}

 

++ (1 증가)  / -- (1 감소)

변수 값을 1만큼 증가시켜줌
x = x + 1 과 같은 의미!

 

let x = 5;
x++;  // x는 이제 6

 

let age = 20;
let hasTicket = true;

if (age >= 19 && hasTicket) {
console.log("입장 가능");
}

let count = 0;
count++;// 1
count--; // 0


나이(age)가 19세 이상 
티켓 있음(hasTicket === true) 
두 조건 다 만족해야 입장 가능 출력됨 → 둘 다 참이니까 콘솔에 "입장 가능"

 

 

for문 (반복문)

for문은 "반복되는 일을 자동으로 해주는 로봇"
예: 5명이 들어오면 "안녕" 인사 5번 해주는 거야

 

for(시작조건; 끝조건; 증감조건) {
  반복할 코드
}

 

 

for (let i = 0; i < 5; i = i + 1) {
  alert("안녕");
}

 

1. i = 0부터 시작
2. i < 5 → 조건이 참이면 alert 실행
3. i = i + 1로 i를 1 증가
4. 다시 조건 검사 → 반복
5. 결과: “안녕”이라는 alert가 5번 뜸!

 

구성	예시	의미
시작조건	let i = 0	반복을 어디서부터 시작할지
끝조건	i < 5	언제까지 반복할지 (조건이 false되면 멈춤)
증감조건	i = i + 1	반복할 때마다 숫자 어떻게 바꿀지

 

 

 

배열 

여러 개의 값을 하나의 변수에 담을 수 있는 그릇 = 데이터 묶음

개념	설명
[]	배열을 만들 때 사용
alphabet[0]	배열의 첫 번째 값에 접근
.length	배열에 몇 개 들어 있는지 알려줌

 

 

let alphabet = [ "A", "B", "C", "D" ];

• alphabet은 배열 이름
• ["A", "B", "C", "D"]는 4개의 문자가 들어 있는 리스트
• 이 변수 하나로 A~D를 한 번에 다룰 수 있음

 

배열 안의 값 꺼내기 (인덱스 사용)

console.log(alphabet[0]);  // "A"
console.log(alphabet[2]);  // "C"

 

배열은 0부터 숫자를 매김

• 0번째: "A"
• 1번째: "B"
• 2번째: "C"
• 3번째: "D"

 

반복문으로 배열 전체 출력하기

for (let i = 0; i < alphabet.length; i++) {
  console.log(alphabet[i]);
}

 

= alphabet.length는 배열 길이 (여기선 4)

 

 

예시  배열 + for문 

// 1. 과일명 5개를 담은 배열
let fruits = ["사과", "바나나", "딸기", "포도", "수박"];

// 2. 각 과일 가격을 담은 배열
let prices = [1000, 1500, 2000, 2500, 3000];

// 3. for문으로 과일을 alert로 띄우기
for (let i = 0; i < fruits.length; i++) {
  alert(fruits[i] + " 입니다!");
}

// 4. 과일 가격의 총합 구하기
let total = 0;
for (let i = 0; i < prices.length; i++) {
  total += prices[i];
}

alert("과일 총합 가격은 " + total + "원 입니다!");

 

단계설명

1️⃣	과일명 배열 만들기 (["사과", "바나나", ...])
2️⃣	과일 가격 배열 만들기 ([1000, 1500, ...])
3️⃣	for문으로 과일 이름 하나씩 alert 띄우기
4️⃣	for문으로 가격들 더해서 alert로 총합 출력

 

 

• 배열끼리 인덱스 맞춰서 사용하면, "사과" → 1000원, "바나나" → 1500원처럼 짝이 맞아!
• fruits.length나 prices.length는 자동으로 배열 길이를 알려줘서 범위 실수 안 해도 돼
• 현재 코드 최종 합계만 1번 alert
• 배열 길이가 바뀌면 코드도 수정해야한다. ( <배열.length / 더 안전하고 유연한 방법)
• fruits, prices → 무슨 값인지 명확하게 표현