john-lennon 님의 블로그

[프로그래머스] 컨트롤 제트

john-lennon — Wed, 10 Jun 2026 11:21:20 +0900

문제 설명

숫자와 "Z"가 공백으로 구분되어 담긴 문자열이 주어집니다. 문자열에 있는 숫자를 차례대로 더하려고 합니다. 이 때 "Z"가 나오면 바로 전에 더했던 숫자를 뺀다는 뜻입니다. 숫자와 "Z"로 이루어진 문자열 s가 주어질 때, 머쓱이가 구한 값을 return 하도록 solution 함수를 완성해보세요.

제한사항

1 ≤ s의 길이 ≤ 200
-1,000 < s의 원소 중 숫자 < 1,000
s는 숫자, "Z", 공백으로 이루어져 있습니다.
s에 있는 숫자와 "Z"는 서로 공백으로 구분됩니다.
연속된 공백은 주어지지 않습니다.
0을 제외하고는 0으로 시작하는 숫자는 없습니다.
s는 "Z"로 시작하지 않습니다.
s의 시작과 끝에는 공백이 없습니다.
"Z"가 연속해서 나오는 경우는 없습니다.

입출력 예

s	result
"1 2 Z 3"	4
"10 20 30 40"	100
"10 Z 20 Z 1"	1
"10 Z 20 Z"	0
"-1 -2 -3 Z"	-3

나의 코드

function solution(s) {
    let arr = s.split(" ");
    let stack = [];
    
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === "Z") {
            stack.pop();
        } else {
            stack.push(Number(arr[i]));
        }
    }
    
    return stack.reduce((acc, cur) => {
        return acc + cur;
    }, 0);
}

방식

1. 문자열을 공백 기준으로 나눈다.

2. 배열을 순회한다.

3. 스택을 이용해 값을 관리한다.

4. 반복문이 끝나면 스택에 남아 있는 숫자들만 합산한다.

다른 사람의 코드

function solution(s) {
    const stack = []

    s.split(' ').forEach((target) => {
        if(target === 'Z') stack.pop();
        else stack.push(+target)
    })

    return stack.length ? stack.reduce((pre, cur) => pre + cur) : 0;
}

나와의 차이점

나와 동일하게 스택을 활용한 풀이 방식이지만, for문 대신 forEach()를 사용해 배열 요소를 하나씩 처리하여 코드가 더 간결하고 깔끔함.

[프로그래머스] 모음 제거

john-lennon — Sun, 7 Jun 2026 16:23:11 +0900

문제 설명

영어에선 a, e, i, o, u 다섯 가지 알파벳을 모음으로 분류합니다. 문자열 my_string이 매개변수로 주어질 때 모음을 제거한 문자열을 return하도록 solution 함수를 완성해주세요.

제한사항

my_string은 소문자와 공백으로 이루어져 있습니다.
1 ≤ my_string의 길이 ≤ 1,000

입출력 예

my_string	result
"bus"	"bs"
"nice to meet you"	"nc t mt y"

나의 코드

function solution(my_string) {
    const ben = ["a", "e", "i", "o", "u"];
    
    return my_string.split("").filter((v) => {return !ben.includes(v)}).join("")
}

방식

1. 제거할 모음 배열을 만든다

2. 문자열을 한 글자씩 배열로 자른다

3. filter로 몽므이 아닌 문자만 남긴다

4. 배열을 다시 문자열로 합친다

다른 사람의 코드

function solution(my_string) {
    return my_string.replace(/[aeiou]/g, '');
}

내 코드와 차이점

1. 정규표현식으로 모음을 찾는다

2. 찾은 모음을 빈 문자열('')로 바꾼다

느낀점

다른 사람의 풀이를 보고 replace()오 정규표현식을 이용하면 배열을 만들지 않고도 문자열에서 특정 패턴을 바로 찾아 제거할 수 있다는 것을 알게 되었다.

1-4 목록 태그

john-lennon — Thu, 4 Jun 2026 14:50:30 +0900

안녕하세요. 이번 포스팅에서는 HTML에서 목록(List)을 만들 때 사용하는 ul, ol, li 태그를 정리해보았습니다.

웹페이지를 만들다 보면 메뉴 목록, 순서가 있는 설명, 체크리스트 등 여러 개의 항목을 나열해야 하는 경우가 있습니다.

이럴 때 단순히 줄바꿈으로 작성하는 것이 아니라 HTML의 목록 태그를 사용하면 구조를 더 명확하게 표현할 수 있습니다.

처음에는 ul, ol, li가 비슷학세 보여 헷갈릴 수 있지만 각각의 역할을 이해하면 상황에 맞게 사용할 수 있습니다.

학습 목표

웹 페이지에서는 메뉴, 게시판, 카테고리, 검색 결과 등 여러 정보를 목록 형태로 보여주는 경우가 많습니다. 이번 포스팅에서는 HTML의 목록 태그인 ul, ol, li를 사용하여 정보를 구조적으로 표현하는 방법을 익혀보겠습니다.

