CSS gap 속성이 Flexbox와 Grid에서 margin 대비 가지는 장점은?

Q: CSS gap 속성이 Flexbox와 Grid에서 margin 대비 가지는 장점은?

요소 사이의 간격만 설정하므로 첫 번째와 마지막 요소 바깥에 불필요한 여백이 생기지 않는다 gap 속성은 인접한 아이템 '사이'에만 간격을 넣습니다. margin을 사용할 때 첫 번째/마지막 요소에 불필요한 외부 여백이 생기는 문제를 해결하며, 코드도 더 간결해집니다.

쉬움 MDN Web Docs

보기 및 정답

A 요소 사이의 간격만 설정하므로 첫 번째와 마지막 요소 바깥에 불필요한 여백이 생기지 않는다

B flex-direction: row-reverse를 적용하면 아이템이 세로로 역순 배치된다

C 그리드에서 justify-items와 justify-content는 완전히 동일한 속성이다

D 플렉스 아이템에 position: absolute를 적용해도 flex 레이아웃이 유지된다

해설

gap 속성은 인접한 아이템 '사이'에만 간격을 넣습니다. margin을 사용할 때 첫 번째/마지막 요소에 불필요한 외부 여백이 생기는 문제를 해결하며, 코드도 더 간결해집니다.

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

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

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

CSS gap 속성이 Flexbox와 Grid에서 margin 대비 가지는 장점은?

해설

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

관련 문제

모두를 위한 진짜 쎈 바이브코딩