인프런 커뮤니티 질문&답변

정세연님의 프로필 이미지

작성한 질문수

인터랙티브 웹 개발 제대로 시작하기

CSS 3D 2

안녕하세요. 질문이 있습니다.

작성

·

201

0

먼저 좋은 강의 감사합니다. 너무 재밌게 듣고 있어요.

다름이 아니라 올려주신 소스코드에서

card-side 부분은 absoulte를 주셧지만 world 부분에는 relative를 주지 않으셨습니다. 그럼 디폴트값으로 static이 되고 제가 알기론 absoulte는 static이 아닌 엘리먼트 부모가 없으면 가장 위의태그(body)를 기준으로 적용된다고 알고 있습니다. 하지만 올려주신 소스코드에서 card-side의 left와 top값을 0으로 변경시키며 확인해보면 wolrd 클래스의 div 기준으로 속성값들이 적용되는 것 같습니다. world 바깥에 universe라는 div로 한번 더 감싸도 wolrd 기준으로 카드들이 움직이는데 이에 대해 좀 설명 부탁드려도 될까요?

답변 2

0

정세연님의 프로필 이미지
정세연
질문자

넵 말씀해주신대로 가운데 정렬은 이해했습니다. 감사합니다.

다만 position-absolute 일 때 left와 top등의 속성이 어느 엘리먼트를 기준으로 하는지가 궁금합니다 ㅜㅜ

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

.world 안의 카드를 가운데로 정렬하는 것은 position 속성을 이용한 것이 아니라 flex를 이용했기 때문입니다^^
.world의 CSS에서
justify-content: center;
align-items: center;
이 두가지가 정렬을 담당하는데요, 그 부분의 값을 flex-start, flex-end 등으로 바꾸어보시면 확인해보실 수 있답니다.