퀴즈 / CSS / 문제

CSS scroll-behavior: smooth를 설정하면 어떤 효과가 있나요?

보통 MDN Web Docs
보기 및 정답
A 앵커 링크(#id) 클릭이나 JavaScript scrollTo 호출 시 부드러운 스크롤 애니메이션이 적용된다
B CSS 변수는 선언된 요소의 스코프 내에서만 유효하며 자식 요소에는 상속되지 않아 각각 별도로 선언해야 한다
C CSS에서 !important를 사용하면 해당 속성이 모든 하위 요소에도 자동으로 상속되어 적용되는 특성이 있다
D content-visibility: auto는 display: none과 유사하게 요소를 숨기는 속성이다

해설

html { scroll-behavior: smooth; }를 설정하면 <a href="#section"> 같은 앵커 링크 클릭 시 해당 위치로 즉시 이동하지 않고 부드럽게 스크롤됩니다. JavaScript 없이도 CSS만으로 부드러운 스크롤 효과를 구현할 수 있어 편리합니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

관련 문제

CSS text-wrap: balance 속성의 효과로 올바른 것은?
CSS
CSS @supports 규칙의 역할로 올바른 것은?
CSS
CSS content-visibility: auto 속성의 주된 이점은?
CSS
CSS에서 @keyframes와 animation 속성을 사용할 때, animation-fill-mode: forwards의 의미는?
CSS
CSS ::backdrop 의사 요소의 역할로 올바른 것은?
CSS
START THE LOOP · CHOOSE

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.

한 번의 결과에 기대지 않고 다시 만들 수 있도록, 문제 발견부터 제작·배포·수익화까지 이어지는 전체 흐름을 익혀보세요.

TTJ CLASS에서 다음 구조 고르기 →
처리 중...