순서가 없는 목록(ul)을 이해한다.
순서가 있는 목록(ol)을 이해한다.
목록 항목을 만드는 li 태그를 이해한다.
각 태그가 언제 사용되는지 구분할 수 있다.
직접 코드를 작성하며 목록 구조를 확인한다.

태그 하나씩 살펴보기

순서가 없는 목록

<ul>

Unordered List의 약자로 순서가 없는 목록을 만들 때 사용합니다. 브라우저에서는 기본적으로 앞에 ● 모양의 불릿(Bullet)이 표시됩니다.

메뉴 목록, 기능 소개, 준비물 목록처럼 순서가 중요하지 않은 경우에 사용합니다.

순서가 있는 목록

<ol>

Ordered List의 약자로 순서가 있는 목록을 만들 때 사용합니다. 브라우저에서는기본적으로 1, 2, 3 형태의 번호가 붙습니다.

설치 순서, 회원가입 절차, 요리 레시피처럼 순서가 중요한 경우에 사용합니다.

목록 항목

<li>

List item의 약자로 목록의 각 항목을 의미합니다. ul 또는 ol 태그 안에서 사용하며 실제 목록 내용을 작성하는 역할을 합니다.

li 태그는 단독으로 사용하지 않고 반드시 ul 또는 ol 안에 작성하는 것이 일반적입니다.

< 왜 li만 쓰면 안 될까? >
간혹 아래와 같이 li 태그만 사용하는 경우가 있습니다.

<li>사과</li>
<li>바나나</li>
<li>포도</li>

하지만 브라우저 입장에서는 이것이 순서가 있는 목록인지, 순서가 없는 목록인지 알 수 없습니다. 그래서 li는 반드시 ul 또는 ol 안에서 사용해아 합니다.
목록 전체를 김싸는 부모 태그가 있어야 HTML 구조가 올바르게 작성됩니다.

태그 한눈에 정리

태그	역할
ul	순서가 없는 목록
ol	순서가 있는 목록
li	목록의 개별 항목

실습하기

VS Code를 실행한 후 새 파일을 엽니다. 파일 안에 느낌표( ! )를 입력하고 Tab 키를 누르면 HTML5 기본 구조가 자동완성됩니다. 이후 아래 예제 코드를 <body> 안에 작성해보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록 태그</title>
</head>
<body>
    <h2>좋아하는 과일</h2>
    
    <ul> 
        <li>사과</li> 
        <li>바나나</li> 
        <li>포도</li> 
    </ul> 
    
    <hr> 
    
    <h2>회원가입 순서</h2> 
    
    <ol> 
        <li>회원 정보 입력</li> 
        <li>이메일 인증</li> 
        <li>가입 완료</li> 
    </ol>
</body>
</html>

코드를 다 작성했으면 VS Code 하단이나 파일에서 우클릭 후 Open with Live Server를 클릭해 브라우저로 열어보세요.

페이지가 실행되면 ul 태그와 ol 태그의 차이를 직접 확인해보세요.

ul 태그는 각 항목 앞에 ● 모양의 불릿(Bullet)이 표시됩니다.
ol 태그는 각 항목 앞에 1, 2, 3과 같은 번호가 자동으로 표시됩니다.
두 태그 모두 여러 항목을 목록 형태로 묶어주지만, 순서의 중요 여부에 따라 사용하는 태그가 달라집니다.

코드의 내용을 변경해가며 목록 항목을 추가하거나 삭제해보세요. 브라우저 화면이 어떻게 바뀌는지 직접 확인해보는 것이 가장 좋은 학습 방법입니다.

마치며

오늘은 HTML에서 목록을 만들 때 사용하는 ul, ol, li 태그를 살펴보았습니다. 목록을 표현할 때는 단순히 줄바꿈을 사용하는 것이 아니라 상황에 맞는 태그를 선택하는 것이 중요합니다.

특히 ul과 ol의 차일르 이해하고, li가 목록의 개별 항목이라는 점을 기억해두면 앞으로 다양한 웹 페이지를 만들 때 도움이 될 것입니다. 궁금한 점은 댓글 남겨주세요!

[프로그래머스] 배열 회전시키기

john-lennon — Thu, 4 Jun 2026 14:20:21 +0900

문제 설명

정수가 담긴 배열 numbers와 문자열 direction가 매개변수로 주어집니다. 배열 numbers의 원소를 direction방향으로 한 칸씩 회전시킨 배열을 return하도록 solution 함수를 완성해주세요.

제한사항

3 ≤ numbers의 길이 ≤ 20
direction은 "left" 와 "right" 둘 중 하나입니다.

입출력 예

