← 메인 페이지로

index.html 완전 해부

태그 · 속성 · 스타일 · 스크립트 전체 설명

대상 독자: HTML, CSS, JavaScript의 "역할"은 알지만, 문법은 전혀 모르는 사람

목차

  1. 문서 전체를 감싸는 껍데기
  2. head — 눈에 보이지 않는 문서 설정 영역
  3. style — CSS 영역
  4. body — 눈에 보이는 모든 것
    1. header — 상단 네비게이션 바
    2. main — 본문 콘텐츠 영역
    3. footer — 하단 푸터
  5. script — JavaScript 영역
  6. 한눈에 보는 태그 사전
  7. 한눈에 보는 HTML 속성 사전

0. 문서 전체를 감싸는 껍데기

<!doctype html>

<html lang="ko"> ... </html>

1. <head> — 눈에 보이지 않는 문서 설정 영역

<head> 안에 있는 내용은 화면에 직접 표시되지 않는다.
브라우저·검색엔진·SNS 등이 참고하는 메타(부가) 정보를 담는다.

1-1. <meta charset="utf-8" />

1-2. <meta name="viewport" content="width=device-width, initial-scale=1" />

1-3. <title>songdaegeun 소개 | 즐겁게 배우는 코딩</title>

1-4. <meta name="description" content="...">

1-5. <style> ... </style> — CSS 영역

<style> 태그 안에 CSS 코드를 직접 작성한다. 외부 파일로 분리할 수도 있지만, 여기서는 HTML 안에 함께 작성한 형태(인라인 스타일시트)이다.

CSS 기초 문법 빠른 정리

선택자 {
  속성: 값;
}

선택자 종류:

선택자의미예시
태그명해당 태그 전부body { } → 모든 <body>
.클래스명해당 class를 가진 요소.card { } → class="card"인 요소
#아이디명해당 id를 가진 요소#themeToggle { } → id="themeToggle"인 요소
부모 자식부모 안에 있는 자식.hero h1 { } → .hero 안의 <h1>
선택자:상태특정 상태일 때a:hover { } → 마우스를 올렸을 때
*모든 요소* { } → 페이지의 모든 요소

:root — CSS 변수(커스텀 프로퍼티) 정의

:root {
  --bg: #0b0f1a;
  --primary: #7c5cff;
  ...
}
변수역할
--bg배경색 (짙은 남색)
--bg-soft약간 밝은 배경색
--card카드 컴포넌트 배경색
--text기본 글자색
--muted덜 중요한 글자색 (회색 계열)
--primary주요 강조색 (보라색)
--primary-strong더 진한 보라색
--accent포인트 색상 (청록색)
--border테두리 색상
--bg-grad-1, --bg-grad-2배경 그라데이션용 반투명 색상

#0b0f1a 같은 값은 HEX 색상 코드이다. 6자리 16진수로 빨강/초록/파랑(RGB)을 표현한다.
rgba(124, 92, 255, 0.35)는 RGBA — 빨강 124, 초록 92, 파랑 255, 투명도 0.35(35% 불투명).

html[data-theme="light"] — 라이트 모드 변수 재정의

html[data-theme="light"] {
  --bg: #f4f6fb;
  ...
}

* { box-sizing: border-box; }

body { ... }

body {
  margin: 0;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(...), radial-gradient(...), var(--bg);
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
}
속성설명
margin: 0브라우저 기본 바깥 여백 제거
font-family글꼴 우선순위. 왼쪽부터 시도하고, 없으면 다음 글꼴 사용
color: var(--text)글자색을 CSS 변수 --text에서 가져옴
background배경. radial-gradient(원형 그라데이션) 2개를 겹치고, 맨 뒤에 단색 배경(--bg)을 깔았다
line-height: 1.6줄 간격. 글자 크기의 1.6배
transition배경색·글자색이 바뀔 때 0.3초 동안 부드럽게 전환 (다크/라이트 전환 애니메이션)

a { color: inherit; text-decoration: none; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

header { padding: 28px 0 0; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.logo

속성설명
font-weight: 700글자 굵기. 700 = bold(굵게)
font-size: 1.2rem글자 크기. rem은 루트 요소 기본 크기(보통 16px) 기준 배수 → 약 19.2px
letter-spacing: 0.3px글자 사이 간격을 0.3px 벌림

.nav-links

.nav-links a:hover { color: var(--text); }

.theme-toggle { ... }

.hero { ... }

.badge { ... }

.hero h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); ... }

.hero p

.hero-actions

.btn { ... }

.btn-primary { ... }

.btn-secondary { ... }

.btn:hover { transform: translateY(-2px); }

.btn-lotto / .btn-lotto:hover

