CSS 스타일링

box-shadow : x y 분산 흐림 컬러;
사용예)
box-shadow : 0 0 20px 30px rgba(0, 0, 0, 0.1);

x축 이동 없음, y축 이동 없음, 20px 만큼 흐림, 30px 만큼 그림자 확장, 검정색 10% 투명도

동서식품 실제사이트도 버그가 많음을 알고
포토폴리오도 적절하게 작업하고 넘어가는게 좋다.


애니메이션의 경우 포지션을 사용을 많이 한다.
1. margin 2. padding 3. position 4. translate
사용예)
animation: con_ani 10s infinite alternate linear;

keyframes con_ani
{
0%{
left: 0;
}
100%{
left: -50%;
}
}
keyframes con_ani_2
{
0%{
left: -50%;
}
100%{
left: 0;
}
}
포지션을 주면 별도로 좌표가 있어 높이를 줘야한다.
둘중에 정렬의 기준이 있어 둘다 차이를 준다.

hover시 animation-play-state : paused;
마우스를 올릴때 애니메니션을 멈추거나 재생을 제어함