uiux 23일차

<grid를 이용한 반응형 상품 리스트>

 <ul class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
            <li><a href="#"><img src="https://picsum.photos/id/1/300/300" alt=""></a></li>
            <li><a href="#"><img src="https://picsum.photos/id/2/300/300" alt=""></a></li>
            '''

크기가 sm 일 때 grid-cols-2(사진이 2개)...
동일한 여백을 주고 싶을땐 gap 쓰기

---

check box

https://codepen.io/hjyee/pen/LYodLEa?editors=1000

원하는 박스로 커스텀하고
기존에 있는 체크박스를 약간 노멀라이징 하는 느낌으로 처리하고
체크박스 안에 들어갈 것을 가운데에 놓여지도록 하고

.custom_checkbox_1 > input[type="checkbox"]:checked + span::after {
    content: "v";
}

.custom_checkbox_1 > input[type="checkbox"]:focus + span::after {
    border: 1px dotted red;
}

content 안에 기호같은 것도 넣을 수 있고 점선도 넣을 수 있다

---

<폰트어썸으로 아이콘 넣기>

-html에 넣는 방법
폰트어썸 불러와야함

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-hippo"></i>

아이콘은 i

-css에 넣는 방법

div > span::after {
    font-family: "Font Awesome 6 Free";
    content: "\f007";
    font-weight: 900;
}

div:hover > span::after {
    content: "\f118";
}

content 번호로 구분, 폰트어썸에 나와있음

---

attr은 속성값(style..)이나 정보를 조회하거나 세팅
prop은 실제적인 상태(활성화,체크 선택여부 등)를 제어