전체 글228 2021-09-07 (148일차) 포트폴리오 코딩 작업 중 (artwork + ending + contact) 포트폴리오 코딩 작업 중 (artwork + ending + contact) - artwork artwork 스와이퍼 슬라이드 같은 경우 어제 portfolio부분에서 해본 후 완벽극복해버린 바람에! 쉽게 해냈다! - ending credit 이 부분은 디자인할 때 내가 코딩으로 구현을 할 수 있을지 알아보기 위해 사전에 검색을 해봤었다. marquee라는 태그를 이용해 css가 없이 구현이 가능한 걸 보고 바로 넣기로 결정했었다. 그리고 대충 틀을 잡아 만들어서 codepen에 라이브러리를 저장해두었다! 그리고 오늘 만들어놓은 라이브러리를 가져오고 글자크기, 자간조정을 하는 등 디자인을 해주었다. 영화관 느낌을 내려고 어두운 배경에서 흰색 자막이 올라가는 듯한 느낌이 났다. 원하는 느낌이었다! 하지만 .. 2021. 9. 10. 2021-09-06 (147일차) 포트폴리오 작업 중 intro + portfolio, 탭메뉴에 따라 화면이 전체적으로 바뀌는 효과 포트폴리오 작업 중 intro + portfolio 유용한 소스코드 27강 (탭메뉴에 따라 화면이 전체적으로 바뀌는 효과) 포트폴리오 코딩 작업 중 (intro + portfolio) intro에는 영상이 들어간다. codepen으로 임시작업 중이라 아직 영상으론 넣지 못하고 사진으로 대체했다. intro위에 부분에 좋아하는 명언을 띄웠다. 피그마 프레임 안에서 저장해서 프레임 아래에 깔린 백그라운드랑 같이 추출이 돼서 프레임에서 꺼내서 명언 개체만 따로 추출했다. 몰랐던 점을 알아내서 기쁘다! portfolio 부분 코딩을 시작했다. 스와이퍼 슬라이드에 대해 배울 때 잘 못해내고 재미도 못 느껴서 두려움이 많았다. 하지만 내가 하고 싶은 작업을 해내다 보니 하나하나 공책에 계산해가며 만들어보니 금방 뚝.. 2021. 9. 10. 2021-09-05 (146일차) 포트폴리오 작업 중 skill - 포트폴리오 코딩 작업 중 about me완성 skill 부분 시작 ㄴ svg 애니메이션 공부 ㄴ circle 태그에 대해 공부 ㄴ progress bar 애니메이션 알아보기 2021. 9. 10. 2021-09-04 (145일차) 포트폴리오 작업 중 about me 포트폴리오 코딩 작업 중 (about me) about me 부분의 영상부분이 들어간다. codepen으로 임시 작업 중이여서 background-image로 이미지를 일단 넣고 background-attach : fixed로 고정하여 스크롤해도 이미지는 고정되어 있는 효과를 삽입하고 싶었지만 fullpage라서 적용이 되지 않는 문제점이 있다. 친구와 카페에 가서 하나를 잡고 방법을 찾다가 선생님께 여쭤봐서 대답이 되는 링크를 받았는데 내 머리로는 도저히 적용 불가능이당.. 하나 붙잡고 시간 끌지 말고, 그냥 이미지로 넣고 작업을 이어가야겠당. 하하하 2021. 9. 5. 2021-09-03 (144일차) css 버튼을 이미지로 적용하는 방법 자바스크립트와 제이쿼리 기초 106강 (폼 버튼 만들기) 유용한 소스코드 모음 25강 ~ 26강 (텍스트 좌우 라인) - form 커스텀 방법 ※ 버튼은 이미지로 바꿀 수 없다. - 버튼을 이미지로 꾸는 방법 2021. 9. 5. 2021-09-02 (143일차) 순서대로 사진 보이게하기, 프로그레스 바+숫자 애니메이션 자바스크립트와 제이쿼리 기초 104강 ~ 105강 유용한 소스코드 모음 23강 ~ 24강 (팝업 만드는 방법) - 순서대로 사진이 나타나는 엘리먼트 효과 See the Pen by jhs (@jangka44) on CodePen. - 프로그레스 바 및 숫자 카운팅 애니메이션 See the Pen by jhs (@jangka44) on CodePen. 2021. 9. 5. 2021-09-01 (142일차) 일정한 시간간격으로 글씨가 교체되는 효과 유용한 소스코드 21강~22강 (switch effect) (글씨가 교체되는 효과) + (탭박스) - .each 같은 클래스를 각각 실행시켜준다. - node 가르키는 클래스가 여러 개일 때 순서대로 가르켜주는 변수 1단계 원리 (라이브러리 생성) - html, css 역할 li는 평소에 absolute (유령화) + opacity : 0 ㄴ> 전부 겹쳐지지만 li에 active가 들어가면 li가 relative로 변경 + opacity : 1 - script 역할 현재 활성화된 녀석을 함수로 지정한 후, active클래스 제거하기 현재 활성화된 녀석의 다음 태그를 함수로 지정한 후, active클래스 추가하기 setInterval 함수 안에 넣어 일정한 시간간격으로 작동하게 하기 length를 추가하여.. 2021. 9. 5. 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. 이전 1 2 3 4 5 6 7 8 ··· 19 다음