.lotto-result { ... }

.lotto-ball { ... }

.hero-card { ... }

.hero-card ul { list-style: none; padding: 0; }

section { padding: 48px 0; }

.section-title / .section-desc

.grid

.card

.stats { ... }

.stat h3 / .stat span

.cta { ... }

footer

@media (max-width: 720px) { ... } — 반응형 디자인

2. <body> — 눈에 보이는 모든 것

<body> 안의 내용이 실제 화면에 표시된다.

2-1. <header> — 상단 헤더 (네비게이션 바)

<header class="container">

<nav class="nav">

<div class="logo">songdaegeun</div>

<div class="nav-links">

<a href="#why">특징</a>
<a href="memo.html" style="color: var(--accent)">코드 해부</a>
<a href="memo-raw.html" style="color: var(--accent)">코드해부(raw)</a>

<button class="theme-toggle" id="themeToggle" type="button">화이트 모드</button>

2-2. <main> — 본문 콘텐츠 영역

<main class="container">

2-2-1. 히어로 섹션 (<section class="hero">)

<div class="badge">
<h1>초보자를 위한<br />가장 친절한 코딩 놀이터</h1>
<p>
<div class="hero-actions">
<a class="btn btn-primary" href="#start">무료로 시작하기</a>
히어로 카드 (<div class="hero-card">)

2-2-2. 특징 섹션 (<section id="why">)

카드 구조 (4개 반복)
<div class="card">
  <span>🧭</span>
  <h4>길잡이형 로드맵</h4>
  <p>초보자를 위한 단계별 커리큘럼과 체크리스트를 제공합니다.</p>
</div>

2-2-3. 학습 로드맵 섹션 (<section id="tracks">)

2-2-4. 커뮤니티 섹션 (<section id="community">)

<div class="stat">
  <h3>1,200+</h3>
  <span>활동 중인 러너</span>
</div>

2-2-5. 시작하기 섹션 (<section id="start">)

<div class="cta"> — 행동 유도 영역
<a class="btn btn-primary" href="mailto:hello@songdaegeun.com">문의하기</a>
<button class="btn btn-secondary btn-lotto" id="lottoBtn" type="button">로또번호추천</button>
<div class="lotto-result" id="lottoResult" aria-live="polite" hidden></div>

2-3. <footer> — 하단 푸터

<footer class="container">
  <div>&copy; 2026 songdaegeun. 함께 배우는 코딩 커뮤니티.</div>
</footer>

2-4. <script> ... </script> — JavaScript 영역

<script> 태그 안에 JavaScript 코드를 작성한다. <body> 닫는 태그 바로 위에 배치하여, HTML이 먼저 로드된 후 실행되게 한다.

JavaScript 기초 문법 빠른 정리

문법의미
const 이름 = 값상수 선언 (한 번 할당하면 재할당 불가)
let 이름 = 값변수 선언 (재할당 가능)
() => { ... }화살표 함수. 이름 없는 함수를 짧게 쓰는 방법
document.getElementById("id")HTML에서 해당 id를 가진 요소를 찾아서 가져옴
element.addEventListener("이벤트", 함수)해당 요소에서 "이벤트"가 발생하면 함수를 실행
if (조건) { ... }조건이 참이면 실행
===두 값이 같은지 비교 (타입까지 일치해야 true)
||또는(OR). 왼쪽이 falsy이면 오른쪽 값 사용
&&그리고(AND). 둘 다 참이어야 true
? :삼항 연산자. 조건 ? 참일때값 : 거짓일때값
String(값)값을 문자열로 변환
`텍스트 ${변수}`템플릿 리터럴. 문자열 안에 변수를 삽입하는 방법

전체를 즉시 실행 함수로 감쌈

(() => {
  ...
})();

테마 토글 기능

const root = document.documentElement;
const themeToggle = document.getElementById("themeToggle");
const storedTheme = localStorage.getItem("theme");
const prefersLight = window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: light)").matches;
const initialTheme = storedTheme || (prefersLight ? "light" : "dark");
root.dataset.theme = initialTheme;
themeToggle.textContent = initialTheme === "light" ? "다크 모드" : "화이트 모드";
themeToggle.setAttribute("aria-pressed", String(initialTheme === "light"));
themeToggle.addEventListener("click", () => { ... });
const nextTheme = root.dataset.theme === "light" ? "dark" : "light";
root.dataset.theme = nextTheme;
localStorage.setItem("theme", nextTheme);

로또 번호 추천 기능

const btn = document.getElementById("lottoBtn");
const result = document.getElementById("lottoResult");
if (!btn || !result) return;

pickLottoNumbers 함수

