728x90 > 클론코딩/분석 및 활용7 [리액트] Font Awesome 라이브러리 사용하기 Font Awesome 라이브러리 사용npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core해당 코드를 npm 에 입력해주기import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";리액트에서 사용할 아이콘을 import 해서 사용주의할 점import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { .. 2024. 9. 7. [CSS] 페이지 제작하기 이런 페이지 만들기.간단하게 3페이지 정도 만들 예정.코드에서 이미지 태그 없이 화살표 아이콘을 사용한 것은 Font Awesome 같은 아이콘 폰트나,CSS ::before 의사 클래스와 함께 사용된 CSS content 속성을 통해 이미지를 대체한 방식참고할 글 >>after, before 부분 알아보기 - 글 하단[CSS] Draw Underline Link Hover Effect (tistory.com) [CSS] Draw Underline Link Hover EffectDraw Underline Link Hover Effect | CSS Menu Hover Effect (youtube.com)아래에 선 맞춰줌.HTML Home Services Contact About CSS*,*:before,.. 2024. 9. 6. [CSS] Draw Underline Link Hover Effect Draw Underline Link Hover Effect | CSS Menu Hover Effect (youtube.com)아래에 선 맞춰줌.HTML Home Services Contact About CSS*,*:before,*:after { padding: 0; margin: 0; box-sizing: border-box;}body { background-color: pink;}nav { height: 100vh; width: 70vw; min-width: 600px; display: flex; align-items: center; justify-content: space-around; margin: auto;}a { p.. 2024. 8. 5. html css 부드럽게 흐르는 슬라이드 만들기 참고사이트transition-timing-function - CSS: Cascading Style Sheets | MDN (mozilla.org) transition-timing-function - CSS: Cascading Style Sheets | MDNThe transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.developer.mozilla.org.swiper-wrapper { transition-timing-function: linear !important; } transition-timing-fun.. 2024. 7. 30. [CSS] Play and Pause in Infinite Slider with CSS Only (2) Play and Pause in Infinite Slider with CSS Only (youtube.com).slider { width: 100%; border: 1px solid red; height: var(--height); overflow: hidden;}.slider .list { display: flex; width: 100%; min-width: calc(var(--width) * var(--quantity)); position: relative;}.slider .list .item { width: var(--width); height: var(--height); position: absolute; left: 100%; animation: autoRun 10s lin.. 2024. 7. 24. [CSS] Play and Pause in Infinite Slider with CSS Only (1) Play and Pause in Infinite Slider with CSS Only (youtube.com)HTML .. 2024. 7. 23. [CSS] How To Make An Infinite Autoplay Slider 분석과 수정 HTML CSS - 유튜브 보고 주석 단 코드. body { min-height: 100vh; /* 최소 높이를 화면 전체 높이로 설정 */ display: grid; /* 그리드 레이아웃 사용 */ place-items: center; /* 아이템을 가운데로 정렬 */}.slider { /* overflow: hidden; // 가로 스크롤 바 없애기 위해 주석 처리 */ heigh.. 2024. 7. 9. 이전 1 다음 728x90