numbers	direction	result
[1, 2, 3]	"rigth"	[3, 1, 2]
[4, 455, 6, 4, -1, 45, 6]	"left"	[455, 6, 4, -1, 45, 6, 4]

나의 코드

function solution(numbers, direction) {

    if (direction === "left") {
        numbers.push(numbers.shift());
    } else {
        numbers.unshift(numbers.pop());
    }
    
    return numbers;
    
}

방식

1. 왼쪽 회전(left)은 맨 앞 원소를 맨 뒤로 이동한다.

2. 맨 앞 원소를 꺼내기 위해 shift()를 사용한다.

3. 꺼낸 원소를 맨 뒤에 넣기 위해 push()를 사용한다.

4. 오른쪽 회전(right)은 맨 뒤 원소를 맨 앞으로 이동한다.

5. 맨 뒤 원소를 꺼내기 위해 pop()을 사용한다.

6. 꺼낸 원소를 맨 앞에 넣기 위해 unshift()를 사용한다.

push() → 맨 뒤 추가
pop() → 맨 뒤 제거
unshift() → 맨 앞 추가
shift() → 맨 앞 제거

[프로그래머스] 공 던지기

john-lennon — Thu, 4 Jun 2026 13:39:10 +0900

문제 설명

머쓱이는 친구들과 동그랗게 서서 공 던지기 게임을 하고 있습니다. 공은 1번부터 던지며 오른쪽으로 한 명을 건너뛰고 그다음 사람에게만 던질 수 있습니다. 친구들의 번호가 들어있는 정수 배열 numbers와 정수 K가 주어질 때, k번째로 공을 던지는 사람의 번호는 무엇인지 return 하도록 solution 함수를 완성해보세요.

제한사항

2 < numbers의 길이 < 100
0 < k < 1,000
numbers의 첫 번째와 마지막 번호는 실제로 바로 옆에 있습니다.
numbers는 1부터 시작하며 번호는 순서대로 올라갑니다.

입출력 예

numbers	k	result
[1, 2, 3, 4]	2	3
[1, 2, 3, 4, 5, 6]	5	3
[1, 2, 3]	3	2

나의 코드

function solution(numbers, k) {
    const idx = ((k - 1) * 2 ) % numbers.length
    
    return numbers[idx];
}

방식

1. k번째 던지는 사람의 인덱스 위치를 구한다.

2. 배열 끝을 넘어가면 처음으로 돌아가야 하므로 %를 사용한다.

3. 최종 인덱스를 구한다.

DFS & BFS

john-lennon — Mon, 1 Jun 2026 14:47:37 +0900

그래프 탐색 알고리즘이란 어떤 노드(정점)에서 출발해서 연결된 노드를 빠짐없이 방문하는 방법에 대한 규칙입니다. 오늘은 그 중에서도 가장 기본이 되는 두가지 탐색 방식, DFS와 BFS를 알아보겠습니다.

DFS와 BFS란?

DFS(Depth-First Search, 깊이 우선 탐색) 는 한 방향으로 갈 수 있는데까지 끝까지 들어갔다가, 더 갈 곳이 없으면 되돌아와서 다른 방향을 탐색하는 방식입니다.

BFS(Breadth-First Search, 너비 우선 탐색) 는 출발 노드에서 가까운 노드부터 먼저 전부 방문하고, 그 다음 거리에 있는 노드들을 방문하는 방식입니다.

쉽게 말하면, DFS는 "일단 끝까지 파고들기", BFS는 "주변부터 차근차근 퍼져나가기"라고 볼 수 있습니다.

핵심 개념

① DFS ㅡ 스택(Stack) 또는 재귀(Recursion)를 사용

DFS는 방문한 경로를 쌓아두고 막히면 되돌아가는 방식으로 동작합니다. 이 "쌓아두고 되돌아가는" 구조가 스택과 똑같기 때문에, 재귀 함수로 구현하면 콜스택이 이 역할을 자동으로 해줍니다.

콜스택(Call Stack)이란? 함수가 호출될 때마다 그 함수 정보를 쌓아두는 공간입니다. 재귀로 dfs()를 호출하면 호출할 때마다 스택에 쌓이고, 함수가 끝나면 하나씩 꺼내지면서 자동으로 이전 위치로 돌아옵니다. DFS의 "되돌아가기"가 바로 이 원리입니다.

② BFS ㅡ 큐(Queue)를 사용

BFS는 방문할 노드를 줄 세워두고 앞에서부터 하나씩 꺼내 처리하는 방식입니다. 먼저 들어온 것이 먼저 나가는 큐의 구조가 "가까운 것부터 방문한다"는 BFS의 성질과 맞아떨어집니다.

③ 방문 처리가 필수

둘 다 한 번 방문한 노드는 다시 방문하지 않도록 체크해둬야 합니다. 체크하지 않으면 무한 루프에 빠질 수 있습니다.

그래서 이걸 왜 배우는 걸까요?

