[CSS] 배운 기능 정리중

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.bgImage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	animation: fadeIn 0.5s linear;
}

삽입한 배경을 최하단으로 깔리게?

 

opacity ???

 

animation : fadeIn 0.5s linear; ??? 배경화면이 지연호출?

 

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

 

:root {

    /* color */

    --color-black: #3f454d;

    --color-white: #ffffff;

    --color-blue: #3b88c3;

    --color-yellow: #fbbe28;

    --color-pink: #fd7f84;

    --color-light-grey: #dfdfdf;

 

    /* size */

    --size-button: 60px;

    --font-size: 18px;

    --size-border: 4px;

    --size-thumbnail: 60px;

    --base-space: 10px;

 

    /* animation */

    --animation-duration: 300ms;

}

/* CSS도 변수 사용 가능! ...당연한걸 나만 몰랐나? */

 

body {
	height: 100vh;
	background-color: var(--color-black);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

height: 100vh; // 100퍼

 

display: flex; // 박스? 한줄로 정렬. 기본값 row?

 

flex-direction: column; // 세로 정렬

 

justify-content: center; // 수평정렬

 

align-items: center; // 반대축 정렬

 

.logo {
	cursor: pointer;
	transition: transform var(--animation-duration) ease;
}
.logo:hover {
	transform: scale(1.1);
}

cursor: pointer; // 마우스 포인터 손모양 변경

 

transition: transform 300ms ease; // 애니메이션 주기~?

 

.logo:hover {transform: scale(1.1);} // 마우스 올렸을때 커지게 하기!

 

.items {
	width: 40%;
	height: 60%;
	list-style: none;
	padding-left: 0;
	overflow-y: scroll;
}

list-style: none; // list 동그라미 없애기

 

overflow-y: scroll; // 축에 따른 스크롤 기능!