본문 바로가기

Widely Design 바로가기

💚 UIUX 웹퍼블리셔 과정(6개월)175

2021-06-30 (79일차) 슬라이더 텍스트 애니메이션, 슬라이더 버튼 스와이퍼 14강~18강 - 슬라이더 텍스트 애니메이션 (보통 아이템이 하나인 경우 사용) 1 - 글씨를 태그로 한 번 더 묶어주기 2 - 묶어준 태그 > opacity 0.5 , translateY(-100%) , transition 1s 3 - 슬라이드. 슬라이드 active가 들어갔을 때 묶어준 태그에 값 > opacity 1 , translateY(0) ※ 스와이퍼 슬라이드에는 실행이 될 때 swiper-slide-active 라는 클래스가 적용되게 설정되어 있음 ! - 이미지 슬라이더 ( 방향키 버튼을 새롭게 고치고, 슬라이더 밖으로 내보내기 ) ※ 이미지는 부모의 너비는 따라가지만, 높이는 따라가지 않기에 직접적으로 값을 부여해야 한다. - 이미지 슬라이더 ( 슬라이더 이미지가 천천히 축소되는 .. 2021. 7. 2.

2021-06-29 (78일차) 슬라이드 방향키 변경 방법, 추가 방법 스와이퍼 11강~13강 - 슬라이드 네비버튼(방향키) 색상 변경 방법 : icon으로 되어 있기 때문에 그냥 color로 지정해주면 됨 - 슬라이드 네비버튼(방향키) 크기 변경 방법 - 슬라이드 네비버튼(방향키) 텍스트로 하나 더 만드는 방법 : 버튼을 복제 > 클래스 변경 > 안에 텍스트 넣기 → 생성은 되지만, 작동 안 됨(자바스크립트에 명령 전이기에) → 자바스크립트에 방향키 클래스 추가해주기 2021. 6. 30.

2021-06-28 (77일차) 스와이퍼 사용방법, 스와이퍼 슬라이드, 스와이퍼 방향키 옮기기 스와이퍼 5~10강 - 한 화면에 슬라이드 3개 넣는 방법 스와이퍼 사이트 접속 > Demo > Slides per view > Open in new window 클릭 > 필요한 소스코드 부분 복제 자바스크립트에 붙여넣기 - 슬라이드 간의 여백을 띄우는 방법 스와이퍼 사이트 접속 > Demo > Space between > Open in new window 클릭 > 필요한 소스코드 부분 복제 자바스크립트에 붙여넣기 - 슬라이드를 무한반복하는 방법 자바스크립트에 loop : true 추가 : swiper의 방향키 기본값 absolute, top-50% 으로 인해 위치하는 것 ㄴ 버튼에 top :auto; bottom:0;값을 주기 ㄴ.. 2021. 6. 30.

2021-06-27 (76일차) - 탭 메뉴 강의 돌려보기 - 탭메뉴 구현 - toggleAction대해 공부 - toggleAction요점정리하기 ㄴ 74일차에 추가했음 2021. 6. 28.

2021-06-26 (75일차)조별과제 파워포인트, 피그마 공부 - 일룸 앱 기획 파워포인트 제작 (조별과제) - 피그마 애니메이션에 대해 공부 - 피그마 컴포넌트에 대해 공부 2021. 6. 27.

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.

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.

이전 1 ··· 6 7 8 9 10 11 12 ··· 15 다음

티스토리툴바