미로를 탈출하는 게임을 생각해봅시다. 출구를 찾기 위해 두 가지 전략을 쓸 수 있습니다. 하나는 한 방향을 정해서 막힐 때까지 쭉 가다가 막히면 되돌아오는 것이고, 다른 하나는 현재 위치에서 갈 수 있는 길을 모두 한 칸씩 탐색하면서 넓게 퍼지는 것입니다.

첫번째가 DFS, 두번째가 BFS입니다. 미로만이 아니라 SNS 친구 추천(몇 촌 관계인지), 네비게이션의 경로 탐색, 게임의 AI 로직까지 이 두 알고리즘이 그 뼈대가 됩니다.

실습 ㅡ 동작 과정 따라가기

아래 그래프에서 A를 시작으로 탐색하는 과정을 단계별로 보겠습니다. 연결 관계는 다음과 같습니다.

A — B — D
| |
C — E F

DFS 과정

A 방문 → 연결된 B, C 중 B 선택
B 방문 → 연결된 D 선택
D 방문 → 연결된 F 선택
F 방문 → 더 갈 곳 없음 → 되돌아감
B로 돌아와도 더 갈 곳 없음 → A로
A에서 C 선택 → C 방문, E 방문

방문 순서: A → B → D → F → C → E

BFS 과정

A 방문, 큐에 B, C 추가
B 꺼냄 → 방문, 큐에 D 추가
C 꺼냄 → 방문, 큐에 E 추가
D 꺼냄 → 방문, 큐에 F 추가
E 꺼냄 → 방문
F 꺼냄 → 방문

방문 순서: A → B → C → D → E → F

코드로 보기

// 그래프 (인접 리스트 방식)
const graph = {
  A: ['B', 'C'],
  B: ['A', 'D'],
  C: ['A', 'E'],
  D: ['B', 'F'],
  E: ['C'],
  F: ['D']
};

// DFS - 재귀로 구현
function dfs(graph, node, visited = new Set()) {
	visited.add(node);
    console.log(node);
    
    for (const neighbor of graph[node]) {
    	if (!visited.has(neighbor)) {
        	dfs(graph, neighbor, visited);  // 재귀로 더 깊이
        }
    }
}

// BFS - 큐로 구현
function bfs(graph, start) {
	const visited = new Set();
    const queue = [start];  // 큐에 시작 노드 추가
    visited.add(start);
    
    while (queue.length > 0) {
    	const node = queue.shift();  // 앞에서 꺼냄
        console.log(node);
        
        for (const neighbor of graph[node]) {
        	if (!visited.has(neighbor)) {
            	visited.add(neighbor);
                queue.push(neighbor);  // 뒤에서 추가
            }
        }
    }
}

dfs(graph, 'A');  // A B D F C E
bfs(graph, 'A');  // A B C D E F

참고 ㅡ DFS와 BFS 비교

같은 그래프라도 무엇을 구해야 하느냐에 따라 적합한 알고리즘이 달라집니다. 문제를 보고 "이건 깊이 우선이 맞나, 너비 우선이 맞나"를 판단하는 것이 핵심입니다.

항목	DFS	BFS
사용 자료구조	스택 / 재귀	큐
탐색 방향	깊이 우선 (끝까지)	너비 우선 (가까운 순서)
최단 경로 보장	X	✓ (가중치 없는 그래프)
적합한 상황	경로 존재 여부, 사이클 탐지	최단 거리, 레벨별 탐색
메모리 사용	상대적으로 적음	노드 수에 비례해 많아질 수 있음

기중치 없는 그래프란? 노드 사이의 이동 비용이 모두 동일한 그래프입니다. 예를 들어 A → B → C와 A → D → C가 있을 때, 모든 이동이 똑같이 1칸이라면 BFS는 출발지에서 가까운 순서대로 탐색하기 때문에 처음 도착한 경로가 곧 최단 경로가 됩니다. 반면 경로마다 거리나 비용이 다르다면 (가중치가 있다면) BFS만으로는 최단 경로를 보장할 수 없고, 다익스트라 같은 별도 알고리즘이 필요합니다.

마치며

DFS와 BFS, 두 알고리즘을 모두 이해하고 나면 자연스럽게 이런 질문이 생깁니다. "이 문제는 DFS로 풀어야 할까, BFS로 풀어야 할까?" 바로 그 판단을 할 수 있게 되는 것이 이번 학습 목표입니다.

알고리즘을 외우는 것보다, 어떤 상황에서 어떤 탐색 방식이 자연스러운지 느낌을 갖는 것이 중요합니다. 궁금한 점이 있다면 댓글 남겨주세요!

[프로그래머스] 가위 바위 보

john-lennon — Sun, 31 May 2026 17:42:34 +0900

문제 설명

