12주차 퀴즈 — DevFlash

CSS

Q. ul·li 목록을 가로 수평 메뉴로 만들려면?

클릭하여 답 확인 →

CSS

부모 ul에 display: flex를 주면 li들이 가로로 나란히 배치됨.
여기에 list-style: none(불릿 제거), a에 text-decoration: none(밑줄 제거)을 더하면 깔끔한 메뉴 완성.

← 다시 보기

CSS

Q. 로고는 왼쪽, 메뉴는 오른쪽으로 양 끝에 벌려 배치하려면 어떤 속성을 쓰나?

클릭하여 답 확인 →

CSS

컨테이너에 display: flex + justify-content: space-between (좌우 끝으로 벌리기) + align-items: center (세로 가운데).

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

← 다시 보기

CSS

Q. 반응형 햄버거 메뉴에서 ☰ 버튼(.nav-toggle)은 큰 화면과 모바일에서 각각 어떻게 표시하나?

클릭하여 답 확인 →

CSS

큰 화면(기본): display: none으로 숨김.
모바일(@media (max-width: 640px)): display: block으로 표시.
반대로 .nav-menu는 큰 화면에서 보이고 모바일에서 숨김.

← 다시 보기

CSS

Q. 모바일에서 숨긴 메뉴(.nav-menu)를 버튼으로 펼칠 때, 메뉴가 보이는 상태는 어떤 CSS인가?

클릭하여 답 확인 →

CSS

기본은 .nav-menu { display: none; }로 숨김.
버튼을 눌러 .show 클래스가 붙으면 .nav-menu.show { display: flex; flex-direction: column; }으로 세로 메뉴가 펼쳐짐.

(클래스 토글 자체는 JS가 필요. CSS만으로는 checkbox + :checked로 대체.)

← 다시 보기

CSS

Q. main과 aside를 가로 2단편집으로 배치하고 본문을 2배 넓게 하려면?

클릭하여 답 확인 →

CSS

두 요소를 감싼 컨테이너에 display: flex, 자식에 flex 비율 지정.

.wrapper { display: flex; gap: 24px; }
main  { flex: 2; }   /* 넓게 */
aside { flex: 1; }   /* 좁게 */

← 다시 보기

HTML

Q. main과 aside 시맨틱 태그는 각각 무엇을 담나?

클릭하여 답 확인 →

HTML

main: 페이지의 핵심 본문.
aside: 본문과 직접 관련은 적은 부가 정보 — 카테고리 메뉴, 최근 글 목록, 광고 등.

← 다시 보기

CSS

Q. 사이드바의 목록이 길 때, 고정 높이 안에서 세로 스크롤만 생기게 하려면?

클릭하여 답 확인 →

CSS

고정 height를 주고 overflow로 넘침을 처리.

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

← 다시 보기

CSS

Q. transition은 무엇을 하는 속성인가? 무엇을 지정하면 되나?

클릭하여 답 확인 →

CSS

속성 값이 바뀔 때 그 변화를 부드럽게 이어주는 효과. 시작·끝 값만 주면 중간은 브라우저가 자동 계산.

.box { transition: background 0.3s; }
.box:hover { background: orange; }

단, 중간 단계 프레임을 직접 제어할 수는 없음.

← 다시 보기

CSS

Q. 키 프레임(keyframe)이란 무엇이며, @keyframes에서 위치는 어떻게 지정하나?

클릭하여 답 확인 →

CSS

키 프레임 = 애니메이션 중간의 핵심 장면. 개발자가 키프레임만 지정하면 사이 프레임은 컴퓨터가 자동 생성.
위치는 퍼센트(%) 또는 from(0%)·to(100%)로 지정.

@keyframes bounce {
  from, to { bottom: 0; }
  50%      { bottom: 200px; }
}

← 다시 보기

CSS

Q. 정의한 @keyframes bounce를 요소에 무한 반복으로 적용하려면 어떤 속성들을 쓰나?

클릭하여 답 확인 →

CSS

#ball {
  animation-name: bounce;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

animation-name(이름) · animation-duration(재생 시간) · animation-iteration-count: infinite(무한 반복).

← 다시 보기

CSS

Q. transition과 @keyframes 애니메이션의 가장 큰 차이는?

클릭하여 답 확인 →

CSS

transition: 시작↔끝 2단계 변화만, 중간 제어 불가.
@keyframes: 0%·50%·100% 같은 여러 중간 단계를 직접 정의, 반복·무한 재생 가능.

← 다시 보기

CSS

Q. 메뉴를 데스크톱에선 가로, 모바일(≤640px)에선 세로로 쌓이게 하려면?

클릭하여 답 확인 →

CSS

미디어쿼리로 flex-direction을 바꿈.

.nav { display: flex; }  /* 기본: 가로 */

@media (max-width: 640px) {
  .nav {
    flex-direction: column;   /* 세로로 쌓임 */
    align-items: flex-start;
  }
}

← 다시 보기