01

CSS · 선택자

CSS란? 선택자 + 붙이는 법

CSS = 페이지에 옷 입히기(색·크기·위치) — 밋밋한 화면을 예쁘게

CSS 한 줄 h1 { color: red; }의 짜임
• h1 — 선택자 "누구를?"
• color — 속성 "무엇을?"
• red — 값 "어떻게?"
• 줄 끝 세미콜론 ; 꼭 (빠지면 안 먹힘)

CSS는 styles/main.css에 따로 적고, HTML <head>에서 <link>로 불러옴 — index.html 옆 styles 폴더에 두면 연결됨

미리보기 — 코드 적용 결과

CSS 첫걸음

모든 p는 초록

이 줄만 주황

사과
바나나는 보라

폴더 구조

01/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 꾸미기

index.html

<!-- index.html : 화면 뼈대 — 꾸미기는 main.css 담당 -->
<!DOCTYPE html>                     <!-- HTML5 문서 선언 (맨 첫 줄 고정) -->
<html lang="ko">                    <!-- 문서 시작 · 언어 한국어 -->
  <head>                            <!-- 화면 밖 설정 영역 -->
    <meta charset="UTF-8">          <!-- 한글이 깨지지 않게 인코딩 지정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS란? 선택자 + 붙이는 법</title>
    <link rel="stylesheet" href="styles/main.css" />  <!-- ✨ 이 줄만 추가됨 — styles 폴더 main.css(꾸미기) 연결 -->
  </head>                           <!-- 설정 영역 끝 -->
  <body>                            <!-- 실제 화면에 보이는 내용 -->
    <h1>CSS 첫걸음</h1>                <!-- h1: 큰 제목 — main.css 규칙 → 빨강 -->
    <p>모든 p는 초록</p>               <!-- p: 문단 — 규칙 → 초록 -->
    <p class="special">이 줄만 주황</p>  <!-- class="special" 별명 → .special 규칙 → 주황 -->
    <ul>                            <!-- ul: 점(•) 목록 시작 -->
      <li>사과</li>                   <!-- li: 목록 한 칸 -->
      <li><em>바나나</em>는 보라</li>     <!-- em: 강조(기울임) — li em 규칙 → 보라 -->
    </ul>                           <!-- 목록 끝 -->
  </body>                           <!-- 내용 영역 끝 -->
</html>                             <!-- 문서 전체 끝 -->

styles/main.css

/* styles/main.css */
h1 { color: red; }            /* 요소 — 모든 h1 */
p { color: green; }           /* 요소 — 모든 p */
.special { color: orange; }   /* 클래스 — class="special" */
li em { color: purple; }      /* 자손 — li 안의 em */

두 파일을 같은 폴더에 두고 index.html을 열면 → 제목 빨강, 모든 p 초록, class="special" 줄만 주황, li 안 em만 보라

핵심 요약
• 선택자 3가지 (요소 / 클래스 / 자손) → HTML 특정 부분만 선택
• HTML에 class 붙이면 .special 같은 클래스 선택자로 콕 집어 꾸밈
• CSS 핵심 = "누구를?(선택자) 어떻게?(속성과 값)"

02

코드 순서 관례

코드 순서 관례 (일반 → 구체)

일반 → 구체 순서로 작성 — 넓은 것 먼저, 콕 집는 것 나중
• body(전체) → 요소(h1·p) → 클래스(.special) → 자손(li em) 순서로 쌓기
• 충돌 시 구체적인 선택자·나중 줄이 이김 → 이 순서 지키면 의도대로 동작

미리보기 — 코드 적용 결과

코드 순서 관례

일반 요소 — 모든 p

이 줄만 주황 — 클래스

사과
바나나는 보라 — 자손

폴더 구조

02/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 일반→구체 순서 정렬

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>코드 순서 관례 (일반 → 구체)</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <h1>코드 순서 관례</h1>           <!-- h1 → navy 가운데 -->
    <p>일반 요소 — 모든 p</p>          <!-- p → gray -->
    <p class="special">이 줄만 주황</p> <!-- .special → orange -->
    <ul>
      <li>사과</li>
      <li><em>바나나</em>는 보라</li>    <!-- li em → purple -->
    </ul>
  </body>
</html>

styles/main.css — 일반 → 구체 순서

/* styles/main.css */

/* ① 기본 — 페이지 전체 */
body { background-color: lightyellow; font-family: sans-serif; }

/* ② 요소 선택자 — 모든 h1·p */
h1 { color: navy; text-align: center; }
p  { color: gray; }

/* ③ 클래스 선택자 — class="special"만 */
.special { color: orange; font-weight: bold; }

/* ④ 자손 선택자 — li 안의 em만 */
li em { color: purple; font-style: normal; }

핵심 요약
• 작성 순서 = 요소(파랑) → 클래스(보라) → 자손(초록), 일반에서 구체로
• 같은 속성이 충돌하면 더 구체적·더 아래 규칙이 이김
• 순서는 외울 필요 없음 — 다음 노드 Stylelint가 자동 정렬

03

Stylelint

Stylelint — CSS 자동 검사·정렬 도구

Stylelint = CSS 전용 린터(검사기) — 오타·잘못된 속성·중복·순서를 사람 대신 잡아줌
HTML 검사는 따로 — Stylelint은 CSS 담당

무엇을 잡나
• 오타 colur, 세미콜론 ; 누락
• 중복 선택자, 잘못된 값
• 속성·규칙 순서 자동 정렬 (위 02번 순서를 자동으로)

폴더 구조

03/
├─ .stylelintrc.json       # Stylelint 검사 규칙
├─ index.html              # 결과 확인용 화면 (박스 미리보기)
└─ styles/
   └─ main.css             # 검사 대상 (속성 순서 흐트러짐)

설정 — .stylelintrc.json