가위는 2 바위는 0 보는 5로 표현합니다. 가위 바위 보를 내는 순서대로 나타낸 문자열 rsp가 매개변수로 주어질 때, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 return하도록 solution 함수를 완성해보세요.

제한사항

0 < rsp의 길이 ≤ 100
rsp와 길이가 같은 문자열을 return 합니다.
rsp는 숫자 0, 2, 5로 이루어져 있습니다.

입출력 예

rsp	result
"2"	"0"
"205"	"052"

나의 코드

function solution(rsp) {
    let answer = "";
  
    for (let i = 0; i < rsp.length; i++) {
        
        if (rsp[i] === "2") {
            answer += "0";
        } else if (rsp[i] === "0") {
            answer += "5";
        } else if (rsp[i] === "5") {
            answer += "2";
        }
        
    }
    return answer;
}

방식

1. rsp는 문자열이므로 for문을 사용해 한 글자씩 순회한다.

2. 현재 문자가 "2", "0", "5" 중 무엇인지 if문으로 확인한다.

3. 각 경우에 이기는 값을 문자열 answer에 이어붙인다.

4. 반복이 끝나면 완성된 answer 문자열을 반환한다.

다른 사람의 코드

function solution(rsp) {
    let arr = {
        2: 0,
        0: 5,
        5: 2
    };
    var answer = [...rsp].map(v => arr[v]).join("");
    return answer;
}

나의 코드와 차이점

1. 객체에 규칙을 저장해두고 조건문 없이 값을 조회

2. 전개연산자를 사용해 문자열을 배열로 만든 후 map()으로 순회

느낀점

객체를 활용해 변환 규칙을 미리 저장하고 필요한 값을 바로 조회하는 방법을 잘 응용해야겠다는 생각이 들었따. 앞으로는 문제를 풀 때 단순히 조건문만 생각하기보다 객체를 활용하여 규칙을 관리할 수 있는지 함께 고민해봐야겠다고 느꼈다.

[프로그래머스] 진료순서 정하기

john-lennon — Wed, 27 May 2026 13:17:23 +0900

문제 설명

외과의사 머쓱이는 응급실에 온 환자의 응급도를 기준으로 진료 순서를 정하려고 합니다. 정수 배열 emergency가 매개변수로 주어질 때 응급도가 높은 순서대로 진료 순서를 정한 배열을 return하도록 solution 함수를 완성해주세요.

제한사항

중복된 원소는 없습니다.
1 ≤ emergency의 길이 ≤ 10
1 ≤ emergency의 원소 ≤ 100

입출력 예

emergency	result
[3, 76, 24]	[3, 1, 2]
[1, 2, 3, 4, 5, 6, 7]	[7, 6, 5, 4, 3, 2, 1]
[30, 10, 23, 6, 100]	[2, 4, 3, 5, 1]

나의 코드

function solution(emergency) {
    const sorted = [...emergency].sort((a, b) => b-a)
    
    let answer = [];
    
    for (let i = 0; i < emergency.length; i++) {
        answer.push(sorted.indexOf(emergency[i]) + 1)
    }
    
    return answer;
}

방식

1. emergency 배열을 복사한 뒤, 응급도가 높은 순서대로 내림차순 정렬한 배열을 만든다.

2. 결과를 저장할 빈 배열 answer를 생성한다.

3. for문으로 원본 배열을 순회하면서 현재 값이 정렬된 배열에서 몇 번째 위치에 있는지 indexOf()로 찾는다.

4. 배열의 index는 0부터 시작하므로 +1을 하여 실제 순위(1등, 2등, 3등...)로 변환한 뒤 answer 배열에 저장한다.

5. 최종적으로 answer 배열을 반환한다.

case 1 다른 사람의 코드

function solution(emergency) {
    let sorted = emergency.slice().sort((a,b)=>b-a);
    return emergency.map(v=>sorted.indexOf(v)+1);
}

나와의 차이점

나는 for문과 push()를 사용하여 결과 배열에 하나씩 직접 저장하는 방식으로 구현했지만 위의 코드는 map()을 사용해서 기존 배열의 각 요소를 순위 값으로 변환하면서 새로운 배열을 한 번에 생성하였다.

느낀점

아직은 map()을 자유롭게 활용하는 것이 익숙하지 않아 for문과 push()를 이용해 직접 값을 저장하는 방식이 더 편하게 느껴졌다. 하지만 다른 사람의 풀이를 보면서 map()은 단순 반복이 아니라, 기존 배열을 원하는 형태의 새로운 배열로 변환할 때 유용하게 사용할 수 있다는 점을 다시 느낄 수 있었다.

1-3 HTML 자주 쓰는 태그

john-lennon — Tue, 26 May 2026 16:19:15 +0900

안녕하세요 이번 포스팅에서는 HTML을 배울 때 가장 먼저 만나게 되는 태그들을정리해 보았습니다. 웹 페이지는 단순히 글자를 나열하는 게 아니라, 태그를 통해 각 요소의 역할과 위치를 브라우저에게 알려주는 것이 핵심입니다.

