닭발에서 개발까지

background: linear-gradient (90deg, rgba(43,232,168,1) 0%, rgba(14,209,229,1) 100%) div{ width: 250px; height:300px; border-radius: 10px; background: linear-gradient(90deg, rgba(43,232,168,1) 0%, rgba(14,209,229,1) 100%); margin: 0 auto; margin-top: 250px; }

Study 2021. 5. 3. 15:41

z-index가 먹지 않을 때 z-index가 먹지 않을 때 position: relative를 줘보자 (상위부모나 자기자신에게). overflow-hidden 이 걸려있는지 확인(해당섹션에 높이값이 걸려있을 수 있음) 배경 고정시키는 법 background-attachment:fixed; 이미지 중앙 정렬 Image는 왼쪽, 오른쪽 margin을 auto로 설정하고 display: block; 으로 설정하면 된다. img {display: block; margin:0 auto; width: 50%;} swiper slider IE에서 작동하지않을 때 제작사에서 더이상 ie는 지원하지 않는다고 함 -구버전을 적용하면 작동됨. // CSS link // JavaScript ScrollTo 스크롤 앵커기능이..

Study/각종모음 및 팁 2021. 3. 15. 10:15

getBoundingClientRect().height getBoundingClientRect().width 해당 엘리먼트의 높이값과 넓이값을 구할 수 있다 예 : const navbar = document.querySelector("#hd_wrap"); //헤더를 담는 변수 naver const navbarHeight = navbar.getBoundingClientRect().height; //naver의 높이값을 담는 navberHeight document.addEventListener("scroll", () => { //scroll이 내려가면 이벤트 발생 if (window.scrollY > navbarHeight) { //만약 윈도우의 스크롤값이 navbarHeight보다 크다면 실행 navbar..

Study/JS 2021. 3. 3. 11:48

AOS - Animate on scroll library michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io GSAP greensock.com/gsap/ GSAP Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, ..

Study/JS 2021. 2. 22. 14:02

material treme -vscode 테마 컬러 세팅. Material icon theme -vscode 파일 아이콘 변경 Prettier -코드 포멧팅해줌 bracket pair colorizer 괄호에 컬러를 넣어줌 Indent-rainbow 들여쓰기 색넣어줌 Auto rename tag -html파일 안에서 태그변경시 자동으로 바꿔줌 CSS PEEK -html 안에서 css파일 위치를 따라갈 수 있다. TML CSS SUPPORT -html 안에서 css 자동완성기능 Live server -저장하면 f5누를 필요없이 바로 반영

Study/각종모음 및 팁 2021. 2. 21. 15:55

기존 탭모습 일정 넓이로 줄어들면 이렇게 변한다 클릭시 참고 dico.me/java-script/articles/242/ko html First Second Third Fourth First tab content Second tab content First Second Third Fourth 2Depth First tab content 2Depth Second tab content 2Depth Third tab content 2Depth Fourth tab content Third tab content First Second Third Fourth 2Depth First tab content 2Depth Second tab content 2Depth Third tab content 2Depth Fourt..

Study/JS 2021. 2. 19. 14:45

파일변환 사이트 cloudconvert.com/ CloudConvert Compress Merge Capture Website Create Archive Extract Archive Convert +200 Formats Supported CloudConvert is your Swiss army knife for file conversions. We support nearly all audio, video, document, ebook, archive, image, spreadsheet, and presentation form cloudconvert.com 웹폰트 오류사이트 lucy7599.tistory.com/1120 구글 웹 폰트 저장을 통해 IE에서도 동일한 폰트로 보여주기-티스토리 블로그 스킨을 티..

카테고리 없음 2021. 2. 19. 11:57