[실무팁]

밑줄 애니메이션 코드 보러가기 마우스 호버시 따라오는 밑줄 효과의 html, css, js 코드이다. 응용하여 다양한 메뉴바에 적용시킬 수 있다.

우선 GCSBIO 사이트링크 는 다음과 같다.(https://www.gcsbio.com/eng/main/main.asp)링크를 통해 보면 GCSBIO 사이트의 상단바는 마우스를 호버시 2차메뉴가 아래로 나오는 형태이고, 1차 메뉴에 호버시 각각 움직이는 밑줄

currentcolor를 입력하면 body에 설정한 컬러를 자식이 상속받는다.코드가 복잡해졌을 때, 부모 컬러면 바꾸면 되서 간편하다.다음은 간단한 구현 예시이다.보다시피 div에 currentcolor를 적용했더니 부모 컬러를 상속 받았다.정리된 코드 보러가기

제주 맥주 사이트 보러가기제주 맥주 상단 바 구현하기정리된 코드 코드펜으로 한 눈에 보기

우선 테일윈드 css링크를 가져와야한다. 링크는 가장 중요한 순서로 연결해야한다. 제이쿼리 > 테일윈드 > 다른 링크들순서를 제대로 연결하지 않으면 오류가 날 수 있으니, 꼭 중요순서를 확인하구 순서대로 연결하자.코드펜으로 정리된 코드 한번에 보러가기

👀 테일윈드 반응형 브레이크 포인트 링크👀 코드펜으로 완성된 코드 보러가기

✅ / span 한테는 클릭이벤트가 적용되지 않는다 /✅ / checked를 통해 span 태그가 먹히고 , 커스텀 할 수 있다.focus 하면 기능 실행 /💨 코드펜으로 완성된 코드 한번에 보러가기

CODEPEN - 폰트어썸CODEPENhtml codecss code

아코디언 메뉴에 상태 추가하는 법코드펜으로 완성된 코드 한번에 보러가기

CODEPEN - 1부CODEPEN - 2부CODEPEN - 3부CODEPEN - 4부

로그인시 비밀번호 유출 방지를 위해 비밀번호 숨김/보임 모드가 있는데이를 코드로 하면 이렇다. attr : attribute의 줄임말 ,prev :css에서는 형을 불러오지 못하지만, js에서는 형을 불러올 수 있음. this.prev this (mode)의 prev(

gsabwowjsaos cdn, js 소스 가져오면 됨코드펜으로 완성된 코드 한번에 보러가기

코드펜으로 정리된 코드 한번에 보기

@keyframes 중간 애니메이션 지정할 수 있다.animation-timing-function : linear; 애니메이션 속도 비슷하게 적용 코드펜으로 완성된 코드 한번에 보러가기

aos 뜻 Animate On Scroll LibraryAOShtml script 순 : 유명한순 (제이쿼리 > 이미지로디드 > aos css, aos js) 나열하기\- codepen 으로 정리된 코드 한번에 보러가기

\- codepen으로 정리된 코드 한번에 보러가기

codepen으로 정리된 코드 한번에 보기

업로드중..

htmlcssjscodepen으로 정리된 코드 한번에 보기

codepen으로 정리된 코드 보러가기

codepen으로 정리된 코드 보러가기

\- codepen으로 정리된 코드 한번에 보러가기

htmlcss

\- 코드펜으로 정리된 코드 보러가기

HTML code 보기 > CSS code 보기 > JS code 보기 >JS var swiper = new Swiper(".mySwiper", { pagination: { el: ".swiper-pagination",