처음에는 태그 종류가 많아서 막막하게 느껴질 수 있지만, 오늘 소개하는 7가지 태그를 잘 익혀두면 기본적인 웹 페이지 구조는 충분히 만들 수 있습니다.

학습 목표

웹 페이지를 만들 때는 제목인지 · 본문인지 · 특정 영역인지 구조를 구분해야 합니다. 이번 포스팅에서는 가장 기본이 되는 HTML 태그들을 통해 웹 페이지의 구조를 나누는 방법을 익혀보겠습니다.

텍스트 구조를 잡아주는 태그 (h1~h6, p) 를 이해한다
영역을 나누는 태그 (div, span) 의 차이를 이해한다
줄바꿈과 구분선 태그 (br, hr)을 올바르게 사용한다
직접 코드를 작성하며 각 태그의 동작을 확인한다

태그 하나씩 살펴보기

텍스트 구조

<h1> ~ <h6>

제목 태그입니다. h1이 가장 크고 h6이 가장 작습니다. 숫자가 클수록 글씨가 작아진다고 생각하면 쉽습니다.

일반적으로 h1은 페이지의 대표 제목으로 사용하며, 보통 한 번 사용하는 경우가 많습니다.

<p>

문단(Paragraph) 태그입니다. 본문 텍스트를 담을 때 사용합니다. p태그는 앞뒤로 자동으로 여백이 생깁니다.

줄바꿈이 필요하다고 <br>을 여러 번 사용하는 것보다, 내용의 흐름이 바뀌는 경우에는 <p> 태그로 문단을 나누는 것이 좋습니다. <p>는 문단이라는 의미를 가지고 있어 코드 구조를 이해하기 쉽고 유지보수에도 유리합니다.

영역 / 구조

<div>

영역을 묶는 컨테이너 입니다. div 하나는 한 줄을 통째로 차지합니다 (블록 요소). CSS로 스타일을 줄 때 자주 활용됩니다.

div는 의미 없이 그냥 "묶음"을 만드는 태그입니다. 내용의 의미보다 레이아웃이 목적일 때 사용합니다.

<span>

텍스트 일부분만 감쌀 때 사용합니다. div와 달리 줄을 차지하지 않고 텍스트 흐름 안에 인라인으로 들어갑니다.

"이 단어만 빨갛게 만들고 싶다"처럼 텍스트 일부만 스타일링 할 때 span 태그가 적절합니다.

줄바꿈 / 구분선

<br>

줄바꿈(Line Break) 태그입니다. 닫는 태그 없이 단독으로 사용합니다. 텍스트 중간에 강제로 줄을 바꿀 때 사용합니다.

<br> 작성자가 원하는 위치에서 줄바꿈이 반드시 필요한 경우에 사용하는 것이 적합합니다.

<hr>

가로선(Horizontal Rule) 태그입니다. 주제나 섹션이 바뀔 때 시각적으로 구분선을 긋고 싶을 때 사용합니다.

<br>처럼 닫는 태그가 없는 빈 요소(void element)입니다.

태그 한눈에 정리

태그	역할	종류
<h1> ~ <h6>	제목 (h1이 가장 크고 h6이 가장 작음)	블록
<p>	문단, 본문 텍스트	블록
<div>	큰 영역 묶기, 레이아웃 구분	블록
<span>	텍스트 일부를 구분하거나 스타일 적용	인라인
<br>	줄바꿈 (닫는 태그 없음)	빈 요소
<hr>	가로 구분선 (닫는 태그 없음)	빈 요소

실습하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 자주 쓰는 태그</title>
</head>
<body>

  <!-- 제목 태그: h1이 가장 크고, h6이 가장 작습니다 -->
  <h1>가장 큰 제목입니다 (h1)</h1>
  <h3>조금 더 작은 제목입니다 (h3)</h3>

  <!-- p 태그: 본문 문단입니다 -->
  <p>이것은 하나의 문단입니다. p 태그는 앞뒤로 자동으로 여백이 생깁니다.</p>

  <!-- div 태그: 큰 영역을 묶을 때 씁니다 -->
  <div>
    이것은 div 영역입니다. 한 줄을 통째로 차지합니다.
  </div>

  <!-- span 태그: 텍스트 일부만 선택할 때 씁니다 -->
  <p>이 문장에서 <span style="color: blue;">span 태그</span>는 일부만 구분합니다.</p>

  <!-- br 태그: 강제 줄바꿈 -->
  첫 번째 줄<br>
  두 번째 줄

  <!-- hr 태그: 가로 구분선 -->
  <hr>
  구분선 아래 내용입니다.

</body>
</html>

코드를 다 작성했으면 VS Code 하단이나 파일에서 우클릭 후 Open with Live Server를 클릭해 브라우저로 열어보세요.

