CSS - Transition+Transform 응용

코드 분석

① body

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    /* 폰트 및 백업폰트 구성 */
    display: flex;
    /* 디스플레이 모드 : flex */
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* 요소가 화면 정중앙에 오도록 아이템 설정 */
    background-color: #151b29;
}

② button

button {
    padding: 1em 2em;
    /* 부모 요소로부터 상/하단 1em, 좌/우 1em 측정 */
    border: 2px solid orange;
    color: orange;
    background: none;
    font-size: 1em;
    transition: border-color 0.3s, transform 0.3s, color 0.3s, box-shadow 0.3s;
   /* 전환 효과 지정 
   	적용해야할 속성들을 나열할 때는, 속성명과 초단위를 쌍으로 기입해야 합니다.
    테두리선 색상 0.3초 / 변형 0.3초 / 폰트색상 0.3초 / 요소 그림자 0.3초
   */ 
}

③ button:hover

/* 버튼에 커서를 갖다 놓을 시 이벤트 발생 */
button:hover {
    border-color: lightgreen;
    color: white;
    box-shadow: 0 0.5em 0.5em -0.4em lightgreen;
    /* 요소 그림자: offset-x, offset-y, 선명도, 확산범위, 색상 */
    transform: translateY(-5px);
    /* 변형 효과: y축으로 -5px 이동 (음수는 위, 정수는 아래입니다)*/
    cursor: pointer;
    /* 마우스 포인터 효과 */
}