디버깅, 아이콘, 애니메이션

[CSS 디버깅]

ㅇ 우클릭>검사>마법봉(개발자도구)

ㅇ 인터넷 익스플로러 낮은 버전에서 안보이는 css 기능들에 대한 호환성 잡기
IE를 위한 CSS 파일 만들면 됨

ㅇ 조건문 추가해주기

<!--[if lt IE 9]>
  <link href="css/ie.css" type="text/css" 
    rel="stylesheet"/>
  <![endif]-->

[아이콘 넣기]
1. cdn 방식: 구글검색>fontawesome 5 cdnjs 다운로드> 홈피에서 all.min.css 복사
2. fontawesome 홈피에서 직접 다운
--> 상대경로로 저장
--> 원하는 아이콘 검색 후 tag 복붙

<i class="fa-solid fa-cart-shopping" fa-3x"></i> 

--> fa-3x; 아이콘 크기 조정 가능

[아이콘으로 원 만들기, 배경색 넣기]

.product-container i { <-- ~안에 있는 모든 i는..
    background-color: burlywood;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    padding-top: 25px;
    box-sizing: border-box;
    color: white;
    margin-top: 20px;
}

[배경 그라데이션 주기]

background-image: linear-gradient(to bottom, #499add, #4e61c0);

[Transition 속성을 통한 애니메이션]
1. one-way 애니메이션 만드는 절차
(1) 시작스타일 만들기
(2) 최종스타일 만들기
(3) 언제 최종스타일로 변하는지
(4) transition으로 애니메이션

<div class="shop-bg">
        <div class="shop-container">
            <div class="shop-item">
                <div style="position: relative">
                    <div class="overlay"></div>
                    <img src="img2/shoes1.jpg">
                </div>
            </div>
            <div class="shop-item">
                <img src="img2/shoes2.jpg">
            </div>
            <div class="shop-item">
                <img src="img2/shoes3.jpg">
            </div>
        </div>

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0; <--시작 스타일
    transition: all 1s; <--변화를 1초에 걸쳐 서서히 주기
}

.overlay:hover {
    opacity: 1; <--최종스타일
}