[260702목 04일차] CSS

# CSS 학습일지

[CSS 2일차] Stylelint 자동검사부터
박스모델 · 가상클래스 · 애니메이션 · Flex/Grid까지

2026.07.02 · 학습 범위: CSS 03번 ~ 13번 폴더

📋 오늘 다룬 것들

오늘은 실습량이 꽤 많았다. CSS 자동 검사 도구로 시작해서 박스 모델, CSS를 붙이는 세 가지 방법, 가상클래스, transform·transition·keyframes를 활용한 애니메이션 효과들, 그리고 position과 grid까지 — 하루 만에 CSS의 핵심 개념 대부분을 훑은 느낌이다. 짧은 예제 위주라 눈에 바로 보이는 결과와 함께 익힐 수 있어서 좋았다.

검사 도구

StylelintHTMLHint

박스 모델

paddingmarginborder

CSS 연결법

외부 link내부 style인라인

가상클래스

:link:visited:hover:active

트랜스폼 & 애니메이션

transformtransition@keyframes

포지셔닝

relativeabsolutefixedsticky

레이아웃

flexgrid

비주얼 효과

3D flip네온 그라디언트

🗂️ 폴더별 메모

03 — Stylelint, CSS 자동 검사

Stylelint는 CSS 전용 린터다. 오타·세미콜론 누락·중복 선택자·속성 순서를 사람 대신 잡아준다. npx stylelint "styles/main.css" --fix 한 번이면 속성이 알파벳순으로 자동 정렬된다. HTML 쪽 검사는 담당이 달라서 HTMLHint를 따로 써야 한다는 것도 새로 알았다.

/* --fix 전 — 순서 뒤죽박죽 */
.box {
  width: 120px;
  color: white;
  background: hotpink;
}

/* --fix 후 — 알파벳순 자동 정렬, 결과 화면은 동일 */
.box {
  background: hotpink;
  color: white;
  width: 120px;
}

npm init stylelint는 쓰지 않는다. 대화형 마법사라 취소되면 에러가 나고, 이미 있는 .stylelintrc.json과 설정이 겹친다. 그냥 필요한 패키지 3개(stylelint stylelint-config-standard stylelint-order)만 설치하면 된다.

---

04 — 박스 모델 (padding · margin · border)

모든 요소는 네모 상자다. padding은 상자 안쪽 여백, margin은 바깥쪽 여백, border는 테두리 — 액자에 비유하면 padding은 액자와 사진 사이, margin은 옆 액자와의 거리다.

ul {
  padding: 20px;          /* 안쪽 여백 */
  border: 2px solid navy; /* 두께 종류 색 */
  margin: 20px;           /* 바깥 여백 */
}

값 개수	적용 방향	예시
1개	상하좌우 전부 동일	margin: 20px;
2개	상하 / 좌우	margin: 10px 30px;
4개	상→우→하→좌 (시계방향)	margin: 10px 20px 30px 40px;

margin: 0 auto는 상하 0, 좌우 auto — 블록 요소를 가로 가운데 정렬할 때 쓰는 조합이다.

---

05 — Flex 맛보기 (가로 정렬)

상자는 기본적으로 위→아래로 쌓인다. 가로로 나란히 두려면 부모에 display: flex 한 줄이면 끝. gap으로 간격을, list-style: none으로 목록 점을 없앴다.

.menu {
  display: flex;     /* 자식을 가로로 나란히 */
  gap: 10px;
  list-style: none;
}

---

06 — CSS 붙이는 3가지 방법

같은 스타일도 붙이는 방식이 셋이다. 여러 페이지에서 공유·관리하기 쉬운 외부 <link>가 보통 권장된다.

1외부 <link>별도 main.css 파일 — 여러 페이지 공유, 관리 쉬움 (권장)

2내부 <style>head 안에 직접 — 한 페이지에만 적용

3인라인 style=""태그에 바로 — 한 요소에만, 우선순위 가장 높음

충돌 시 우선순위: 인라인 > 내부 · 외부

---

07 — 가상클래스 (:hover 등)

선택자 뒤 콜론(:) + 상태 = 가상클래스, "그 순간"에만 스타일이 적용된다. 링크의 4가지 상태는 반드시 정해진 순서로 써야 한다는 걸 새로 배웠다.

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

LVHA(러브하) 순서 고정 — :link → :visited → :hover → :active. CSS는 같은 조건이면 나중(아래) 규칙이 이기기 때문에, 순서가 틀리면 :visited가 :hover를 덮어서 마우스를 올려도 색이 안 바뀐다.

---

08 — 카드 뒤집기 (3D flip)

