ponyo118 님의 블로그

관련 링크cdnjs구글폰트눈누폰트부트스트랩 - 공식문서데이지UI 컴포넌트 - 공식문서테일윈드 - 공식문서테일윈드 - 치트시트테일윈드 - 치트시트테일윈드, 데이지UI - 코드펜폰트어썸 - 아이콘폰트어썸 - 아이콘, 모든 카테고리폰트어썸 - 아이콘, 모든 무료아이콘폰트어썸 - 코드펜 🏷️ 챕터 1 : 부트스트랩, 테일윈드 비교1강부트스트랩 5부트스트랩 - 공식문서CODEPEN - 부트스트랩 5데이지 UI데이지UI 컴포넌트 - 공식문서CODEPEN - 테일윈드, 데이지UI테일윈드 3테일윈드 - 공식문서테일윈드 - 치트시트테일윈드 - 치트시트CODEPEN - 테일윈드 3동영상2603, CSS 라이브러리, 테일윈드, 챕터 1, 부트스트랩, 데이지 UI, 테일윈드 비교 🏷️ 챕터 2 : 테일윈드 JIT2강테일윈..

SASS/SCSSSASS 공식 가이드Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어입니다.1강SASS - PlaygroundSASS/SCSS 쓰는 이유CSS는 웹페이지의 스타일을 정의하는 데 매우 유용하지만, 프로젝트 규모가 커지고 구조가 복잡해질수록 코드의 중복이 많아지고 관리가 어려워지는 문제가 발생합니다.SASS는 이러한 문제를 해결하기 위해 고안된 CSS 전처리기로, 더 나은 구조화, 재사용성, 가독성을 제공하여 유지보수를 용이하게 합니다.SASS/SCSS는 CSS를 대체하기 위한 언어..

1강BEM CSS 명명법BEM 공식문서CODEPENBEM(Block Element Modifier) 명명법의 특징구성 요소Block: 독립적으로 의미를 갖는 단위 컴포넌트예: header, menu, button, form 등→ 예: .button, .nav, .cardElement: Block 내부의 구성요소. Block 없이는 의미 없음예: menu__item, form__label, card__title→ 예: .button__icon, .card__contentModifier: Block이나 Element의 상태나 변형된 스타일을 표현예: button--large, card__title--highlighted→ 예: .button--active, .card__content--dark장점명확한 구조..

관련 링크GIT 다운로드 - winStandalone Installer : 64-bit Git for Windows Setup.GIT 다운로드 - mac터미널 열고 brew install git코딩애플 - GIT 다운로드 win/macGITHUB새로운 리포지터리GIT 인터랙티브 튜토리얼 강사 리포지터리 주소리포지터리 - uiux_ex_2603깃 기본 명령어# 최초 한번만 등록git init git config --global user.email "깃헙 이메일"git config --global user.name "깃헙 이름"git commit -m "커밋 메세지"# 최초 한번만 등록git remote add origin "저장소 주소"git push -u origin main# 브런치 master에서 m..

가장 초기에 해야하는것git init브런치 master에서 main으로 변경git branch -M maingit config --global init.defaultBranch main사용자 설정(컴퓨터를 포맷하기 전까지는 안해도 됨)git config --global user.name ""git config --global user.email ""--global을 안붙이면 프로젝트마다 사용자 설정을 해야함.사용자 확인git config user.namegit config user.email깃 명령어 정리clear / Ctrl + L프로젝트를 만들 때 마다 해야하는 것프로젝트 깃 연결초기화git init깃 저장소 연결git remote add origin 깃_주소깃 저장소 삭제git remote remo..

27강 - 스크롤바 overlayCODEPEN[html][Lorem*20][css]/* 스크롤바 꾸미기 시작 */ :root { overflow-y:overlay; } ::-webkit-scrollbar-thumb { background-color: rgba(255, 0, 0, .5); border-radius: 10px; cursor:pointer; } ::-webkit-scrollbar { width: 40px; height: 40px; background-color: rgba(255, 0, 0, .1); } /* 스크롤바 꾸미기 끝 */[js]동영상2603, HTML, CSS, JS 활용, 스크롤바 overlay 28강 - 텍스트에 외곽선 효과MDN..

24강 - 스크롤트리거로 탑바 배경색이 섹션의 배경색에 맞게 자동변환gsaphttps://unpkg.co/gsap@3/dist/gsap.min.jshttps://unpkg.com/gsap@3/dist/ScrollTrigger.min.jsgsap.registerPlugin(ScrollTrigger);[html] 헤더입니다. 섹션 1 섹션 2 섹션 3 섹션 4 섹션 5 섹션 6 섹션 7 섹션 8 섹션 9 섹션 10 [css]body { margin: 0; padding: 0; box-sizing: border-box; } .top-bar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; bord..

20강 - 멀티 숫자 카운터, 제이쿼리 eachMDN - 삼항연산자parse(바꾸다)Int(정수) -> 정수로 바꾸겠다.CODEPEN - 1부CODEPEN - 2부CODEPEN - 3부https://codepen.io/phyno118/pen/ZYpLxmw [html] - 10 + - 10 + - 10 + - 10 + [css]body { margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .box-count { border: 10px solid black; padding: 20px; font-..

15강 - 특정 구간에서 스크롤시, 횡으로 이동하는 효과gsapgsap - codepenCODEPEN - 1부CODEPEN - 2부CODEPEN - 3부 [html] 섹션1 섹션2 섹션3 섹션4 섹션5 섹션6 섹션7 섹션8 섹션9 섹션10 섹션11 섹션12 섹션13 섹션14 섹션15 섹션16 섹션17 섹션18 섹션19 섹션20 섹션21 섹션22 섹션23 섹션24 섹션25 [css]html, body { overflow-x: hidden; } /* body { -ms-overflow-style: non..

11강 - 로딩화면 구현해야 하는 이유와, AOS, imagesLoaded, imgur, Image DownloaderAOSanimate css이미지가 필요할 때 - Lorem picsumImage Downloader이미지 호스팅 - imgurCDN - imagesloadedhttps://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.jsCODEPEN - 1부[html] https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> https://picsum.photos/500/2300" alt=""> FADE https://picsum...