카드 뒤집힐 때 F가 보인 이유

안녕하세요? 강의 잘 보고 있습니다.

F, B 카드가 있고 뒤집는 거잖아요? F에 z-index를 1을 주었기 때문에 B보다 앞에 있어서 F->B 순서로 보이구요.

여기서 궁금한 것은 실물 카드로 생각을 해보았을 때, F카드 밑에 B 카드가 있는거죠.

[1번] backface-visibility: hidden을 주지 않았을 때 가드를 뒤집게 되면 B카드 밑에 F 카드가 있는게 아닌가요?

[2번] 아니면 뒤집혀진 상태에서도 F의 z-index 1로 인해서 다시 F->B 상태로 되어 있는 건가요?

제 생각은 실물 카드로 보면 뒷면이 보이더라도 B의 뒷면이 보여야 할거 같은데 F의 뒷면이 보여서 질문 드립니다.

[1]번인 경우 F의 뒷면이 보이는게 이해가 안되고,

만약 [2]번인 경우 F 카드가 B 카드보다 위에 있다는 건데 뒷면을 안보여준다고 해도 그래도 F 카드가 보여야 할 것 같아서요.

--------------------------------------------------

제가 다시 생각해봤는데요.
z-index 1이니깐 F 가 B 보다 무조건 위에 있는 건 맞으나, 실물 카드처럼 딱 붙어있는게 아니니깐 F는 위에서 돌고, B는 밑에서 돌고 F 뒷면, B 뒷면으로 있는 상태가 맞을까요?
여기서 뒷면은 안보이도록 해줬으니 B만 보이는거구요.

안녕하세요, 인프런 AI 인턴입니다.

최문혁님의 질문은 카드 뒤집기 시 backface-visibility 속성과 z-index 값의 영향에 대한 이해를 묻는 것으로 보입니다. 주어진 상황에서 backface-visibility: hidden;이 적용되지 않았을 경우와 z-index 속성이 카드 뒤집기에 어떠한 영향을 미치는지에 대한 해석이 주요 관심사입니다.

이와 관련하여 유사한 질문이 있었습니다:

firefox에서 backface-visibility: hidden; 이 이상하게 먹힙니다.에서는 Firefox 브라우저의 backface-visibility 속성 동작에 대한 이슈를 다룹니다. 질문자는 카드 뒤집기 시 글자 겹침 현상을 보고하고 있으며, 이는 backface-visibility와 관련된 브라우저 간 차이 또는 버그일 가능성을 탐색하고 있습니다.
backface-visibility: hidden;에서는 backface-visibility:hidden; 사용 전후의 변화에 대한 궁금증에 대해 논의됩니다. 이는 backface-visibility 속성이 서로 다른 브라우저나 상황에서 어떻게 작용하는지와 관련이 깊으며, 이 속성이 왜 번쩍이는 현상을 방지하는 데 중요한지에 대해 설명합니다.

답변:

backface-visibility: hidden;이 주어지지 않았을 경우, 브라우저 또는 상황에 따라 카드의 뒷면(예: F 카드 뒷면)이 보여질 수 있습니다. 이는 backface-visibility 속성을 이용해 카드가 뒤집혔을 때 보이지 않게 하기 위한 목적으로 사용됩니다.
z-index의 값에 따라서 레이어의 순서가 결정됩니다만, backface-visibility 속성은 카드의 앞면과 뒷면이 어떻게 보이느냐를 제어합니다. 따라서, 두 속성은 상호 작용하여 시각적 표현을 결정하게 됩니다. 특히, z-index는 뒤집힌 상태에서 카드의 순서를 제어하지만, backface-visibility 설정 없이는 두 면이 동시에 보일 수 있습니다.

답변이 여전히 명확하지 않거나 추가적인 설명이 필요한 경우, 해당 강의의 댓글이나 추가 질문을 통해 구체적인 답변을 얻을 수 있습니다. CSS와 관련된 동작은 브라우저 간 차이와 같은 다양한 요소에 의해 영향을 받을 수 있어, 각 속성의 작동 방식과 브라우저 호환성을 고려하는 것이 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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