const pickLottoNumbers = () => {
  const set = new Set();
  while (set.size < 6) {
    set.add(Math.floor(Math.random() * 45) + 1);
  }
  return Array.from(set).sort((a, b) => a - b);
};
코드설명
new Set()Set = 중복을 허용하지 않는 집합 자료구조
while (set.size < 6)Set의 크기가 6이 될 때까지 반복
Math.random()0 이상 1 미만의 랜덤 소수 생성 (예: 0.7283...)
Math.random() * 450 ~ 44.999... 사이의 수
Math.floor(...)소수점 아래 버림 → 0 ~ 44
+ 11 ~ 45 범위로 조정
set.add(값)Set에 추가. 이미 있으면 무시됨 (중복 방지)
Array.from(set)Set을 배열로 변환
.sort((a, b) => a - b)오름차순 정렬

결과: 1~45 중 중복 없는 6개 숫자를 오름차순으로 반환.

render 함수 — 결과를 화면에 그리기

const render = (tickets) => {
  result.hidden = false;
  result.innerHTML = "";
  ...
};
코드설명
result.hidden = falsehidden 속성 제거 → 결과 영역을 보이게 함
result.innerHTML = ""결과 영역의 기존 내용을 비움
 
const title = document.createElement("div");
title.innerHTML = `<strong>추천 번호</strong> (5세트)`;
result.appendChild(title);
코드설명
document.createElement("div")새로운 <div> 요소를 메모리에 생성 (아직 화면에 안 보임)
title.innerHTML = ...그 요소의 HTML 내용을 설정
<strong>텍스트를 굵게 표시하는 태그
result.appendChild(title)결과 영역의 자식으로 추가 → 이제 화면에 보임
 
tickets.forEach((nums, idx) => { ... });
const setWrap = document.createElement("div");
setWrap.className = "lotto-set";
setTitle.textContent = `${idx + 1}세트: ${nums.join(", ")}`;
nums.forEach((n) => {
  const ball = document.createElement("span");
  ball.className = "lotto-ball";
  ball.textContent = String(n);
  balls.appendChild(ball);
});

버튼 클릭 이벤트 연결

btn.addEventListener("click", () => {
  const tickets = Array.from({ length: 5 }, () => pickLottoNumbers());
  render(tickets);
});
코드설명
btn.addEventListener("click", ...)로또 버튼 클릭 시 실행
Array.from({ length: 5 }, 함수)길이 5짜리 배열을 생성하면서, 각 요소를 함수의 반환값으로 채움
() => pickLottoNumbers()각 자리마다 6개 번호 세트 생성
render(tickets)5세트의 번호를 화면에 그림

한눈에 보는 태그 사전

태그의미이 파일에서의 용도
<!doctype html>HTML5 문서 선언문서 맨 위
<html>문서 전체를 감쌈최상위 컨테이너
<head>메타 정보 영역설정, 스타일
<meta>부가 정보 (인코딩, 뷰포트 등)문자셋, 반응형, SEO
<title>탭 제목브라우저 탭
<style>CSS 작성 영역모든 스타일 정의
<body>화면에 보이는 내용본문 전체
<header>상단 영역네비게이션 바
<nav>네비게이션 영역메뉴 링크
<main>핵심 콘텐츠 영역본문
<section>주제별 콘텐츠 묶음각 섹션
<footer>하단 영역저작권
<div>범용 블록 컨테이너레이아웃 묶음
<span>범용 인라인 컨테이너텍스트 일부 꾸미기
<h1>~<h4>제목 (레벨 1~4)섹션 제목
<p>문단설명 텍스트
<a>링크메뉴, 버튼
<button>버튼테마 전환, 로또
<ul>비순서 목록히어로 카드 목록
<li>목록 항목각 항목
<br>줄 바꿈제목 내 줄 바꿈
<strong>강조(굵게)로또 결과 제목
<script>JavaScript 작성 영역테마 전환, 로또 기능

한눈에 보는 HTML 속성 사전

속성설명예시
lang문서/요소의 언어lang="ko"
charset문자 인코딩charset="utf-8"
name메타 태그의 이름name="viewport"
content메타 태그의 값content="width=device-width"
classCSS 클래스 (여러 개 가능)class="btn btn-primary"
id고유 식별자 (페이지 내 유일)id="themeToggle"
href링크 대상 URLhref="#start", href="mailto:..."
type요소의 타입type="button"
style인라인 CSS (태그에 직접 스타일 작성)style="color: var(--accent)"
hidden요소를 숨김hidden
aria-live접근성: 변경 시 읽기 방식aria-live="polite"
aria-pressed접근성: 토글 버튼 상태aria-pressed="true"
data-theme사용자 정의 데이터 속성data-theme="light"