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

assd_4567

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 03(더블 보더 레디어스 애니메이션)

애니메이션 실전 퍼블리싱 part 1 02(사각형 좌표변경 로딩 애니메이션)질문합니다

해결된 질문

작성

278

질문1

display: flex;

justify-content: center;

align-items: center;

height: 100vh

가 뭔지 잘 모르겠어요..ㅠㅠ

질문2

강의를 보면서 계속 확인했는데 완성본이랑 움직임이 다릅니다..

이 부분에 붙지 않고이런 식으로 이동합니다.

제가 빼먹은 부분이 있는 것같은데 잘 안보여서 같이 질문드려요ㅠㅠ

좋은 강의 만들어주셔서 감사합니다.

좋은 주말 보내세요

HTML/CSS jquery

답변 1

코딩웍스(Coding Works)

지식공유자

질문1에 대한 답변)

플렉스(Flex)로 자식요소를 수직중앙 수평중앙 위치시키는 구문입니다. 아래 구문과 정확히 동일한 기능을 한다고 생각하시면 됩니다. 플렉스를 나중에 공부하시게 되면 너무 당연하고 쉬운 구문입니다. 지금은 상식 삼아 그냥 외워서 치세요. 아니면 아래의 포지션 구문을 사용하셔도 됩니다.

body 바로 밑의 자식요소가 .container라고 가정할 때

.container {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

질문2에 대한 답변)

75% 구간에 코드 오류가 있습니다.

top: calc(100% - 10px;) 이렇게 되어 있는데 top: calc(100% - 10px);

다는 괄호와 세미콜론 위치가 바뀌었습니다.

assd_4567