웹사이트 코딩 기초 ; 웹사이트 구동 방식 이해
화면을 만드는 언어 (프론트엔드)
프론트엔드는 "사용자가 직접 보는 화면"
언어 | 설명 |
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 문서를 받아와 화면에 웹사이트를 보여줌
웹사이트가 뜨는 전체 과정 요약 (한 줄씩 이해)
- 우리가 브라우저에 naver.com 입력
- DNS 서버가 "그거 IP 주소는 이거야!" 알려줌
- 브라우저가 그 IP 주소에 접속
- 서버는 80번 문(PORT) 열어놓고 대기 중
- 서버는 내부 폴더에서 HTML 코드 꺼냄
- 그 HTML 코드를 브라우저한테 전달
- 브라우저가 코드를 해석해서 화면에 웹사이트 출력
"네이버 집주소 알려줘!" → 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("안녕");
}
- i = 0부터 시작
- i < 5 → 조건이 참이면 alert 실행
- i = i + 1로 i를 1 증가
- 다시 조건 검사 → 반복
- 결과: “안녕”이라는 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 → 무슨 값인지 명확하게 표현
'IT 스타트업 사업 개발(BD) 부트캠프' 카테고리의 다른 글
CSS 활용 심화 display, position, float, clear (2) | 2025.03.16 |
---|---|
CSS, HTML 적용 활용 (0) | 2025.03.15 |
소스코드, HTML 기본 구조 (웹개발 기초 1) (1) | 2025.03.14 |
카피라이팅 & 제품 상세페이지 작성 방법 (1) | 2025.03.12 |
카피라이팅 마케팅 전략 스토리텔링 이해 (0) | 2025.03.11 |
댓글
이 글 공유하기
다른 글
-
CSS 활용 심화 display, position, float, clear
CSS 활용 심화 display, position, float, clear
2025.03.16 -
CSS, HTML 적용 활용
CSS, HTML 적용 활용
2025.03.15 -
소스코드, HTML 기본 구조 (웹개발 기초 1)
소스코드, HTML 기본 구조 (웹개발 기초 1)
2025.03.14 -
카피라이팅 & 제품 상세페이지 작성 방법
카피라이팅 & 제품 상세페이지 작성 방법
2025.03.12