강의

멘토링

로드맵

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

hm_stom님의 프로필 이미지
hm_stom

작성한 질문수

CSS Flex와 Grid 제대로 익히기

Grid 활용예제 #2 - 3D 보드게임판

안녕하세요!

작성

·

251

0

body {
display: flex;
align-items: center;
justify-content: center;
transform: perspective(1000px);
/* perspective: 1000px; */
color: black;
background: #fff000;
}
위와 같이 transform 속성에 perspective를 주어도 똑같은건가요 ?
두개 같은 문법이라면 보통 어느 표현을 더 자주 사용할까요 ??
애니메이션 효과가 조금 부족한테
유튜브 영상으로만 들어도 충분할까요 아니면 다른 강의도 결제해서 듣는게 나을까요?

퀴즈

56%나 틀려요. 한번 도전해보세요!

카테고리 정렬 예제에서 JavaScript 사용 없이 CSS만으로 아이템을 카테고리별로 모아 보여주는 주요 방식은 무엇일까요?

CSS Flexbox의 order 속성을 동적으로 변경합니다.

숨겨진 라디오 버튼의 체크 상태에 따라 Grid 아이템의 위치를 CSS로 제어합니다.

CSS 애니메이션을 사용하여 아이템을 그룹별로 이동시킵니다.

미디어 쿼리를 사용하여 카테고리별 레이아웃을 분리합니다.

답변 1

0

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

perspective: 1000px은 3D 공간의 무대가 되는 부모 요소에 주고요,
transform: perspective(1000px)은 3D 효과가 적용되어야 하는 자기 자신에게 넣어줍니다.
시점에도 차이가 있는데요, 아래 그림을 보시면 쉽게 이해하실 수 있을거에요~

이 수업은 CSS 레이아웃이 주제인 수업이라 인터랙션 부분은 비중이 적은데요, 제 다른 수업들을 살펴보시면 각각 수업마다 공부하는 것들이 소개 페이지에 자세히 설명이 되어있으니 한번 살펴보세요^^

hm_stom님의 프로필 이미지
hm_stom

작성한 질문수

질문하기