{
  "extends": ["stylelint-config-standard"],
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

각 줄 뜻 (JSON은 주석을 못 달아 설명은 따로)
• extends — 기본 규칙 묶음 가져오기 (stylelint-config-standard = 표준 권장 규칙 세트)
• plugins — 추가 기능 stylelint-order(순서 검사) 끼우기
• rules — 켤 규칙 지정 — order/properties-alphabetical-order: true = 속성 알파벳순 자동 정렬
※ 실제 .stylelintrc.json 파일엔 주석 넣지 말 것 (JSON 문법 깨짐 → 위 설명은 페이지용)

먼저 Node.js 설치 (npm은 Node에 포함)

npm은 Node.js에 함께 들어있음 — Stylelint 설치 전 Node부터 깔아야 npm·npx 명령이 동작
• 공식 사이트에서 LTS(안정) 버전 받기 → nodejs.org
• 설치하면 node와 npm이 한 번에 생김

# ① 이미 깔렸는지 확인 — 버전이 뜨면 설치 OK (건너뛰기)
node -v
npm -v

# ② 안 깔렸으면 설치
# Windows — nodejs.org 에서 LTS .msi 내려받아 실행
# macOS — 공식 .pkg 또는 Homebrew:
brew install node

# ③ 다시 확인
node -v
npm -v

설치 · 실행 (터미널)

# 03 폴더로 이동 (.stylelintrc.json 이 이미 들어있음)
cd practice/04_css/03

# 설치 (한 번만) — 이 3개면 끝
npm install -D stylelint stylelint-config-standard stylelint-order

# 검사 — 순서 틀린 곳을 짚어줌
npx stylelint "styles/main.css"

# 자동 수정 (정렬·오류)
npx stylelint "styles/main.css" --fix

주의 — npm init stylelint은 쓰지 말 것
• 그건 대화형 마법사(Continue? Yes/No 물음) — 취소되면 npm error code 1 · create-stylelint 뜨며 실패
• 또 stylelint.config.mjs를 새로 만들어 이미 있는 .stylelintrc.json과 설정이 겹침

검사 대상 — styles/main.css (--fix 전, 순서 흐트러짐)

/* 속성이 뒤죽박죽 — 아래 순서로 적혀 있음 */
.box {
  width: 120px;
  color: white;
  background: hotpink;
  height: 120px;
  border-radius: 16px;
}

--fix 실행 후 (알파벳순 자동 정렬됨)

/* background → border-radius → color → height → width */
.box {
  background: hotpink;
  border-radius: 16px;
  color: white;
  height: 120px;
  width: 120px;
}

순서만 바뀌고 화면 결과는 동일 — index.html을 브라우저로 열어 hotpink 박스를 확인하고, --fix 후 다시 열어도 똑같음을 눈으로 검증

index.html — 결과 확인용 화면

<!-- index.html : main.css 적용 결과 확인용 화면 -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylelint — 속성 순서 자동 정렬</title>
    <link rel="stylesheet" href="styles/main.css" />  <!-- 검사 대상 CSS 연결 -->
  </head>
  <body>
    <div class="box"></div>   <!-- .box 규칙 적용 대상 -->
  </body>
</html>

HTML도 검사하려면 — HTMLHint

Stylelint은 CSS만 검사 — HTML 오타·닫는 태그 누락·중복 id 등은 HTMLHint 같은 HTML 전용 린터로 따로 잡음
• 태그 안 닫힘 <div>, 속성 따옴표 누락, 중복 id, alt 빠진 <img> 등 검출

# 설치 (한 번만)
npm install -D htmlhint

# 검사
npx htmlhint "index.html"

# 폴더 전체 검사
npx htmlhint "**/*.html"

규칙 조정은 .htmlhintrc (JSON) 파일로 — 예: { "tag-pair": true, "id-unique": true, "alt-require": true }
※ HTMLHint에는 CSS의 --fix 같은 자동 수정이 없음 — 문제만 알려주므로 손으로 고침 (더 강력한 검사는 html-validate, VS Code 확장으로도 실시간 검사 가능)

핵심 요약
• Stylelint = CSS 전용 검사기 — 오타·세미콜론 누락·중복·잘못된 값 자동 검출
• order/properties-alphabetical-order 규칙이 02번 속성 순서를 자동 정렬
• npx stylelint --fix 한 번으로 정렬·수정 — 사람이 외울 필요 없음
• HTML은 HTMLHint로 따로 검사 (CSS·HTML 담당 도구가 다름)

04

박스 모델

박스 모델 (padding · margin · border)

모든 요소는 네모 상자 — 여백과 테두리를 줄 수 있음

액자 비유
• padding — 상자 안쪽 여백 (액자와 사진 사이)
• margin — 상자 바깥쪽 여백 (옆 액자와의 거리)
• border — 상자 테두리 (액자 틀)

미리보기 — 코드 적용 결과

여백과 테두리를 가진 상자

폴더 구조

05/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 여백·테두리

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스 모델 (padding · margin · border)</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <ul>                                   <!-- 이 ul 상자에 padding·border·margin 적용 -->
      <li>여백과 테두리를 가진 상자</li>
    </ul>
  </body>
</html>

styles/main.css

/* styles/main.css */
ul {
  background-color: white;
  padding: 20px;          /* 안쪽 여백 */
  border: 2px solid navy; /* 테두리 */
  margin: 20px;           /* 바깥 여백 */
}

상자 둘레에 남색 테두리, 안쪽·바깥쪽 여백이 생김 — border: 2px solid navy는 두께 · 종류 · 색을 띄어쓰기로 한 번에

margin · padding 값 개수 — 방향 지정

margin은 상하좌우 4방향 여백 — 값을 몇 개 쓰느냐로 방향이 정해짐 (padding도 규칙 동일)

/* 값 1개 — 상하좌우 전부 같게 */
margin: 20px;

/* 값 2개 — 상하 / 좌우 */
margin: 10px 30px;        /* 상하 10, 좌우 30 */

/* 값 4개 — 상 → 우 → 하 → 좌 (시계방향) */
margin: 10px 20px 30px 40px;

/* 한 방향씩 따로 지정 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

기억법
• 값 1개 = 전부 / 2개 = 상하·좌우 / 4개 = 시계방향(상→우→하→좌)
• 4개 순서는 12시부터 시계 방향으로 돈다고 외우면 쉬움
• margin: 0 auto = 상하 0, 좌우 auto → 가로 가운데 정렬 (블록 요소 + width 필요)

핵심 요약
• padding — 상자 안쪽 여백
• margin — 상자 바깥쪽 여백 (상하좌우 4방향)
• border — 상자 테두리(두께 · 종류 · 색을 한 줄에)
• 값 개수로 방향 지정 — 1개=전부 · 2개=상하/좌우 · 4개=시계방향
• 모든 요소 = 네모 상자, 위 세 속성으로 조절

05

flex 맛보기

가로로 나란히 — flex (맛보기)

상자는 기본적으로 위→아래로 쌓임 — 가로로 두려면 부모에 display: flex 한 줄

• display: flex — 자식을 가로로 나란히
• gap — 자식 사이 간격
• list-style — 목록 점(•) 제거

미리보기 — 코드 적용 결과

폴더 구조

06/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 가로 배치

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가로로 나란히 — flex (맛보기)</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <ul class="menu">          <!-- 이 ul에 display:flex → li 3개가 가로로 -->
      <li>홈</li>
      <li>소개</li>
      <li>연락</li>
    </ul>
  </body>
</html>

styles/main.css

/* styles/main.css */
.menu {
  display: flex;     /* 자식을 가로로 나란히 */
  gap: 10px;         /* 사이 간격 */
  list-style: none;  /* 점 제거 */
}

세로로 쌓이던 li 3개가 가로로 나란히 놓임 — .menu는 1번에서 본 클래스 선택자, HTML <ul class="menu">에 붙여 적용
본격 Flex · Grid 레이아웃은 다음 단계 — 지금은 "가로 배치는 flex" 정도만

핵심 요약
• display: flex — 자식을 가로로 나란히
• gap — 자식 사이 간격
• list-style — 목록 점 제거
• 부모에 적용 → 자식들이 나란히

06

붙이는 3가지 방법

CSS 붙이는 3가지 방법 (외부 · 내부 · 인라인)

같은 CSS도 HTML에 붙이는 길이 셋 — 보통 외부 방식 권장

• 외부 <link> — 별도 styles/main.css, 여러 페이지 공유·관리 쉬움 (권장)
• 내부 <style> — <head> 안에 직접, 한 페이지만
• 인라인 style="" — 태그에 바로, 한 요소만

미리보기 — 코드 적용 결과

3가지 방법

내부 스타일로 초록

인라인으로 빨강

폴더 구조

07/
├─ index.html        # 화면 (외부+내부+인라인)
└─ styles/
   └─ main.css       # ① 외부 CSS

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 붙이는 3가지 방법 (외부 · 내부 · 인라인)</title>
    <link rel="stylesheet" href="styles/main.css" />   <!-- ① 외부 -->
    <style>                            /* ② 내부 */
      p { color: green; }
    </style>
  </head>
  <body>
    <h1>3가지 방법</h1>
    <p>내부 스타일로 초록</p>
    <p style="color: red;">인라인으로 빨강</p>   <!-- ③ 인라인 -->
  </body>
</html>

styles/main.css

/* styles/main.css — ① 외부 */
h1 { color: navy; }

제목 남색(외부) · 첫 p 초록(내부) · 둘째 p 빨강(인라인) 셋 다 동작 — 보통 외부 link 권장 (여러 페이지 공유·관리 쉬움)

핵심 요약
• 외부 <link> — 별도 파일, 여러 페이지 공유(권장)
• 내부 <style> — <head> 안, 한 페이지
• 인라인 style="" — 태그에 바로, 한 요소
• 충돌 우선순위: 인라인 > 내부·외부

07

가상클래스 :hover

상태에 따라 — 가상클래스 (:hover 등)

선택자 뒤 콜론 : + 상태 = 가상클래스 — "그 순간"만 꾸밈

• a:link — 방문 전
• a:visited — 방문 후
• a:hover — 마우스 올림
• a:active — 누르는 중

미리보기 — 마우스 올려보기

마우스를 올려 봐

폴더 구조

08/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 마우스 hover

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상태에 따라 — 가상클래스 (:hover 등)</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- 이 링크에 a:link/:visited/:hover/:active 4가지 상태 색 적용 -->
    <a href="https://www.google.com">마우스를 올려 봐</a>
  </body>
</html>

styles/main.css

/* styles/main.css */
a:link    { color: royalblue; }   /* 방문 전 */
a:visited { color: purple; }      /* 방문 후 */
a:hover   { color: tomato; }      /* 마우스 올림 */
a:active  { color: red; }         /* 누르는 중 */

링크에 마우스 올리면 주황, 누르는 중엔 빨강으로 바뀜 — 평소엔 파랑, 한 번 방문하면 보라

⚠️ 순서 중요 — LVHA (러브하)

링크 4가지 상태는 반드시 이 순서로 써야 함 — 순서 틀리면 뒤 규칙에 덮여서 색이 안 바뀜
• :link → :visited → :hover → :active
• 앞글자 따서 L-V-H-A, "러브하(LoVe-HAte)"로 외움

왜 순서가 중요한가
• CSS는 같은 조건이면 나중(아래) 규칙이 이김 (02번 우선순위)
• :hover를 :visited보다 위에 쓰면 → 방문한 링크는 :visited가 :hover를 덮어 마우스 올려도 색이 안 변함
• 그래서 :hover·:active를 항상 뒤에 둬야 마우스·클릭 효과가 보임

/* ❌ 틀린 순서 — hover가 visited에 가려짐 */
a:hover   { color: tomato; }
a:visited { color: purple; }   /* 이게 이겨서 hover 무시됨 */

/* ✅ LVHA 순서 — 정상 동작 */
a:link    { color: royalblue; }
a:visited { color: purple; }
a:hover   { color: tomato; }
a:active  { color: red; }

핵심 요약
• :link — 방문 전
• :visited — 방문 후
• :hover — 마우스 올림
• :active — 누르는 중
• 선택자 뒤 : + 상태 = 가상클래스, 그 순간에만 적용
• 순서는 LVHA(러브하) 고정 — 어기면 뒤 규칙에 덮여 효과 안 남

08

카드 뒤집기 3D

카드 뒤집기 (3D flip)

마우스 올리면 카드가 Y축으로 휙 — transform: rotateY + backface-visibility

• transform: rotateY(180deg) — Y축 회전
• transition — 회전을 부드럽게
• transform-style: preserve-3d — 3D 공간
• backface-visibility: hidden — 뒷면 숨김

미리보기 — 마우스 올려보기

앞면

뒷면!

폴더 구조

09/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 카드 뒤집기

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>카드 뒤집기 (3D flip)</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- .card 안 .inner가 회전 → 앞면/뒷면 두 장을 겹쳐 둠 -->
    <div class="card">
      <div class="inner">
        <div class="front">앞면</div>
        <div class="back">뒷면!</div>
      </div>
    </div>
  </body>
</html>

styles/main.css

/* styles/main.css */
.card { width: 200px; height: 130px; perspective: 600px; }  /* perspective: 보는 거리 — 작을수록 3D가 더 휘어 보임 */
.inner {
  position: relative;            /* relative: 자식(앞·뒷면) 위치의 기준이 됨 */
  width: 100%; height: 100%;
  transition: transform 0.6s;   /* transform이 바뀔 때 0.6초에 걸쳐 부드럽게 */
  transform-style: preserve-3d; /* preserve-3d: 자식을 3D 공간에 둠(없으면 납작) */
}
.card:hover .inner { transform: rotateY(180deg); }  /* rotateY(180deg): 세로축(Y) 기준 180도 회전 = 뒤집기 */
.front, .back {
  position: absolute;            /* absolute: 기준 조상(.inner) 위에 앞·뒷면을 겹쳐 쌓음 */
  inset: 0;                      /* inset: 0 = top·right·bottom·left 전부 0 (부모 꽉 채움) */
  display: flex;                 /* flex: 안의 글자를 가운데 두려고 */
  align-items: center;           /* 세로 가운데 정렬 */
  justify-content: center;       /* 가로 가운데 정렬 */
  border-radius: 12px; color: white; font-size: 20px;
  backface-visibility: hidden;  /* hidden: 뒤로 돌아간 면(뒤통수)은 안 보이게 */
}
.front { background: hotpink; }                  /* 앞면 색 */
.back  { background: rebeccapurple; transform: rotateY(180deg); }  /* 뒷면은 미리 180도 돌려 둠 → 뒤집으면 똑바로 */

평소 앞면 핑크, 마우스 올리면 180도 돌아 보라 뒷면 — transform-style: preserve-3d가 입체로 만듦

핵심 요약
• transform: rotateY 회전 + transition 부드럽게
• transform-style: preserve-3d 입체 공간
• backface-visibility: hidden 뒷면 숨김
• :hover 시 180도 → 카드 뒤집기 완성

09

hover 회전+확대

hover 회전 + 확대

마우스 올리면 살짝 기울며 커짐 — transform + transition으로 부드럽게

• transform: rotate() scale() — 기울이고 확대
• transition — 변화에 시간을 줘 스르륵

미리보기 — 마우스 올려보기

올려봐

폴더 구조

10/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # hover 효과

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover 회전 + 확대</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- 이 박스에 hover 시 transform(회전+확대) 적용 -->
    <div class="box">올려봐</div>
  </body>
</html>

styles/main.css

/* styles/main.css */
.box {
  width: 120px; height: 120px;   /* 박스 크기 (가로·세로 120px) */
  display: flex;                 /* flex: 안의 글자를 가운데 두려고 */
  align-items: center;           /* 세로 가운데 정렬 */
  justify-content: center;       /* 가로 가운데 정렬 */
  background: hotpink;           /* 배경색 */
  color: white;                  /* 글자색 */
  border-radius: 16px;           /* 모서리 둥글게 (값 클수록 더 둥금) */
  transition: transform 0.3s ease;   /* transform이 바뀔 때 0.3초에 걸쳐 부드럽게 (ease=끝에 천천히) */
}

/* :hover = 마우스 올렸을 때만 적용 */
.box:hover { transform: rotate(10deg) scale(1.2); }   /* rotate(10deg): 10도 기울임 · scale(1.2): 1.2배 확대 */

transition 덕에 뚝딱이 아니라 스르륵 변함 — 숫자(0.3s · 1.2)를 바꿔 속도·크기 조절

속도 곡선 (easing) — ease 자리

transition: transform 0.3s ease → 0.3s는 "얼마나 오래", ease는 "어떤 속도 리듬으로" (생략하면 기본 ease)

↓ 점이 실제로 움직여요 — 같은 시간, 다른 리듬을 눈으로 비교

ease

느→빠→느 · 기본값, 가장 자연스러움

linear

처음부터 끝까지 일정 · 기계적 (로딩 바)

ease-in

느리게 시작 → 끝 빠르게 (점점 빨라짐)

ease-out

빠르게 시작 → 끝 느리게 (점점 느려짐)

ease-in-out

양끝 느리게 · ease보다 더 부드러움

자연스러운 UI엔 보통 ease·ease-out — 로딩 바처럼 일정해야 하면 linear

핵심 요약
• transform = 모양 변형(rotate 회전 · scale 확대)
• transition = 변형에 시간을 줘 부드럽게
• 마지막 easing(ease·linear 등) = 변화의 속도 리듬
• 둘은 짝꿍 — :hover와 자주 함께

10

자동 애니메이션

자동 애니메이션 (@keyframes)

클릭 없이도 둥둥 — @keyframes로 동작 정의, animation으로 무한 반복

• @keyframes — 0%→50%→100% 순간의 모습 정의
• animation — 정의한 동작을 요소에 적용·반복(infinite)

미리보기 — 자동으로 움직임

폴더 구조

11/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 자동 애니메이션

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자동 애니메이션 (@keyframes)</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- 이 공에 animation 적용 → 자동으로 둥둥 -->
    <div class="ball"></div>
  </body>
</html>

styles/main.css

/* styles/main.css */
@keyframes float {                          /* float: 움직임 "대본"(이름)을 미리 정의 */
  0%, 100% { transform: translateY(0); }      /* 시작(0%)·끝(100%): 제자리 */
  50%      { transform: translateY(-30px); }  /* 중간(50%): 위로 30px 올라감 (translateY 음수 = 위) */
}
.ball {
  width: 80px; height: 80px;
  border-radius: 50%; background: hotpink;    /* border-radius 50% → 정사각형이 완전 동그라미 */
  animation: float 1.5s ease-in-out infinite; /* float 대본을 1.5초씩 무한(infinite) 반복 */
}

infinite라 멈추지 않고 위아래로 둥둥 — @keyframes는 "0%→50%→100% 순간"의 모습을 정해 줌

핵심 요약
• @keyframes 이름 — 구간별(0~100%) 모습 정의
• animation — 그 이름을 요소에 적용(시간·반복)
• :hover 없이도 자동 — infinite로 무한 반복

11

네온 그라디언트

네온 그라디언트 카드

두 색이 섞인 배경 + 빛나는 테두리 — linear-gradient + box-shadow

• background: linear-gradient — 두 색을 비스듬히 섞은 배경
• box-shadow — 큰 흐림 반경으로 네온처럼 번지는 빛

미리보기

NEON

폴더 구조

12/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 네온 효과

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>네온 그라디언트 카드</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- 이 박스에 linear-gradient 배경 + box-shadow 네온빛 적용 -->
    <div class="neon">NEON</div>
  </body>
</html>

styles/main.css

/* styles/main.css */
.neon {
  width: 220px; height: 120px;
  display: flex; align-items: center; justify-content: center;  /* 글자 가운데 (flex 가운데정렬 3종 세트) */
  color: white; font-size: 22px; font-weight: bold;
  border-radius: 20px;   /* 모서리 둥글게 */
  background: linear-gradient(135deg, #ec4899, #8b5cf6);   /* 135도 방향으로 분홍→보라 색 섞기 */
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.7);            /* 0 0=그림자 위치(가운데), 25px=흐림 반경 → 네온빛 · rgba 끝 0.7=투명도 70% */
}

box-shadow의 큰 흐림 반경(25px)이 네온처럼 번지는 빛 — 135deg는 그라디언트 방향

핵심 요약
• linear-gradient — 두 색 그라디언트 배경(135deg 방향)
• box-shadow — 흐림 반경 크게 → 네온 글로우
• 숫자만 바꿔 색·번짐 조절

12

position

요소 위치 잡기 — position

position = 요소를 어디에 놓을지 정하는 속성 — 기본값 static은 글 흐름대로 차곡차곡 — 짝꿍 top·right·bottom·left로 미세 위치 지정

종류 한눈에 (기본 static + 활용 4종)
• static — 기본, 원래 흐름 그대로 (위치 지정 안 먹힘)
• relative — 자기 원래 자리 기준으로 살짝 이동 (자리는 그대로 차지)
• absolute — 가장 가까운 위치 지정 조상 기준 (조상에 position: relative 등 지정 필요)
• fixed — 화면(뷰포트) 고정, 스크롤해도 그대로
• sticky — 스크롤하다 일정 지점에서 착 붙음

absolute·fixed는 흐름에서 빠져나옴(자리 안 차지) — 겹칠 땐 z-index 숫자 큰 쪽이 위

미리보기

position

부모 (relative)

relative
(원래 자리서 살짝)

absolute
(부모 우측 상단)

fixed
(부모 우측 하단)

※ fixed·sticky의 실제 화면 고정·착붙음은 코드를 실행해 스크롤하며 확인

폴더 구조

13/
├─ index.html        # 화면 (위치 잡을 박스들)
└─ styles/
   └─ main.css       # position 적용

index.html

<!-- index.html : position 연습 -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요소 위치 잡기 — position</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <h1>position</h1>
    <!-- 부모에 relative → 안쪽 absolute가 이 부모 기준 -->
    <div class="parent">
      <span class="ptag">부모 (relative)</span>
      <div class="rel">relative</div>
      <div class="abs">absolute</div>
    </div>
    <div class="fixed">fixed</div>
    <div class="sticky">sticky</div>
    <p>일반 글은 원래 흐름대로 흐름</p>
  </body>
</html>

styles/main.css

/* styles/main.css */

/* 페이지를 일부러 길게 만들어 스크롤 생성 → fixed·sticky 동작 확인용
   (스크롤 자체는 브라우저 기본 기능 — 내용이 화면보다 길면 자동, JS 아님) */
body { min-height: 1500px; }

/* 부모 박스 : position: relative 를 줘야
   안쪽 absolute 자식이 "이 박스" 기준으로 자리잡음 */
.parent {
  position: relative;          /* 기준이 되는 조상 */
  height: 120px;
  margin: 10px 0;
  border: 2px dashed #8b5cf6;
  border-radius: 8px;
  background: #f6f0ff;
}
.ptag { position: absolute; top: 6px; left: 10px; color: #8b5cf6; font-weight: bold; }

/* relative : 원래 자리 기준으로 이동 (자리는 그대로 차지) */
.rel {
  position: relative;
  top: 30px;                   /* 원래 위치에서 아래로 30px */
  left: 20px;                  /* 원래 위치에서 오른쪽으로 20px */
  width: 150px; padding: 8px;
  background: #34d399; color: #06301f; font-weight: bold; border-radius: 6px;
}

/* absolute : 가장 가까운 position 조상(.parent) 기준 — 흐름에서 빠짐 */
.abs {
  position: absolute;
  top: 10px; right: 10px;      /* 부모의 오른쪽 위 구석 */
  width: 120px; padding: 8px;
  background: #f59e0b; color: #3a2400; font-weight: bold; border-radius: 6px;
}

/* fixed : 화면(뷰포트) 고정 — 스크롤해도 그 자리 */
.fixed {
  position: fixed;
  bottom: 16px; right: 16px;   /* 화면 오른쪽 아래 구석 */
  padding: 10px;
  background: #ec4899; color: #fff; font-weight: bold; border-radius: 6px;
  z-index: 10;                 /* 겹치면 숫자 큰 쪽이 위로 */
}

/* sticky : 스크롤하다 top: 0 지점에 닿으면 상단에 착 붙음 */
.sticky {
  position: sticky;
  top: 0;                      /* 화면 맨 위에 닿으면 고정 */
  margin: 10px 0;
  padding: 8px 12px;
  background: #2563eb; color: #fff; font-weight: bold; border-radius: 6px;
}

핵심 요약
• position: relative — 원래 자리 기준 이동
• position: absolute — 위치 지정 조상 기준
• position: fixed — 화면(뷰포트) 고정
• position: sticky — 스크롤 시 착 붙음
• 짝꿍 top·left로 위치, z-index로 겹침 순서

실무 활용 — "무언가 위에 겹쳐 띄우고 싶다" → 부모 relative + 자식 absolute 짝꿍이 가장 흔함
• 카드 우상단 NEW 뱃지 — 카드 relative + 뱃지 absolute
• 썸네일 위 × 닫기 버튼 · input 안 🔍 검색 아이콘 — 부모 relative + 자식 absolute
• 툴팁 · 말풍선 위치 — 기준 relative + 내용 absolute
• 떠있는 채팅 버튼 · 상단 고정 메뉴바 — fixed (스크롤해도 그대로)
• 테이블 헤더 · 사이드 목차 — sticky (스크롤하다 착 붙음)

쓰는 법 — 4종을 외우는 게 아니라 "겹치기·고정" 필요할 때 패턴으로 고름 — 평소엔 static(기본)이 90%, 겹쳐 띄울 때만 부모 relative 깔고 자식 absolute

13

Grid 격자

2차원 격자 — Grid

부모에 display: grid 한 줄이면 행+열 2차원 격자 — 자식들이 칸에 자동으로 채워짐

flex는 가로 한 줄, grid는 행과 열 동시
• grid-template-columns — 칸(열) 개수·너비 정하기
• repeat(3, 1fr) — 1fr 1fr 1fr과 같음 (3칸 똑같이)
• 1fr — 남은 공간 1몫씩 (fraction)
• gap — 칸 사이 간격

카드·갤러리·메뉴처럼 반듯한 격자에 딱 — grid-template-columns와 gap 둘만으로 3칸 카드 배치 완성

미리보기

카드 1

카드 2

카드 3

카드 4

카드 5

카드 6

폴더 구조

14/
├─ index.html        # 화면 (카드 6개)
└─ styles/
   └─ main.css       # 3칸 격자 배치

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2차원 격자 — Grid</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- 부모 .grid 에 카드 6개 → main.css가 3칸 격자로 자동 배치 -->
    <div class="grid">
      <div class="card">카드 1</div>
      <div class="card">카드 2</div>
      <div class="card">카드 3</div>
      <div class="card">카드 4</div>
      <div class="card">카드 5</div>
      <div class="card">카드 6</div>
    </div>
  </body>
</html>

styles/main.css

/* styles/main.css */
.grid {
  display: grid;                         /* 2차원 격자 켜기 */
  grid-template-columns: repeat(3, 1fr); /* 3칸 똑같은 너비 (1fr 1fr 1fr 과 같음) */
  gap: 12px;                             /* 칸 사이 간격 */
}

/* 카드 6개는 위 격자에 자동으로 채워짐 (3개씩 두 줄) */
.card {
  background: hotpink;   /* 배경 분홍 */
  color: white;          /* 글자 흰색 */
  text-align: center;    /* 가운데 정렬 */
  padding: 22px 0;       /* 위아래 안쪽 여백 */
  border-radius: 8px;    /* 모서리 둥글게 */
}

자식을 따로 건드리지 않아도 부모 한 곳의 grid-template-columns와 gap만으로 반듯한 3칸 격자 완성 — 가로 한 줄은 flex, 행+열 격자는 grid

핵심 요약
• display: grid — 2차원 격자 켜기
• grid-template-columns: repeat(3, 1fr) — 3칸 균등
• gap — 칸 사이 간격
• 부모 한 곳만으로 카드 자동 배치(가로 한 줄은 flex, 격자는 grid)

1fr이 뭔가요? — fr = fraction(분수) — px 같은 고정 크기 아니라 남은 공간을 나눠 갖는 비율 단위
• repeat(3, 1fr) = 1fr 1fr 1fr — 남은 공간 3등분 → 3칸 똑같이
• 1fr 2fr 1fr — 1:2:1 비율, 가운데 칸만 2배 넓게
• 200px 1fr — 200px 먼저 떼고 남은 공간 전부를 1fr이 차지 (사이드바 고정 + 본문 가변)

왜 % 대신 fr? — %는 gap 간격까지 계산에 넣어 합이 넘쳐 줄바꿈 꼬임 — fr은 gap 먼저 뺀 뒤 남은 폭만 나눠 깔끔 → 격자엔 fr 권장

14

반응형 @media

화면 크기별 스타일 — media query

화면 폭에 따라 다른 CSS 적용 — @media 한 덩어리로 모바일·PC 동시 대응

@media (max-width: 600px) — 폭이 600px 이하일 때만 안쪽 규칙 적용

넓을 때 가로 배치(flex-direction: row) → 좁을 때 세로(flex-direction: column)로 전환

미리보기

※ 카드 안에선 라이브 리사이즈가 안 보여 두 화면 상태를 나란히 목업으로

넓은 화면 (PC)

A

B

C

좁은 화면 (모바일)

A

B

C

폴더 구조

15/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 화면 폭별 스타일

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화면 크기별 스타일 — media query</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- 카드 3개를 담는 상자 -->
    <div class="box">
      <div class="card">A</div>
      <div class="card">B</div>
      <div class="card">C</div>
    </div>
  </body>
</html>

styles/main.css

/* styles/main.css */

/* 기본(넓은 화면): 카드를 가로로 나란히 */
.box {
  display: flex;          /* flex 켜기 → 자식(.card)들이 한 줄로 정렬됨 */
  flex-direction: row;   /* 가로 배치 (왼→오) */
  gap: 10px;              /* 카드 사이 간격 10px */
  padding: 12px;          /* .box 안쪽 사방 여백 12px (카드가 벽에 안 붙게) */
  background: #f0f3f6;    /* 연회색 배경 */
}
.card {
  flex: 1;                /* 남는 가로 공간 균등 분할 → 카드들 같은 너비 */
  padding: 30px 0;        /* 상하 30px, 좌우 0 → 세로로 통통 (가로는 flex가 결정) */
  text-align: center;     /* 글자 가운데 정렬 */
  color: white;           /* 글자 흰색 */
  font-weight: bold;      /* 글자 굵게 */
  border-radius: 8px;     /* 모서리 8px 둥글게 */
  background: linear-gradient(135deg, #ec4899, #8b5cf6);  /* 분홍→보라 대각선 그라데이션 */
}

/* 화면 폭이 600px 이하일 때만 아래 규칙 적용 (모바일) */
@media (max-width: 600px) {
  .box {
    flex-direction: column;   /* 세로로 쌓기 */
  }
}

@media (max-width: 600px) 안의 규칙은 폭이 좁을 때만 덮어씀 — 브라우저 창을 줄였다 늘이며 가로↔세로 전환 확인

핵심 요약
• @media (max-width: 600px) — 폭 조건 만족 시에만 안쪽 규칙 적용
• flex-direction: row(가로) ↔ column(세로)로 전환
• 한 CSS로 PC·모바일 동시 대응(반응형)

15

CSS 변수

CSS 변수 (custom properties · :root · var())

CSS 변수 = 값에 이름표 붙이기 — 색·간격을 한 곳에 정의하고 여러 곳에서 꺼내 쓰기

정의는 :root 안에 --이름: 값; 형태
• --main-color: #ec4899; — 색 이름표
• --gap: 12px; — 간격 이름표
• 변수 이름은 항상 --(대시 두 개)로 시작

사용은 var(--이름) 으로 꺼내기
• color: var(--main-color);
• 버튼 2개가 같은 --main-color 사용 → :root 한 줄만 고치면 둘 다 동시에 바뀜 (유지보수 핵심)

미리보기

두 버튼 모두 var(--main-color) 사용 — :root 한 줄만 고치면 둘 다 바뀜

폴더 구조

16/
├─ index.html        # 화면 (버튼 2개)
└─ styles/
   └─ main.css       # CSS 변수 정의·사용

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 변수 (custom properties · :root · var())</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- 버튼 2개 — 둘 다 같은 변수(--main-color)로 색을 칠함 -->
    <div class="row">
      <button class="btn">확인</button>
      <button class="btn">취소</button>
    </div>
  </body>
</html>

styles/main.css

/* styles/main.css */

/* 1) 값에 이름표 붙이기 — :root 안에 변수 정의 */
/*    :root = 문서 전체의 뿌리 → 어디서든 꺼내 쓸 수 있음 */
:root {
  --main-color: #ec4899;  /* 메인 색 (이 한 줄만 고치면 전체 반영) */
  --gap: 12px;            /* 버튼 사이 간격 */
}

/* 2) 변수 꺼내 쓰기 — var(--이름) */
.row {
  display: flex;
  gap: var(--gap);        /* 간격도 변수로 */
}

.btn {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: var(--main-color);  /* 버튼1·버튼2 같은 색 */
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* 색을 바꾸고 싶으면? --main-color 값 한 줄만 수정하면
   두 버튼이 한꺼번에 바뀜 (예: #2563eb 로 바꿔보기) */

같은 색 버튼 2개가 --gap 간격으로 나란히, :root의 --main-color 한 줄만 바꾸면 둘 다 동시에 색 변경 — 반복 값은 변수로 모아 한 곳에서 관리

핵심 요약
• :root에 --이름: 값으로 정의(이름표)
• var(--이름)으로 꺼내 사용
• --main-color 한 줄만 고치면 사용처 전부 반영 — 유지보수 핵심

16

그림자·효과

그림자·둥근모서리·전환 — box-shadow · border-radius · opacity · transition

카드 하나에 효과 4종 — box-shadow 그림자 · border-radius 둥근 모서리 · opacity 투명도 · transition 부드러운 변화

효과 한 줄씩 뜻
• box-shadow: 0 6px 18px rgba(0,0,0,.25) — 카드 아래 그림자 (x·y·번짐·색)
• border-radius: 16px — 모서리 둥글게
• opacity: 0.85 — 살짝 비치게 (1=불투명, 0=완전 투명)
• transition: all 0.3s ease — 바뀔 때 0.3초에 걸쳐 스르륵

:hover 에서 transform: translateY(-8px) 로 떠오르고 그림자 진해짐 — transition 덕에 뚝딱이 아니라 천천히

미리보기 (마우스 올려보기)

올려봐

폴더 구조

17/
├─ index.html        # 화면
└─ styles/
   └─ main.css       # 효과 4종 + hover

index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그림자·둥근모서리·전환 — box-shadow · border-radius · opacity · transition</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- 이 카드에 효과 4종이 모두 들어감 -->
    <div class="card">올려봐</div>
  </body>
</html>

styles/main.css

/* styles/main.css */
.card {
  width: 150px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  background: hotpink; color: white; font-weight: 700;

  border-radius: 16px;                      /* ① 모서리 둥글게 */
  opacity: 0.85;                            /* ② 살짝 비치게 (1=꽉참) */
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);  /* ③ 그림자 → 0:좌우  6px:위아래  18px:번짐  rgba:색+투명도 */
  transition: all 0.3s ease;                /* ④ 바뀔 때 0.3초 스르륵 */
}

/* 마우스 올리면 → 떠오르고 또렷해지고 그림자 커짐 */
.card:hover {
  opacity: 1;                                  /* 또렷하게 */
  transform: translateY(-8px);                 /* 위로 8px 떠오름 */
  box-shadow: 0 16px 32px rgba(255,105,180,0.5);  /* 그림자 진하게 */
}

효과 4종을 한 카드에 모아 transition으로 hover 시 부드럽게 떠오르는 카드 — 숫자(0.3s · -8px · 16px)를 바꿔 속도·높이·그림자 조절

핵심 요약
• box-shadow — 그림자
• border-radius — 둥근 모서리
• opacity — 투명도
• transition — 부드러운 변화
• :hover + transform으로 떠오르는 카드

17

가상 요소

가짜 요소로 장식 추가 — ::before · ::after

HTML을 건드리지 않고 콘텐츠 앞(::before)과 뒤(::after)에 장식을 끼워 넣는 가상 요소

실제 DOM에는 없는 가짜 요소 — content 속성이 반드시 있어야 화면에 나타남

제목 앞에 content: "★ " 별 붙이기, 인용문 양옆 따옴표, 밑줄 장식 등 순수 CSS 꾸밈

미리보기

즐겨찾기 메뉴

가짜 요소는 HTML에 없다

밑줄 장식이 붙은 문장

폴더 구조

18/
├─ index.html        # 가상 요소를 보여줄 문서
└─ styles/
   └─ main.css       # ::before · ::after 장식 규칙

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles/main.css" />
  <title>가상 요소 ::before ::after</title>
</head>
<body>
  <!-- 제목 앞에 ::before 로 별(★)이 붙음 -->
  <h1 class="star-title">즐겨찾기 메뉴</h1>
  <!-- ::before·::after 로 양옆에 따옴표가 생김 -->
  <p class="quote">가짜 요소는 HTML에 없다</p>
  <!-- ::after 로 글자 아래 파란 줄이 그려짐 -->
  <p class="underline-deco">밑줄 장식이 붙은 문장</p>
</body>
</html>

styles/main.css

/* ===== 가상 요소(::before / ::after) 연습 ===== */
/* 핵심: content 속성이 없으면 화면에 절대 안 나타남! */

/* 1) 제목 앞에 별 붙이기 — ::before */
.star-title { color: navy; font-size: 18px; }
.star-title::before {
  content: "★ ";   /* 콘텐츠 '앞'에 별 + 공백 삽입 */
  color: gold;
}

/* 2) 인용문 양옆에 따옴표 — ::before + ::after */
.quote { color: #444; font-style: italic; }
.quote::before { content: "“ "; color: tomato; font-weight: 700; }  /* 앞 따옴표 */
.quote::after  { content: " ”"; color: tomato; font-weight: 700; }  /* 뒤 따옴표 */

/* 3) 글자 아래 밑줄 장식 — 빈 content + 네모 박스 */
.underline-deco { position: relative; display: inline-block; color: #24292f; }
.underline-deco::after {
  content: "";        /* 빈 따옴표라도 꼭 있어야 보임 */
  display: block;     /* 블록으로 바꿔 줄 모양을 만듦 */
  width: 100%;
  height: 4px;
  margin-top: 3px;
  background: royalblue;
  border-radius: 2px;
}

HTML 수정 없이 ::before·::after와 content 필수 규칙으로 별·따옴표·밑줄 같은 장식을 더하는 가상 요소

핵심 요약
• ::before — 콘텐츠 앞에 장식
• ::after — 콘텐츠 뒤에 장식
• content 속성 필수 — 없으면 안 나타남
• HTML 수정 없이 순수 CSS로 별·따옴표·밑줄

왜 사용할까? — 장식용 빈 <span>을 HTML에 직접 넣지 않고 CSS 한 곳에서만 처리
• HTML이 깔끔하게 유지됨 (장식 태그가 늘어나지 않음)
• 한 줄만 수정하면 같은 클래스 전체에 반영 (유지보수 ↑)
• 별·따옴표는 "내용이 아님" → 스크린리더가 읽지 않음 (접근성 ↑)

😩 번거로운 방법 — *를 HTML에 직접 작성

index.html

<!-- 필수 입력 표시 * 를 label마다 직접 작성 -->
<label>이름 <span class="required">*</span></label>
<input type="text">

<label>이메일 <span class="required">*</span></label>
<input type="email">

<label>비밀번호 <span class="required">*</span></label>
<input type="password">
<!-- 필드 20개면 <span class="required">*</span> 를 20번 반복 작성... -->

styles/main.css

.required { color: red; }   /* 색만 지정 — * 글자는 HTML 쪽에 있음 */

😎 깔끔한 방법 — class만 붙이고 *는 CSS가

index.html

<!-- HTML엔 "필수다"라는 의미(class)만 -->
<label class="required">이름</label>
<input type="text">

<label class="required">이메일</label>
<input type="email">

<label>닉네임</label>   <!-- 선택 항목은 class 안 붙임 -->
<input type="text">

styles/main.css

.required::after {
  content: " *";   /* HTML 안 건드리고 * 자동 추가 */
  color: red;
}

차이는 *를 HTML에 직접 넣는 방식(번거로움)과 CSS가 자동으로 붙이는 방식(깔끔)의 차이 — 별 모양·색 변경은 ::after 한 줄로, 필수↔선택 전환은 class 추가·제거만으로 끝

실무 활용
• 필수 입력 * 표시 — label::after { content: " *"; }
• 링크 hover 밑줄 슬라이드 — a::after 빈 박스 → hover 시 width 확장
• 말풍선·툴팁 꼬리(삼각형), 목록 마커(✓·→), 인용부호
• 주의 — 진짜 내용(검색·SEO·복사 필요한 글)은 content로 넣지 말 것, 순수 장식만

18

CSS 리셋

CSS 리셋 — 브라우저 기본 여백 없애기

브라우저는 body·h1·p 등에 기본 여백을 미리 넣어둠 → 화면 가장자리에 흰 틈이 생기고, 브라우저마다 값도 조금씩 다름
작업 시작 전 이 기본값을 0으로 초기화하는 걸 CSS 리셋이라 함 — 실무 거의 필수

기본 리셋 3종 세트

/* styles/main.css : 맨 위에 먼저 */
* {
  margin: 0;              /* 기본 바깥 여백 제거 */
  padding: 0;             /* 기본 안쪽 여백 제거 */
  box-sizing: border-box; /* 크기 계산 방식 변경 */
}

• * = 모든 요소 선택자 (와일드카드)
• margin: 0 · padding: 0 — 브라우저 기본 여백 싹 제거 → 내가 준 값만 적용
• box-sizing: border-box — 크기 계산 방식을 바꿈 (아래)

미리보기 — 실습 코드 결과 (리셋 적용)

리셋 적용됨

main.css 맨 위 * 리셋 3줄을 지웠다 넣었다 하며 화면 왼쪽·위 흰 틈을 비교해 보세요.

box-sizing 핵심 — content-box vs border-box

width: 100px; padding: 20px 를 줬을 때 실제 폭이 달라짐

# content-box (기본) — padding이 width에 더해짐
실제 폭 = 100 + 20(좌) + 20(우) = 140px   # 삐져나감

# border-box — padding을 width 안에 포함
실제 폭 = 100px 그대로              # 계산 편함

border-box면 내가 정한 width가 최종 크기 — padding·border를 줘도 박스가 안 커져서 레이아웃이 안 틀어짐. 그래서 리셋에 거의 항상 포함

핵심 요약
• 브라우저 기본 여백 → 시작 전 0으로 초기화 = CSS 리셋
• * { margin:0; padding:0; box-sizing:border-box; } 3줄이 기본
• border-box = width가 최종 크기 (padding 줘도 안 커짐)
• 실무는 이 리셋을 맨 위에 먼저 깔고 스타일 작성

19

미니 프로젝트 (HTML + CSS)

미니 프로젝트 (HTML + CSS) — 01~18 전 기법 종합 프로필 카드 + 과제

앞서 배운 기법을 한 페이지에 모은 최종본 — 선택자 · 박스 모델 · flex · :hover · position · grid · @media · CSS 변수 · 효과 · 가상 요소 · transform/transition · gradient

한 화면에 들어간 기법
• :root CSS 변수로 테마 색·간격 한 곳 관리
• position: sticky 헤더 · absolute 배지
• display: grid 카드 갤러리 + @media 반응형
• box-shadow·border-radius·transform·transition hover 효과
• ::before 별 장식 + linear-gradient 배경

미리보기 — 코드 적용 결과 (카드에 마우스 올려보기)

김코딩

웹 개발을 배우는 주니어

HTML

CSS

JS

폴더 구조

19/
├─ index.html        # 화면 (헤더·소개·카드 갤러리)
└─ styles/
   └─ main.css       # 01~18 전 기법 종합 스타일

index.html

<!-- index.html : 01~18 기법을 모은 종합 프로필 페이지 -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미니 프로젝트 (HTML + CSS) — 01~18 전 기법 종합 프로필 카드 + 과제</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- position: sticky 헤더 (스크롤해도 상단 고정) + flex 메뉴 -->
    <header class="bar">
      <span class="logo">MY PAGE</span>
      <ul class="menu">
        <li><a href="#">홈</a></li>
        <li><a href="#">소개</a></li>
        <li><a href="#">연락</a></li>
      </ul>
    </header>

    <!-- position: relative 부모 + absolute 배지 -->
    <section class="hero">
      <span class="badge">NEW</span>
      <h1>김코딩</h1>
      <p class="special">웹 개발을 배우는 주니어</p>
    </section>

    <!-- grid 카드 갤러리 — 좁아지면 @media로 1칸 -->
    <div class="grid">
      <div class="card">HTML</div>
      <div class="card">CSS</div>
      <div class="card">JavaScript</div>
    </div>
  </body>
</html>

styles/main.css

/* styles/main.css — 01~18 종합 */

/* (18) CSS 리셋 — 기본 여백 제거 + box-sizing */
* {
  margin: 0;              /* 기본 바깥 여백 제거 */
  padding: 0;             /* 기본 안쪽 여백 제거 */
  box-sizing: border-box; /* padding 포함해 크기 계산 */
}

/* (15) CSS 변수 — 테마 색·간격을 한 곳에서 관리 */
:root {
  --main: #ec4899;   /* 메인 색 */
  --ink: #1f2430;    /* 글자 색 */
  --gap: 12px;       /* 간격 */
}

/* (01) 요소 선택자 + 기본 꾸미기 */
body { background: #f6f0ff; color: var(--ink); font-family: sans-serif; }

/* (12) position: sticky — 스크롤해도 상단 고정 */
.bar {
  position: sticky; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  background: var(--main); color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/* (05) flex 가로 메뉴 + (07) :hover 링크 */
.menu { display: flex; gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.menu a { color: #fff; text-decoration: none; }
.menu a:hover { text-decoration: underline; }

/* (12) relative 부모 + absolute 배지 · (17) ::before 별 · (01) 클래스 */
.hero { position: relative; padding: 28px 16px; text-align: center; }
.badge {
  position: absolute; top: 10px; right: 12px;
  background: gold; color: #3a2400;
  padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.hero h1::before { content: "★ "; color: var(--main); }
.special { color: var(--main); font-weight: 700; }

/* (13) grid 카드 갤러리 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap); margin: 16px;
}

/* (11) gradient + (16) 효과 4종 + (09) transform hover */
.card {
  background: linear-gradient(135deg, var(--main), #8b5cf6);
  color: #fff; text-align: center; font-weight: 700;
  padding: 26px 0;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
.card:hover { transform: translateY(-6px) scale(1.04); }

/* (14) @media 반응형 — 좁은 화면은 1칸 */
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
}

index.html을 열면 → 상단 고정 바, NEW 배지가 붙은 소개, 3칸 카드 갤러리(좁히면 1칸), 카드에 마우스 올리면 떠오름

핵심 요약
• :root 변수 — 테마 색·간격 한 곳 관리
• position — sticky 헤더·absolute 배지
• grid + @media — 반응형 카드 갤러리
• 효과 + ::before — 그림자·전환·별 장식
• 변수 한 곳(--main)만 바꿔도 테마 전체 변경
• 속성 색 = main.css 색과 일치 → 기법 출처 추적

실습 과제

① --main 색을 바꿔 테마 전체 바꾸기 (예 #2563eb)
② <div class="card"> 카드 더 추가 — grid가 자동 배치
③ 브라우저 폭을 줄여 @media 1칸 전환 확인
④ (도전) transition 시간·transform 값 바꿔 hover 느낌 조절
⑤ (도전) ::before 별을 다른 이모지로
⑥ (도전) animation으로 배지를 깜빡이게

20

CSS 참고 사이트

CSS 참고 사이트 — 바로 쓰는 부품·효과·명세 모음

직접 만들기 전에 먼저 보면 좋은 레퍼런스 5곳 — 복붙용 부품, 살아 움직이는 데모, 디자인 명세 포맷

사이트 모음

uiverse.io오픈소스 UI 부품(버튼·카드·로더) 모음
bentogrids도시락칸처럼 나눈 벤토 그리드 갤러리

활용 팁
• 부품을 그대로 복붙하지 말고 색·간격·radius만 내 테마에 맞춰 바꾸기
• 마음에 드는 효과는 F12로 CSS 뜯어보기