본문 바로가기

분류 전체보기

 (177)
[project] 자바스크립트에서 Ajax와 jQuery 이용해보 스파르타 코딩 2주차 수업에서는 자바스크립트에서 Ajax와 jQuery를 이용하여 오픈 api의 값들을 가져다 실시간 데이터 스트리밍을 만들어 보았다. 첫번째, 업데이트 버튼을 누르면 실시간 서울의 구단위 미세먼지 상태를 볼 수 있다. 이 중, 80이상인 곳은 빨간색으로 표기해준다. 업데이트 두번째, 업데이트 버튼을 누르면 서울시 따릉이의 대수 현황을 보여준다. 5대 이하로 남은 스테이션은 빨간색으로 표기해준다. let rows = response['getStationList']['row']; for (let i = 0; i < rows.length; i++) { let locationID = rows[i]['stationName']; let bikes = rows[i]['parkingBikeTotCnt..
[project] 상품판매 페이지 만들기 (html/css) 어제 드림코딩 아카데미의 포트폴리오 웹사이트 만들기를 끝내고, 오늘부터는 스파르타 코딩클럽의 웹개발 종합반을 몰아서 수강 중이다. 1주차 숙제로 html과 css를 이용해 상품 판매 기획서대로 페이지 구축하였다. 바로 어제 스마트폰용 케이지를 주문한지라, 같은 상품 판매 페이지를 만들어 보았다. 스파르타 코딩클럽의 장점은, 실무에서 일하는 것과 같은 느낌으로 페이지를 구축해보는 경험인 것 같다. 기획서의 뼈대와 샘플 이미지를 보고 구축해보는 것이다. 드림코딩 아카데미에서와는 또 다른 즐거움과 배울점들이 있는 것 같다. 특히, 이범규쌤의 가르치는 스타일이 쉽게 빨리 만들어보는 것인데, 그 와중에 또 이론 부분을 잠깐씩 짚어주고 가는 것 같다. 또, 예제들이 실제 업무 상황에서 나오는 것들이라 활용성 측면,..
[project] 웹 포트폴리오 JS 완주 드디어 웹 포트폴리오 사이트 구축이 완료되었다. 이제 배포만 남았는데... 중간에 집안 사정으로 집중을 못한 기간이 있어, 계획보다 한참이나 지연되었다ㅠㅠㅠ 그래도 포트폴리오 사이트를 모두 빌드한 나 자신에게 박수를... 참, 안에 콘텐츠를 채워 넣으려면 앞으로도 갈 길이 멀다..ㅠㅠ 그래도 내 손으로 뭔가를 만드는 재미에 푹 빠져 살수 있어 행복하다!
[Quiz] JS loop 문법 간단 비교 1번 코드가 가장 좋다고 하는데, 왜일까? 1~3번 모두 같은 내용을 수향하는 코드다. 이 중 무엇을 사용하는 것이 가장 좋을까? 1번 forEach loop 사용 projects.forEach((project) => { }); 2번 for loop 사용 for(let project of projects) { } 3번 for loop 사용 let project; for(let i = 0; i
[project] 웹 포트폴리오_JS_디버깅 HTML All3 Static(HTML/CSS)2 Dynamic(JavaScript)1 React0 Random Number Game build using JS Hopper website static website build using bootstrap Luis Vuitton clone coding static website clone coding using bootstrap HTML에서 data-filter와 data-type을 지정하고, 각 카테고리 버튼을 클릭했을 때, 필터링을 통해 항목에 맞는 project를 가져오는 코드를 만든다. 이때, 카테고리 버튼에 커서를 hover하면 넘버링이 뜨게 만드는 것이 목표다. JS const workBtnCotainer = document.querySelect..
[project] web portfolio site _ JS scroll to top 이번에는 페이지 하단에 위로 올라가기 버튼을 만들어 보았다. 1. 화살표 아이콘 추가하기(font-awsome 사용) 2. css로 꾸며주기 2-1. *position: fixed* / sticky가 아니었다!! 2-2. display : none 대신 opacity: 0 /1 을 사용하면, 애니메이션 효과를 추가할 수 있다. 2-3. opacity : 0 을 사용시, 화살표가 투명해졌을 때, 클릭이 가능하다!!!! -> point-events : none을 통해 커서 포인터를 죽여준다. 2-4. .arrow-up.visible 일때, point-events: auto로 돌려주지 않으면 클릭이 안되버린다....ㅋㅋㅋㅋ .top-btn{ position: fixed; bottom: 50px; right: ..
[project] 웹 포트폴리오 사이트 _ JS-css opacity 조정 이번에는 home 탭에서 스크롤 다운할수록 안의 콘텐츠의 투명도를 조정하는 옵션을 배웠다. 분명 기존에 배웠던 것으로 할 수 있다고 하였는데... 잘 해내지 못했다. navbar에서 색상 변경하였던 방식을 그대로 차용했는데, 먹히지 않았다. 강사님은 JS에서 직접 css opacity를 먹여버리는 방식으로 풀어나갔다... document.addEventListener('scroll', () => { home.style.opacity = 1 - window.scrollY * 0.55 / homeHeight; }); 나로써는 상상도 못한 일... LoL
[project] 웹 포트폴리오 사이트 만들기 _ JS contact me 버튼 클릭 후 스크롤 어제와 마찬가지로 Home에 있는 "contact me" 버튼을 누르면 Contact 탭으로 스크롤 다운하게 하는 기능을 추가하였다. const scrollTo = document.querySelector('#contact'); scrollTo.scrollIntoView({behavior: 'smooth', block: 'center'}); 위의 두가지 코드가 반복되어 이를 하나의 function으로 만들어주고, 기존 코드블럭을 function값으로 수정해 준다. function scrollIntoView(selector) { const scrollTo = document.querySelector(selector); scrollTo.scrollIntoView({behavior: 'smooth', bloc..

티스토리툴바