본문 바로가기

분류 전체보기228

2021-06-25 (74일차) 탭메뉴(data-tb),scrollTrigger, toggleActions, onEnter, onLeave, onEnterBack, and onLeaveBack 자바스크립트 80~81강 GSAP와 스크롤트리거 7강~10강 원리 : 1대1로 그룹을 지어줘야 한다. data-tb 사용 '클래스이름_ _숫자_ _head' 와 '클래스이름_ _숫자_ _ body'가 연결되는 원리 head 클릭시 연결된 body에 .tb-active가 들어감 평소에는 _ _ body가 들어가는 클래스를 숨겨주다가 클릭이 되며 .tb-active가 들어가면 보여줌 - scrollTrigger : '대상 ' : trigger '대상'이 화면에 보이면 동작 실행 scrollTrigger에 옵션을 추가하기 위해서는 대괄호를 쓰는 두 번째 방식을 사용해야 한다. - markers : true : 시야의 시작점과 끝점, trigger의 시작점과 .. 2021. 6. 26.
2021-06-24 (73일차) scrollTrigger, filter: invert css색상반전 자바스크립트 79강 GSAP와 스크롤트리거 6강 - 탭메뉴 내일 이어서 - scrollTrigger : 가리키는 상이 스크롤을 내려서 발견되면 애니메이션이 실행되게 명령 css - filter: invert(100%); : 이미지와 색상을 색상반전 시켜주는 기능이다!! - html 아이콘 무료사이트 https://boxicons.com/ 2021. 6. 25.
2021-06-23 (72일차) 애니메이션 아코디언 구현, show, fadeIn, slideDown, gsap, 애니메이션 역사 자바스크립트 73강~78강 GSAP와 스크롤트리거 1강~5강 - 자바스크립트 애니메이션 방식 3가지 : 'display의 none과 block'을 사용하여 애니메이션을 주던 기존 방식을 버리고 이런 방법들이 있음 1) 태그.show(); ↔ hide : 태그의 style에 'display : block'이 삽입되는 방식 ( css의 display : none을 무시하게 됨) 2) 태그.fadeIn(시간); ↔ fadeOut : 'transition' 효과를 추가로 준 것 처럼 부드럽게 나옴 ㄴ 괄호 안에 시간을 걸을 수 있음 3) 태그.slideDown(시간); ↔ slideDown : 'transform : translateY' 효과를 추가로 준 것 처럼 위 > 아래 부드럽게 내려옴 ㄴ 괄호 안에 시간.. 2021. 6. 24.
02_Mesh Character - 굼바 만들기 Mesh Character - 굼바 만들기 1 굼바 사진 일러스트로 열기 아트보드 사이즈 수정 > size-270x210 사진 아트보드에 크게 정비례로 맞추기 2 ★★ 레이어 더블클릭 > 탬플릿 체크-dim images to 체크 해제(필요x) 새로운 레이어 생성 3 원형툴로 도형 만들기 ctrl + y 아웃라인만 보이게 하기 (굼바사진은 보여야함) 직접선택툴로 굼바 얼굴 만들기 머리쪽 중심으로 모양 만들어주기 매쉬툴 object > create gradient mash > row-3, column-3 매쉬툴로 굼바 머리형태에 맞춰주기 (선이 있는 부분은 shift누르며 드래그, 없는 부분은 그냥 드래그) 안쪽 중요한 구간에 맞춰주기(미간, 입) 색상 바뀌는 구간 매쉬 추가하기 4 선택툴로 잡고 색 넣기.. 2021. 6. 23.
2021-06-22 (71일차) 애니메이션 없는 아코디언 자바스크립트 70강~72강 - 수정보완 시험 제출, 발표 - 애니메이션 없는 방법 : display의 none과 block을 이용 ---------------------------- 애매하게 끊겨서 다음 날 공부기록에 계속 ---------------------------- ---------------------------- 애니메이션 들어가는 아코디언 ---------------------------- 2021. 6. 23.
2021-06-21 (70일차) 수정 보완 시험 LG 전자 반응형 모바일메뉴 구현 * 결과.zip 의 구성 # 결과.txt (텍스트 파일, 항목은 : to2.kr/cKd 최하단, 주관적평가, 정답란에도 복붙) - 자체평가(0점 ~ 5점) 탑바 레이아웃 : -점(10점 만점) 탑바 디자인 유사도 : -점(5점 만점) 모바일 탑바 레이아웃 : -점(10점 만점) 모바일 탑바 디자인 유사도 : -점(5점 만점) 탑바와 모바일 탑바가 미디어 쿼리로 스위치 : -점(3점 만점) 모바일 탑바에서 모바일 사이드바 버튼 클릭시 모바일 사이드바 노출 : -점(3점 만점) 모바일 사이드바 레이아웃 : -점(10점 만점) 모바일 사이드바 디자인 유사도 : -점(5점 만점) 모바일 사이드바 노출시 화면 어두워짐 : -점(3점 만점) 모바일 사이드바의.. 2021. 6. 23.
2021-06-20 (69일차) 연습 - 반응형 모바일메뉴 구현 반응형 모바일메뉴 구현 연습 2021. 6. 21.
2021-06-19 (68일차) 연습 - 반응형 모바일메뉴 구현 - 반응형 모바일 메뉴 구현 2번 만들기 2021. 6. 21.
2021-06-18 (67일차) 반응형 모바일메뉴 만들기 연습 자바스크립트 67강~69강 - BEM의 기본구조 - 반응형 모바일메뉴 만들기 2021. 6. 19.
console.log에 대하여 콘솔 로그 제대로 쓰고 있을까? 🤔 > console.log( ); 개발단계에서 보수적인 데이터를 출력하고자 할 때 사용 ㄴ 웬만하면 배포할 때는 삭제하고 배포하는 것이 좋음 (성능에 영향을 줄 수 있기 때문에) console.info( ); 특정한 정보를 출력할 때 사용 ㄴ 웬만하면 배포할 때는 삭제하고 배포하는 것이 좋음 (성능에 영향을 줄 수 있기 때문에) console.warn( ); 경보단계에서 출력하고 싶을 때 사용 console.error( ); 심각한 에러가 있는 상태에서 출력하고 싶을 때 사용 ※ log level에 따라 정확한 함수를 사용하는 것이 중요하다. console.assert( ); 특정한 값일 때만 출력하고자 할 때 사용 오브젝트를 출력하고 싶을 때 .. 2021. 6. 17.
2021-06-17 (66일차) 반응형 웹사이트 만들기 (다음 주 시험 대비) 자바스크립트 64강~66강 top-bar 평소 >>> display : none → md가 되면 → display : block mobile-top-bar 평소 >>> display : block → md가 되면 → display : none ※ md : 992px이하가 되면~ - 그라디언트배경 주는 방법 (gradient background) 2021. 6. 17.
2021-06-16 (65일차) 제이쿼리(jquery)의 본질, 자바스크립트와 제이쿼리 문법차이, 제이쿼리 장점, next, prev, mouseenter, this, dblclick parent, children, find, siblings 자바스크립트 54강~63강 - 기존에 사용하던 javascript의 문법 문제점 : css에서 일괄로 디자인을 처리하던 디자이너들이 이에 대해 불편함을 느낌 ↓ 해결방법 : 제이쿼리를 불러옴 ↓ .prev( ) : 인접 형을 가리킴 .next( ) : 인접 동생을 가리킴 .parent( ) : 부모를 가리킴 .children( ) : 자식을 가리킴 .find( ) : 후손을 가리킴 .siblings( ) : 형제을 가리킴 .mouseenter : 마우스가 닿으면 반응함 .dblclick : 더블클릭시 반응함 - 클릭하면 배경색 변경, 한 번 더 클릭시 배경색 제거 : if, else, hasClass 사용 - 클릭하면 클릭 구간의 좌우 배경색 변경 : next, pr.. 2021. 6. 17.

티스토리툴바