HTML CSS 추가 기능

 

애니매이션 효과

@keyframes rotate {
100%{ //애니메이션 총시간 시간대비 퍼센트
transform: rotate(360deg); //회전(몇도)
}

.클래스명 {
    width: 100%;
    height: auto;
    animation: rotate 1.1s infinite linear; //infinite 계속돈다, linear 가속도붙지 않고 일정한 속도로 돈다.
}

 

모달창 마우스 스크롤 해도 따라오도록 하기 

#modal {
    position: fixed;
 top: 0;
    left: 0;
}

 

박스 그림자

box-shadow : offset-x, offset-y, blur-radius, spread-radius, color(0 0 0 색상정도)

box-shadow : 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

 

flex 

(IE 10, 11에서 flex를 부분 지원, 이전 버전은 지원하지 않는다.)

display:flex; //요소를 동일한 간격으로 배치
flex-direction: column //각 요소를 세로로 배치
justify-content //각 요소를 가로로 배치
align-items //세로(세로를 기준으로 정렬....)
position:relative //relative를 가지고 있는 요소를 기준으로 한다...