본문 바로가기

Widely Design 바로가기

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

2021-08-31 (141일차)fullpage 라이브러리 사용방법 fullpage 17강 유용한 소스코드 20강 - 으로 감싸기 id="fullpage" = fullpage를 사용하기 위한 아이디 class="con-min-width" = 아래에 나올 con이 적용이 안될 시 대비하기 위한 con 보호대 - class="section" = fullpage를 사용할 때 section을 한 페이지로 구분하기 위해 사용 data-anchor="section-1" = 페이지에 위치해 있을 때 class에 active를 넣어주는 역할을 함 - 내용물을 감싸는 역할을 함 - 자바스크립트 2021. 9. 3.

2021-08-30 (140일차)웹디자인기능사 대비 - 웹디자인기능사 대비 공부 (대한은행) See the Pen 대한은행 opacity희미해지는 슬라이드로 변경해보기 by minicoding (@minicoding) on CodePen. 2021. 9. 3.

2021-08-27 (137일차) lightbox2 사용방법, 웹디자인기능사 대비 웹디자인 기능사 실기시험 대비 11강~12강 (세로메뉴) 자바스크립트와 제이쿼리 기초 103강 (lightbox2) - lightbox2 사용방법 jquery 가져오기 lightbox.min.css 가져오기 lightbox.min.js 가져오기 a태그로 이미지를 감싸기 a의 주소넣을 자리에 이미지를 넣기 data-light : 그룹화 역할을 한다. 사진들을 같은 네임명을 해주면 팝업에서 버튼을 통해 이동을 할 수 있다. data-title : 팝업에서 텍스트를 나타낼 수 있다. 2021. 8. 30.

2021-08-26 (136일차) 포트폴리오 디자인 완성 - 포폴 디자인 컨펌 후, 발표 ㄴ 최하단 contact 부분에서 버튼 텍스트로만 변경 - 포폴 디자인 완성 - 깃허브 리포지터리 생성 ㄴ Portfolio2021 2021. 8. 29.

2021-08-25 (135일차) FULLPAGE를 VS CODE로 옮기기, PHP SSG 웹사이트 구축하기 PHP SSG 웹사이트 1강~9강 FULLPAGE 16강 (VS CODE로 옮기는 방법) 웹사이트 구축방법 1~3강 ㄴ 작업할 때 강의 듣기 PHP를 사용한 웹사이트 구축방법 4강~ 1. 강사님이 만드신 php_simple_ssg 코드 zip 다운로드 2. 필요없는 파일 지우기 ㄴ> jsc폴더, app.php, cmd.php, data.php, util.php 만 남기고 삭제하기 3. 만든 폴더 안에 붙여넣기 → 작업방식이 달라짐 4. docs폴더가 아닌 jsc안에 파일을 만들기 5. 파일명 뒤에 .ssg.php 붙이기 2021. 8. 26.

2021-08-24 (134일차)wiken.io 블로그 사용법, lodash, 마우스 움직임에 따라 흔들리는 개체 만들기 위켄사용법 1강~3강 자바스크립트와 제이쿼리 기초 102강 유용한 소스코드 17~19강 (필요할 때 보는 용도) - 마우스 움직임에 따라 흔들리는 개체 만들기 to2.kr/c37 에서 YzQzjNJ ... codepen.io jquery와 lodash 가져오기 스크립트 전부 가져오기 클래스에 mousemove-effect-1-el 넣어주기 텍스트라면 최소한 inline-block으로 만들어주기 (transform로 인해 움직이는 원리인데, inline에게는 통하지 않음) data-mousemove-effect1-hor-res="0.1" data-mousemove-effect1-ver-res="0.1" 을 태그 안에 넣어주기 ※ 여기서 hor은 가로, ver은 세로를 나타낸다. (0.1은 마우스가 움직이는.. 2021. 8. 26.

2021-08-23 (133일차) hover시 텍스트 변환, uppercase, impress사용방법 웹코딩 기초 172강 (hover시 텍스트 변경) impress 0강 - hover하면 한글이 영문으로 바뀌는 방법 한글을 없애지 않고 안 보이게 하는 게 tip! See the Pen to2.kr/bOC by minicoding (@minicoding) on CodePen. ※ text-transform:uppercase; : 영문을 모두 대문자로 바꿔주는 기능을 한다. - impress 사용방법 임프레스 스크립트소스 가져오기 스크립트에 impress().init(); 넣어주기 #impress 아이디로 감싸주기 ㄴ 태그 내부에 .step 클래스로 감싸고 data-x와 data-y로 위치지정하기 1 2 3 2021. 8. 26.

2021-08-22 (132일차) 포트폴리오 작업 - 포트폴리오 작업 ㄴ 스킬 부분 수정 ㄴ 어바웃미 부분 수정 2021. 8. 26.

2021-08-21 (131일차) 포트폴리오 작업 - 포트폴리오 작업 필름 일러스트 제작하기 프로세스 로고 버튼 만들기 2021. 8. 22.

2021-08-20 (130일차)포트폴리오 컨펌 - 포트폴리오 개인 컨펌 ㄴ 포트폴리오 = 나 자신을 소개하기 위해 만드는 것 ㄴ> 의미에 맞게 내 자신에 대한 의미를 더 추가할 것! - 컨셉 수정, 내 사진 넣기 2021. 8. 22.

2021-08-19 (129일차) stagger 활용, 텍스트효과 GSAP과 스크롤트리거 26~28강 (stagger 활용) - 한 글자씩 차례대로 올라오는 텍스트효과 : 텍스트를 span태그 두 개로 감싸기 : timeline() 사용하기 See the Pen by minicoding (@minicoding) on CodePen. - 한 글자씩 쳐지는 애니메이션 : css anmation 사용 See the Pen by minicoding (@minicoding) on CodePen. - 커서가 입력되는 텍스트 따라다니게 만들기 See the Pen by minicoding (@minicoding) on CodePen. 2021. 8. 21.

2021-08-18 (128일차) form (폼)형식, GSAP - stagger, fullpage 텍스트 애니메이션 자바스크립트와 제이쿼리 100강~101강 (form) GSAP과 스크롤트리거 25강 FULLPAGE 15강 웹디자인 기능사 8강~10강 (서브메뉴) (따로 정리) 내부의 각 입력요소 - : 여러가지의 유형이 있다. ex) https://www.w3schools.com/tags/tag_input.asp : type에 number을 부여할 시, input창을 클릭하면 숫자키패드가 나온다. * readonly 옵션을 넣으면, 읽기전용 창으로 바뀐다. - : input과 다르게 2줄 이상 쓸 수 있다. : 너비, 높이 조절이 가능하다 ex) - : 기본적으로 아래로 옵션이 내려온다. (내려올 공간이 없으면 저절로 위로 올라온다.) selected : 초기에 선택되어 있게 해주는 옵션 disabled : 선택이 .. 2021. 8. 20.

이전 1 2 3 4 5 6 7 ··· 15 다음

티스토리툴바