본문 바로가기

전체 글228

2021-08-12 (122일차)wiken글작성1, 포폴컨펌, imageloaded적용, svg path애니메이션 - wiken.io 블로그 글 작성 ㄴ 유즈툴컴퍼니 부분모작 작업 1, 상단메뉴 https://wiken.io/ken/55' WIKEN | Ken 55 wiken.io - 포트폴리오 사이트 선생님께 컨펌 ㄴ 이미지 변경하기 - 일룸 개인 포트폴리오 사이트 imageloaded 적용하기 - svg파일로 path애니메이션 적용하는 방법 일러스트파일을 svg로 저장 codepen으로 열어 path 태그 안의 d= " 요기 " 부분에 넣어주기 console창에 나오는 숫자 (소수점제외)를 css의 stroke-dasharray에 넣어주기 2021. 8. 13.
2021-08-11 (121일차) 포트폴리오 작업 중 - wiken.io로 블로그 글 작성하는 방법 - 포트폴리오 사이트 제작 중 2021. 8. 13.
2021-08-10 (120일차) 취업특강 취업특강 ㄴ 자소서 작성방법 ㄴ 이력서 작성방법 ㄴ 지원방법 2021. 8. 12.
2021-08-09 (119일차) scroll-behavior, wiken.io 사용법 wiken.io 사용법 웹기초 169강 (id를 이용한 앵커 이동, scroll-behavior) - scroll-behavior : smooth; : id를 이용한 앵커 이동을 할 때, 바로 이동이 아닌! 스크롤 이동을 하게 해준다. ※ id 는 한 가지만 지정해서 쓸 수 있는 이름이다. (동일시한 id는 존재할 수 없다.) ㄴ 중복될 수 없고, 단 하나만 존재해야 한다. - wiken.io 요점정리 1개 작성 ㄴ block과 inline-block의 차이점 2021. 8. 9.
2021-08-08 (118일차)포트폴리오 구상, 필기 정보 자료 조사 - 포트폴리오 웹사이트 구상 - 웹디자인기능사 자격증 실기시험에 대해 알아보기 2021. 8. 9.
2021-08-07 (117일차)포트폴리오 구상 중 - 포트폴리오 웹사이트 디자인 구상 컨셉을 어떻게 할지? 원페이지? 다수페이지? 섹션을 어떻게 구별할지? 2021. 8. 9.
2021-08-06 (116일차) imagesLoaded(), nicescrollbar php ssg개념 51강 (복습내용) GSAP 24강 (복습내용) 자바스크립트 90강~93강 (imagesLoaded)(niceScroll) - 웹 그라디언트 사이트 https://webgradients.com/ Free Gradients Collection by itmeo.com Free collection of 180 background gradients that you can use as content backdrops in any part of your website. webgradients.com - ?.imagesLoaded( ) : ?의 이미지가 전부 로딩이 되면 ( )하라. ex) $('body').imagesLoaded(function() { Example__init(); }); → bo.. 2021. 8. 9.
2021-08-05 (115일차) fullpage, gsap FullPage 10강~15강 GSAP와 스크롤트리거 21강 ~ 23강 FullPage - 탑바의 네비에 현재 페이지 표시되게 하는 방법 data-menuanchor 넣어주기 GSAP - 이미지가 중간에 교체되게 하는 방법 2021. 8. 6.
2021-08-04 (114일차) fullpage FullPage 6강~9강 웹디자인기능사 1~7강 fullpage - continuousVertical : true : 페이지가 끝나지 않고, 반복되게 하는 방법 - navigation : ture : 페이지의 현재위치를 알려줌 (인디케이터) - navigationPosition : navigation의 위치를 지정할 수 있음 (left, right) - data-tooltip"페이지 번호" : navigation에 hover했을 때, 해당 "페이지 번호"를 알려줌 ㄴ 예외) html section 속성에 적어야 함!! - showActiveTooltip : true : 해당 페이지의 "페이지번호"를 navigation에 나타냄 - responsiveWidth : ? : ?px 이상에서만 fullpage.. 2021. 8. 5.
2021-08-03 (113일차)tailwind 최신기능, rangeFixed, 이미지 스크롤 따라가기(반응형) FullPage 3강~5강 GSAP와 스크롤트리거 17강 ~ 20강 - fullpage 셋팅방법 - html fullpage.min.js 가져오기 fullpage.css 가져오기 #fullpage로 전체를 감싸기 section으로 페이지 구분하고 무조건 section이라는 class 넣어주기 - javascript new fullpage ('#fullpage', {~~~}); - fullpage에서 해당링크로 이동하는 방법 ★ javascript에서 anchor 사용 ※ fullpage에서는 스크롤바가 생기지 않는다. (scrollBar:false가 적용되어있기 때문) ㄴ scrollBar:true 넣어주기 - rangeFixed 활용예제 1) 반응형 만들기 ?px이상에서만 사진과 텍스트가 좌우로 배치 .. 2021. 8. 4.
2021-08-02 (112일차)tailwind 최신기능(tailwind jit), rangeFixed, 이미지 스크롤 따라가기 tailwind(최신기능) 1강~8강 GSAP와 스크롤트리거 13강 ~ 16강 - tailwind 가장 인기가 많은 라이브러리 부트스트랩보다 장점이 많은편 단위를 세밀하게 조정할 수 없음 (ex) 너비, 높이 등 - tailwind의 최신기능 단위의 세밀한 조정이 가능해짐 ex) w-[100px], h-[580px], bg-[#afafaf] ex) md:w-[500px] → md가 됐을 때, 너비가 500px이 되게 하라. ex) md:hover:w-[800px] → md가 됐을 때, hover을 하면, 너비가 800px이 되게 하라. - tailwind만을 사용하여 2차메뉴 만들기 ★ group 사용 ※ 흔히 하는 실수 : ul에 hover했을 때가 아니다!! (ul은 평소.. 2021. 8. 3.
자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6) 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6) variable은 변수값 변경 가능하다. (읽기, 쓰기) constant는 변수값 변경이 불가능하다. (읽기) ㄴ 변수의 값이 변경될 예정이 없다면 const 사용 어렵다.. 시간 날 때 다시 보기,, 2021. 8. 2.