페이지가 열리면 F12키를 눌러 개발자 도구를 실행합니다.

상단 탭에서 Elements를 클릭한 후, 왼쪽 HTML 코드에서 태그를 하나씩 클릭해보세요. 페이지에서 해당 요소가 파란색 하이라이트가 되면서 실제로 어떤 영역을 차지하는지 눈으로 확인할 수 있습니다.

<h1>, <h3> 태그를 클릭하면 → 크기 차이를 직접 비교할 수 있습니다.
<p> 태그를 클릭하면 → 위 아래 여백(margin)이 주황색으로 표시됩니다.
<span> 태그를 클릭하면 → 텍스트 중 일부 영역만 선택된 걸 확인할 수 있습니다.
<hr> 태그를 클릭하면 → 가로선이 한 줄을 가득 차지하는 걸 볼 수 있습니다.

코드를 조금씩 바꿔가면서 결과가 어떻게 달라지는지 직접 확인하는 것이 가장 빠른 학습법입니다.

마치며

오늘은 HTML에서 가장 자주 사용하는 기본 태그들을 살펴보았습니다. HTML은 웹 페이지의 디자인을 만드는 언어가 아니라 구조를 만드는 언어라는 점을 기억해두세요. 앞으로 CSS를 배우게 되면 오늘 배운 태그들이 어떻게 꾸며지는지 더 쉽게 이해할 수 있습니다.

해시 테이블(Hash Table)

john-lennon — Tue, 26 May 2026 14:59:17 +0900

자료구조란 데이터를 어떤 형식으로 저장하고 관리할지를 정해놓은 방식입니다. 쉽게 말하면 "이 데이터는 이렇게 담아두면 꺼내 쓸 때 훨씬 편하다"는 보관 방식이라고 볼 수 있습니다. 오늘은 그 중에서도 실무에서 가장 많이 쓰이는 자료구조 중 하나인 해시테이블을 알아보겠습니다.

해시테이블이란?

해시테이블(Hash Table)은 키(Key)와 값(Value)을 쌍으로 저장하는 자료구조입니다. 쉽게 말하면 "이 이름에 해당하는 정보는 여기 있다"는 식으로, 이름표를 달아서 데이터를 보관하는 방식입니다.

데이터를 저장할 때 키를 해시 함수(Hash Function)라는 수식에 넣어 특정 번호(인덱스)를 계산하고, 그 번호에 해당하는 버킷(Bucket)이라는 칸에 값을 넣습니다.

해시테이블을 배우는 이유

학교 사물함을 떠올려 봅시다. 내 사물함 번호를 모른다면 1번부터 끝 번호까지 하나씩 열어봐야 합니다. 하지만 내 이름을 넣으면 번호를 바로 알려주는 시스템이 있다면, 한 번에 내 사물함으로 찾아갈 수 있습니다.

이것이 해시테이블의 핵심입니다. 데이터가 100만 개여도 키만 알면 딱 한 번의 계산으로 위치를 찾아갑니다. 배열처럼 처음부터 하나씩 훑지 않아도 됩니다.

또한 JavaScript의 Object와 Map, Python의 dict, Java의 HashMap이 모두 내부적으로 해시테이블로 만들어져 있습니다. 개발하면서 자연스럽게 매일 쓰고 있는 구조이기 때문에 제대로 이해해두면 코드를 읽는 눈이 달라집니다.

핵심 개념

① 키(Key)와 값(Value)

해시테이블에 저장하는 데이터는 항상 키: 값 형태의 쌍입니다. 예를 들어 학생 성적표를 만든다면 "홍길동": 95 처럼, 이름이 키고 점수가 값이 됩니다. 키는 데이터를 찾을 때 사용하는 이름표 역할을 합니다.

② 해시 함수(Hash Function)

키를 넣으면 저장 위치(인덱스)를 알려주는 함수입니다. 같은 키를 넣으면 항상 같은 위치가 나와야 한다는 것이 핵심입니다. 이 일관성 덕분에 저장할 때와 꺼낼 때 모두 같은 위치를 계산할 수 있습니다.

③ 버킷 (Bucket)

실제로 데이터가 담기는 칸입니다. 해시테이블은 여러 개의 버킷으로 구성되어 있고, 해시 함수가 계산한 번호의 버킷에 데이터가 들어갑니다.

④ 해시 충돌(Hash Collision)

서로 다른 키가 해시 함수를 통해 같은 인덱스를 가리키는 경우입니다. 사물함 비유로 돌아가면, 두 명의 이름이 같은 사물함 번호로 계산되는 상황입니다. 이때는 주로 같은 칸에 데이터를 연결 리스트 형태로 이어 붙이는 방식으로 해결합니다.

해시 충돌은 어떤 해시 함수를 써도 완전히 없앨 수는 없습니다.
중요한 건 충돌을 최소화하는 좋은 해시 함수를 사용하고, 충돌이 나더라도 잘 처리하는 것입니다.

