12주차 학습 — DevFlash

flex 메뉴 — 가로 내비게이션

ul·li 목록은 기본적으로 세로로 쌓입니다. 부모인 ul에 display: flex를 주면 li 아이템들이 가로로 나란히 배치되어 수평 메뉴가 됩니다.

.navbar { background: green; padding: 12px 16px; }
.nav-list {
  display: flex;        /* 가로 방향으로 나란히 배치 */
  list-style: none;     /* 기본 불릿(•) 제거 */
  margin: 0;
  padding: 0;
}
.nav-item { margin-right: 16px; }
.nav-item a {
  color: white;
  text-decoration: none;  /* 밑줄 제거 */
}

            수평 메뉴의 3요소:
            ① ul에 display: flex (가로 배치) ·
            ② list-style: none (불릿 제거) ·
            ③ a에 text-decoration: none (밑줄 제거)
          

로고 + 메뉴 양끝 배치

한쪽에 로고, 반대쪽에 메뉴를 두는 흔한 헤더 패턴입니다. justify-content: space-between으로 양 끝으로 벌리고, align-items: center로 세로 가운데를 맞춥니다.

.nav {
  display: flex;
  justify-content: space-between;  /* 좌우 끝으로 벌리기 */
  align-items: center;             /* 세로 가운데 정렬 */
  padding: 12px 16px;
  background-color: green;
}
.nav-menu a { margin-left: 16px; }

/* 화면 폭이 640px 이하: 세로로 배치 */
@media (max-width: 640px) {
  .nav {
    flex-direction: column;   /* 로고 아래에 메뉴가 쌓임 */
    align-items: flex-start;  /* 왼쪽 정렬 */
  }
}

반응형 햄버거 메뉴

데스크톱에서는 가로 메뉴를 보이고, 모바일(좁은 화면)에서는 메뉴를 숨긴 뒤 ☰ 햄버거 버튼으로 펼치는 패턴입니다.

요소	큰 화면 (기본)	모바일 (≤640px)
`.nav-menu`	`display: flex` (가로 메뉴)	`display: none` (숨김)
`.nav-toggle` (☰)	`display: none` (숨김)	`display: block` (표시)

/* 햄버거 버튼: 기본은 숨김 */
.nav-toggle { display: none; }

@media (max-width: 640px) {
  .nav-menu {
    display: none;             /* 기본 상태: 메뉴 숨김 */
    flex-direction: column;    /* 펼치면 세로 메뉴 */
    width: 100%;
  }
  .nav-menu.show { display: flex; }  /* 버튼 클릭 후 표시 */
  .nav-toggle { display: block; }    /* 모바일에서만 ☰ 표시 */
}

            참고: 버튼 클릭으로 .show 클래스를 토글하는 동작은 JavaScript가 필요합니다.
            CSS만으로 같은 효과를 내려면 숨겨진 checkbox + label + :checked 선택자를 사용합니다.
          

flex 2단편집 — main + aside

본문(main)과 사이드바(aside)를 가로로 나란히 두는 2단편집 레이아웃입니다. 두 요소를 감싼 컨테이너에 display: flex를 주면 됩니다.

/* HTML 구조 */
<div class="wrapper">
  <main> ... 본문 ... </main>
  <aside> ... 사이드바 ... </aside>
</div>

/* CSS */
.wrapper {
  display: flex;
  gap: 24px;
}
main  { flex: 2; }   /* 본문이 더 넓게 (2:1 비율) */
aside { flex: 1; }   /* 사이드바는 좁게 */

aside 안에는 보통 카테고리 메뉴, 최근 글 목록 등이 들어갑니다. 목록이 길면 overflow로 스크롤 영역을 만들 수 있습니다.

.recentNav ol {
  height: 240px;
  overflow: hidden scroll;  /* 가로 숨김 / 세로 스크롤 */
}

            시맨틱 태그:
            main = 페이지의 핵심 본문 ·
            aside = 본문과 직접 관련은 적은 부가 정보(메뉴·광고·관련 글).
          

전환 (transition)

transition은 속성 값이 바뀔 때 그 변화를 부드럽게 이어주는 효과입니다. 시작 값과 끝 값만 지정하면 중간 단계는 브라우저가 자동으로 계산합니다(개발자가 중간 프레임을 직접 제어할 수는 없음).

.box {
  background: skyblue;
  transition: background 0.3s, transform 0.3s;
}
.box:hover {
  background: orange;       /* 0.3초에 걸쳐 색이 바뀜 */
  transform: scale(1.1);    /* 0.3초에 걸쳐 커짐 */
}

구성 값	의미
`property`	전환을 적용할 속성 (`all` = 전체)
`duration`	전환 시간 (`0.3s`, `300ms`)
`timing-function`	속도 곡선 (`ease`, `linear`, `ease-in`)
`delay`	시작 지연 시간

애니메이션 (@keyframes)

키 프레임(keyframe)은 애니메이션 중간 중간의 핵심 장면입니다. 개발자가 키프레임만 작성하면 그 사이의 프레임은 컴퓨터가 자동으로 생성합니다. transition과 달리 여러 중간 단계를 직접 제어할 수 있습니다.

/* 1. @keyframes 로 장면 정의 (위치는 %로 지정) */
@keyframes bounce {
  from, to { bottom: 0px; }   /* 0% 와 100% */
  50%      { bottom: 200px; } /* 중간 장면 */
}

/* 2. 요소에 애니메이션 연결 */
#ball {
  position: absolute;
  animation-name: bounce;            /* 사용할 @keyframes 이름 */
  animation-duration: 5s;            /* 1회 재생 시간 */
  animation-iteration-count: infinite; /* 무한 반복 */
}

속성	역할
`animation-name`	적용할 `@keyframes` 이름
`animation-duration`	한 번 재생되는 시간
`animation-iteration-count`	반복 횟수 (`infinite` = 무한)
`animation-timing-function`	속도 곡선 (`ease-in`, `ease-out` 등)

            transition vs @keyframes:
            transition은 시작↔끝 2단계 변화에 적합 ·
            @keyframes는 0%·50%·100% 처럼 여러 중간 단계와 반복·무한 재생이 필요할 때 사용.
          

퀴즈로 복습하기

12주차 퀴즈 풀기 →