another problem

1. 공식홈페이지에서 다운받기 2. 다운받은 파일 중 아래 파일 나의 spring 프로젝트 경로 중 static의 css 파일에 넣어준다. ※ 스프링은 resources파일에 대한 기본경로를 static으로 하고 있다. 만약 경로를 못찾고 있다고 판단이 되면, 아래 yml에서 기본 경로를 지정해주자. # 정적리소스 경로관리 spring: web: resources: static-locations: classpath:static/ 3. 부트스트립 적용하기 https://getbootstrap.com/docs/4.6/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more wit..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

설치 실전코드 import { useState } from "react"; import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs"; import { RxDotFilled } from "react-icons/rx"; function App() { const slides = [ "https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2620&q=80", "https://images.unsplash.com/photo-1..

btn에 Tranform과 Transition을 적용하는 방법 참고 https://www.youtube.com/watch?v=0zA6GZa2ZKc&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw&index=18

Customization Config 더보기 Customization할 수 있는 config파일 이용법 1. 설치 : npx tailwindcss init --full 2. config파일에서 커스텀할 css 설정하기 3. 설정할 파일 build하기 build : npm run build-css 4. 커스텀한 css 적용하기 관련 extention : tailwind Css를 적을 때 코드 자동 생성 참고 https://www.youtube.com/watch?v=6UVQlB1eo5A&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw&index=5 도큐 https://tailwindcss.com/docs/configuration Configuration - Tailwind CSS A ..

#3.17 States (10:15) : active / hover / focus 더보기 개괄 states 1) active : 대상을 클릭하고 있는 상태 2) hover : 마우스가 대상 위에 있을때의 상태 3) focus : active와 비슷하다고 생각될 수 있는데, 키보드로 선택되었을때를 말한다 ! 4) visited : 링크에만 적요이된다 그 링크에 방문했다면 그 안에 스타일이 적용이된다 5) focus-within : focuse된 자식을 가진 부모 엘리먼트의 상태를 말한다 즉, 위의 예시에서 form은 그 자식들인 input이 focuse가 되면 form의 모습을 바꾼다는 것이다 state들을 다른 엘리먼트와 연계해서 사용할 수도 있다 1) 부모의 state에 따라 조정 form:hover ..

#3.14 Pseudo Selectors part One (08:57) 더보기 개괄 pseudo selector 1. last-child{} // 마지막 자신 선택 2. first-child{} // 첫번째 자식 선택 3.nth-child(숫자) {} // 원하는 순서의 자식 선택 4.nth-child(even,odd) {} // 짝수or홀수 자식 선택 5.nth-child(2n+1) - 선택자의 2n+1 요소 선택 - n은 0부터 대입하는 것으로 추측 도큐 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes - CSS: Cascading Style Sheets | MDN A CSS pseudo-class is a ..

#3.10 Flexbox Part One (12:08) : justify-content 더보기 개괄 1. 자식에게 명시하지 않고 부모에게 명시한다 div의 부모를 display:flex로 만든다 2. main axis=> 주축은 (수평)이 기본, justify-content는 main axis를 따라 움직임 3. cross axis=> 교차축은 (수직)이 기본, align-items는 cross axis를 따라 움직임 4. body가 height 값을 갖고있지 않으면 이미 맨 위아래를 차지하고 중심에 있으니까 align-items를 설정하더라도 바뀌지 않음. 이 때 height를 px로 해도 작동하지만, vh를 사용하면 화면 크기에 따라 바뀐다. 아이폰 맥북 아이패드에 따라 다 달라지니까 유용하다. ju..

보호되어 있는 글입니다.