튀어나오는 레이아웃 구현(css, position, transform)

오늘은 간단하게 튀어나오는 레이아웃을 구현해보도록 하겠습니다.

 

간단하게 결과는 다음과 같이 나옵니다.

 

 

 

먼저 저는  마크업을 다음과 같이 진행하였습니다. 

header 바로 옆에 div 태그를 만든 후에 id가 root인 컨테이너에 position: relative를 적용하였습니다 (position:absolute를 사용하기 위해서)

 

그리고 header 옆의 div에 다음과 같이 작성해주었습니다.

animation은 transform을 적용하여 translateX로 x좌표를 이동하도록 구현하였습니다.

이렇게하면 390px에서 0만큼 이동하게 됩니다.

export const InfoMenu = styled.div`
	z-index: 1000;
	background-color: #f6f8fa;
	border: 1px solid #e9e9e9;
	position: absolute;
	right: 0;
	width: 360px;
	top: 80px;
	animation: ${infoKeyframes} 1s forwards;
`;


const infoKeyframes = keyframes`
	0% {
		transform: translateX(390px);
	}

	100% {
		transform: translateX(0);
	}
`;