uiux 21일차

"css 라이브러리"_
:라이브러리에서 불러와서 쓰는 것

 

<부트스트랩5>

<button class="btn btn-primary btn-xs">버튼</button>

primary:기본
xs:사이즈

 

<데이지 ui>
코드를 불러와서 쓸 수 있다
만들고 싶은 html 쓸 수 있음(아코디언,메뉴 등등..)
단점:수정이 어려움, 커스텀이나 스타일 바꾸기가 살짝 힘들다

<테일윈드>
script 필요
css 같은 것을 클래스를 달면 알아서 디자인 해줌
노멀라이징 되어 있음
html에 클래스를 달아서 css처럼 만들 수 있음
차트시트 보면서 원하는 스타일 넣을 수 있음
일회성이기 때문에 하나 더 만들고 싶으면 복사해야함
데이지와 호환성이 좋음
단점:html 보기 어려움 코드가 너무 복잡

<div class="border-8 border-blue-500 w-32 h-32 bg-green-200 mb-10></div>

---

테일윈드
jit모드

<div class="w-32 h-32 bg-red-500"></div> //기본
<div class="w-[100px] h-[100px] bg-blue-500 mt-[10px]"></div> //JIT모드

대괄호 안에 넣어서 더 자세하게 커스텀 가능 확장가능
(ex. w-32는 8rem 128px 정도
bg-red-500 <-이 숫자의 의미는 값이 커질수록 진해짐)

css없이 메뉴아이템 만들기

<nav class="menu-box-1 flex justify-center">
  <ul class="flex p-[0_20px]  rounded-[10px] bg-[#c7c7c7] border-blue-500">
    <li><a class="block p-[10px_20px] hover:bg-black hover:text-white" href="">1차 메뉴 아이템</a></li>
   
    
  </ul>
</nav>

---

<2차 메뉴 아이템 만들기>

 <li class="group relative">
      <a class="block p-[10px_20px] hover:bg-black hover:text-white" href="#">1차 메뉴 아이템</a>
      <ul class="hidden group-hover:block absolute top-[100%] left-0 bg-[#c7c7c7] w-full">
        <li>
          <a class="block text-center py-[10px] hover:bg-black hover:text-white" href="#">2차 메뉴 아이템</a>
        </li>
      </ul>
    </li>

hover 해서 나타나게 할려면 위에 있는 li를 group로 묶는다
relative를 줘야 2차 메뉴가 나타남
w-full width 100%와 똑같
py:padding Y축

---

<반응형>
<grid 쓰기>

 <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-[20px]">
    <li>
      <a href="#">
        <img class="aspect-[300/200] object-cover" src="https://picsum.photos/id/237/752/442" alt="">
      </a>
    </li>

이미지 비율이 안맞을때
aspect-[300/200]
로 너비와 높이를 정하고
object-cover 사진이 찌그러지는 걸 방지한다

---

사진을 눌렀을 때 커지고 배경화면 바뀌고 텍스트 나오는..
css 참고
(윈드테일 x)
https://codepen.io/atmfacwp-the-bashful/pen/mybrdPB

---

inset-0
: top: 0px;
right: 0px;
bottom: 0px;
left: 0px;

before:transition before:duration-200
윈드테일은 일회성이기 때문에 bofore를 하나씩 다 넣어야 함
애니메이션이 완성되는데 걸리는 시간 설정(-200:200ms)

<div class="group">
<a href="#" class="img-box  block relative before:absolute before:content-[''] before:inset-0 
before:bg-[rgba(0,0,0,0.3)] hover:before:bg-[rgba(0,0,0,0.5)] before:transition before:duration-200 
overflow-hidden after:absolute after:content-['VIEW_MORE'] after:top-[50%] after:left-[50%] 
after:translate-x-[-50%] after:translate-y-[50%] after:text-white after:border after:p-2 
after:rounded-[10px] after:opacity-0 hover:after:opacity-100 after:transition after:duraction">
  <img  class="relative group-hover:scale-125 -z-10 
  transition duration " src="https://picsum.photos/id/231/500/500" alt="">
  </div>
</a>

너무 길어서 enter 누름
원래는 한 줄 식