실습 ㅡ 동작 과정 따라가기

학생 이름과 점수를 저장하는 해시테이블을 만들어보겠습니다. 버킷이 5개(인덱스 0~4)이고, 해시 함수는 "이름 글자 수 % 5" 라고 가정합니다.

데이터 저장하기

"홍길동"(3글자) → 3 % 5 = 3 → 3번 버킷에 저장
"기상호"(3글자) → 3 % 5 = 3 → 3번 버킷에 저장 (충돌 발생! → 이어 붙임)
"성준수"(3글자) → 3 % 5 = 3 → 3번 버킷에 저장 (충돌 처리)
"최종수"(3글자) → 3 % 5 = 3 → 동일

위 예시는 단순한 설명용 해시 함수라 충돌이 많이 납니다. 실제로는 훨씬 정교한 해시 함수를 사용해서 충돌을 최소화 합니다.

데이터 찾기

"홍길동"의 점수를 찾고 싶다면 → 해시 함수에 "홍길동"을 넣어 3번 버킷으로 바로 이동 → 저장된 값 반환.

배열처럼 처음부터 하나씩 뒤지지 않아도 됩니다.

코드로 보기

// 간단한 해시테이블 구현 (JavaScript)
class HashTable {
	constructor(size = 5) {
    	this.table = new Array(size);  // 버킷 배열 생성
        this.size = size;
    }
    
	// 해시 함수: 키를 숫자 인덱스로 변환
    hash(key) {
    	let hash = 0;
        for (let i = 0; i < key.lenght; i++) {
        	hash += key.charCodeAt(i);
        }
        return hash % this.size;  // 버킷 수로 나눈 나머지
    }
    
    // 데이터 저장
    set(key, value) {
    	const index = this.hash(key);
        if (!this.table[index]) {
        	this.table[index] = [];  // 버킷 초기화
        }
        this.table[index].push([key, value]);  // 충돌 시 이어 붙임
    }
    
    // 데이터 조회
    get(key) {
    	const index = this.hash(key);
        const bucket = this.table[index];
        if (bucket) {
        	const item = bucket.find(pair => pair[0] === key);
            return item ? item[1] : null;
        }
        return null;
    }
}

const ht = new HashTable();
ht.set("홍길동", 95);
ht.set("기상호", 88);

console.log(ht.get("홍길동"));  // 출력: 95
console.log(ht.get("기상호"));  // 출력: 88

참고 ㅡ 배열(Array)과 비교하면

해시테이블이 왜 필요한지 더 잘 이해하려면 배열과 직접 비교해보는 게 좋습니다. 배열은 순서가 있어서 몇 번째 항목인지는 빠르게 알 수 있지만, "홍길의 점수"처럼 특정 이름으로 값을 찾으려면 처음부터 끝까지 하나씩 확인해야 합니다. 반면 해시테이블은 이름 자체가 위치를 결정하기 때문에, 데이터가 늘어나도 탐색 속도가 변하지 않습니다.

항목	배열 (선형 탐색)	해시테이블
데이터 접근 방식	인덱스(번호)로 접근	키(이름표)로 접근
특정 값 탐색	처음부터 하나씩 확인	해시 함수로 위치 바로 계산
탐색 시간 복잡도	O(n)	O(1) 평균
100만 개 탐색 시	최대 1,000,000번	평균 1~2번
언제 쓰는지?	순서가 중요하거나 인덱스로 접근 할 때	키-값 쌍으로 빠른 검색이 필요할 때

O(1)은 평균값입니다. 해시 충돌이 심하게 발생하면 최악의 경우 O(n)까지 느려질 수 있습니다.
좋은 해시 함수를 쓰는 이유가 바로 여기에 있습니다.

마치며

해시테이블의 개념을 배우고 나면 단순히 "키-값을 빠르게 저장하고 꺼내는 방법"을 하나 익히는 것에서 그치지 않습니다. "어떤 키를 기준으로 데이터를 묶을 수 있을까?"라는 시각 자체가 생기기 시작합니다.

예를 들어 특정 값이 이미 나왔는지 O(1)로 바로 확인하거나, 데이터 목록에서 각 항목이 몇 번 등장하는지 한 번의 순회로 정리하는 것처럼, 해시테이블을 쓰면 구조 자체가 달라지는 문제들이 있습니다. 단순히 "빠른 탐색이 필요할 때 해시테이블을 써야지"가 아니라, "이 데이터에서 키로 삼을 수 있는 게 뭘까?"를 먼저 떠올릴 수 있게 되는 것이 진짜 목표입니다.

이것으로 해시테이블이 무엇인지, 왜 쓰는지, 어떻게 동작하는지까지 살펴보았습니다. 궁금한 점은 댓글 남겨주세요!