마우스를 올리면 카드가 Y축으로 회전해 뒤집힌다. transform-style: preserve-3d로 입체 공간을 만들고, backface-visibility: hidden으로 뒤로 돌아간 면을 숨기는 조합이 핵심이었다.

.inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;  /* 자식을 3D 공간에 */
}
.card:hover .inner { transform: rotateY(180deg); }
.front, .back { backface-visibility: hidden; } /* 뒷면 숨김 */
.back { transform: rotateY(180deg); } /* 미리 뒤집어 둠 */

---

09 — hover 회전 + 확대, easing 곡선

transform: rotate() scale()로 기울이고 확대하고, transition으로 부드럽게 처리했다. 이번에 새로 짚은 건 easing(속도 곡선) — 같은 시간이라도 리듬에 따라 체감이 완전히 달라진다.

.box { transition: transform 0.3s ease; }
.box:hover { transform: rotate(10deg) scale(1.2); }

easing	리듬
ease	느→빠→느, 기본값·가장 자연스러움
linear	처음부터 끝까지 일정, 로딩 바에 적합
ease-in	느리게 시작 → 점점 빨라짐
ease-out	빠르게 시작 → 점점 느려짐
ease-in-out	양끝 느리게, ease보다 더 부드러움

---

10 — 자동 애니메이션 (@keyframes)

클릭이나 hover 없이도 저절로 움직이게 하려면 @keyframes로 동작을 정의하고 animation으로 반복시킨다. infinite를 주면 멈추지 않고 계속 반복된다.

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-30px); }
}
.ball { animation: float 1.5s ease-in-out infinite; }

---

11 — 네온 그라디언트 카드

두 색을 섞은 배경 linear-gradient와, 흐림 반경을 크게 준 box-shadow를 조합하면 네온사인처럼 빛나는 카드를 만들 수 있다.

.neon {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.7);
}

NEON

---

12 — 요소 위치 잡기 (position)

position은 요소를 어디에 놓을지 정하는 속성이다. 기본값 static은 그냥 흐름대로 쌓이고, 나머지 4종은 각자 기준점이 다르다.

1relative자기 원래 자리 기준으로 살짝 이동 (자리는 그대로 차지)

2absolute가장 가까운 position 지정 조상 기준, 흐름에서 빠짐

3fixed화면(뷰포트) 고정, 스크롤해도 그대로

4sticky스크롤하다 지정 지점에서 착 붙음

.parent { position: relative; }  /* 기준이 되는 조상 */
.abs    { position: absolute; top: 10px; right: 10px; }
.fixed  { position: fixed; bottom: 16px; right: 16px; z-index: 10; }
.sticky { position: sticky; top: 0; }

실무에서 가장 흔한 패턴은 부모 relative + 자식 absolute. 카드 우상단 NEW 뱃지, 검색창 안 🔍 아이콘, 툴팁 위치 잡기가 전부 이 조합이다. 평소엔 static이 90%, 겹쳐 띄울 때만 꺼내 쓴다.

---

13 — 2차원 격자 (Grid)

부모에 display: grid 한 줄이면 행과 열을 동시에 가진 격자가 만들어진다. flex가 가로 한 줄짜리 배치라면, grid는 카드·갤러리처럼 반듯한 2차원 배치에 딱이다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3칸 균등 = 1fr 1fr 1fr */
  gap: 12px;
}

fr은 fraction(분수) 단위 — px처럼 고정 크기가 아니라 남은 공간을 나눠 갖는다. 200px 1fr이면 사이드바 200px 고정 + 본문이 나머지 전부. % 대신 fr을 쓰는 이유는 gap 간격을 먼저 뺀 뒤 남은 폭만 나누기 때문에 줄바꿈이 안 꼬인다.

✍️ 마치며

오늘은 개념 하나하나보다 "손으로 만들어보니 눈에 바로 보인다"는 게 가장 크게 느껴진 하루였다. 특히 가상클래스 순서(LVHA)나 fr 단위처럼 이유를 알아야 이해되는 부분들을 짚고 넘어갈 수 있어서 좋았다. position 파트를 하면서는 예전에 float: left로 nav를 만들던 시절이 문득 떠올랐다. 그땐 레이아웃 하나 잡으려고 clearfix까지 써가며 씨름했는데, 지금은 flex·grid·position이 훨씬 명확하게 그 역할을 나눠 갖고 있다는 게 새삼 느껴졌다. 다음엔 flex와 grid를 본격적으로 더 파볼 예정이다.

🏷️ CSS  |  애니메이션  |  레이아웃  |  학습일지  |  프론트엔드