일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 가로스크롤
- JavaScript
- scroll
- SQLD
- Sticky
- Animation
- Hover
- 애니메이션
- addEventListener
- css
- getBoundingClientRect
- input
- NodeList
- pointermove
- classList
- localstorage
- ADsP
- For
- scrollevent
- 스크롤
- 반복문
- html
- scrollY
- swiper
- React
- forEach
- mousemove
- 이벤트리스너
- insertAdjacentHTML
- swiperjs
- Today
- Total
목록전체 글 (60)
ZeroToHunnit Coding

안녕하세요! 저는 IT업계 취준생 비전공자입니다. 공부하다가 관심이 생기는 분야가 있으면 공부해보고 이해하는 과정에 있는 취준생입니다.SQLD 자격증을 취득하고 바로 ADsP 자격증 취득에 도전했습니다! 데이터 분석하는게 궁금해서 시작하게 되었고 이 자격증을 취득하면서 앞으로의 계획이 대략 잡혔습니다. 빅데이터분석기사, 정보처리기사를 준비하면서 딥러닝, AI쪽으로 공부를 제대로 해보려고 합니다. ` ADsP란?- 데이터분석 준전문가(ADsP : Advanced Data Analytics Semi-Professional)란 데이터 이해에 대한 기본지식을 바탕으로 데이터분석 기획 및 데이터분석 등의 직무를 수행하는 실무자를 말한다. 우선 이 책의 뒷편에 기출문제만 풀어보았다! 나는 개인적으로 이론적인 내..
https://jeonghui-seong.github.io/strongbeach/ 디자인 오류로 인한 반응형 실패 사이트.. 나름 기분 좋게 디자인도 완성도 있게 끝낸거 같고 으쌰으쌰 퍼블리싱을 시작했지만 만들면서 깨달은게 반응형 사이즈를 너무 고려하지 않았다는 것이다.. 바닐라JS로 모든 것을 하려니 생각 외로 막혔던 부분이 많아서 시간도 오래걸릴 뿐더러 퍼블리싱이라는걸 오랜만에 한 탓에 버벅대면서 시간이 꽤나 걸리고 반응형 작업에서 고민되는 부분이 너무 많아서 이 프로젝트는 포기하기로 마음 먹었다.. 애초에 설계할 때 높이 값을 화면에 꽉차게 만드는 부분이 많았어서 그런지 피그마로 디자인할 때 태블릿과 모바일 환경은 신경쓰지 않은 상태로 높이 값을 임의로 정해서 비율에 맞지 않게 디자인한게 오류였다...

안녕하세요! 저는 IT업계 취준생 비전공자입니다. 공부하다가 관심이 생기는 분야가 있으면 공부해보고 이해하는 과정에 있는 취준생입니다. 아직 확실하게 어느 분야로 가야겠다!하는 방향을 못잡아서 이것저것 경험해보면서 자격증을 취득하고 있는데 하나하나 알아가는게 생기고 시야가 넓어진다는 느낌이 들어 뿌듯해하며 살고 있습니다. 여느 때와 다를거 없이 공부하던 중 데이터베이스가 뭔지 갑자기 궁금해지기 시작했고 이를 전반적으로 이해하고 공부하고 싶어 자격증을 찾아보니 SQLD라는 자격증이 있는 것을 알게 되었습니다. ` SQLD란?- SQL(Structured Query Language)은 데이터베이스를 직접적으로 액세스할 수 있는 언어로, 데이터를 정의하고(Data Definition), 조작하며(Data Ma..

또 오랜만이군요 ㅎㅎ 최근 많은 큰 변화에 정신없는 하루를 보내면서 조금 들떠있는 마음도 가라앉히고 차분하게 공부해보려고 노력 중입니다! 우선 8월 말에 퇴사하면서 그 주 토요일에 SQLD 시험을 치고 왔습니다. 준비는 나름 철저하게 했다고 생각했는데 문제를 받자마자 머릿 속이 하얗게 되면서 좀 당황했지만 그래도 풀수록 긴장도 같이 풀려서 나름 잘 치고 온거 같네요! 9월 6일날 가채점 발표된다던데 꼭 합격 커트에 여유롭게 들었으면 좋겠네요 ㅎㅎ.. 만약 합격한다면 SQLD 합격 후기도 올려봐야겠네요! 그리고 일하면서 SQLD 공부도 하다보니 요즘 웹디자인, 퍼블리싱을 잘 못해가지고 다시 감 좀 찾는 느낌으로 간단한 페이지 하나 만들어보려고 웹디자인했습니다 ㅎㅎ 이 전 중고차 사이트는 좀 더 공부하고 제..

안녕하세요? 얼마 전에 웹디자인기능사 실기도 치고 이래저래 사느라 바빴네요. 일도 하면서 웹디자인기능사 실기 공부도 하고 운동도 하다보니 개인적으로 공부할 시간이 엄청 적었네요. 그래도 짬내서 계속 공부는 하고 있었답니다! 글을 안썼을 뿐... 리액트를 배우고 나서 리액트로 개인 페이지를 만들고 싶어서 이래저래 찾아보다가 웹을 기획하는 일을 하시는 분들이 있다는 것을 새삼 깨달았어요. 그래서 검색도 되게 많이 해보고 알아보려 했는데 생각보다 자료가 그리 많지 않더라구요..? 그래서 말 그대로 웹을 어떤 컨셉으로, 어떤 기능을 구현하고, 어떤 디자인 방향으로 나갈 것인지 등 전반적인 웹 틀을 짜는데 필요한 사람이라고 생각했습니다. 어찌보면 기초를 다지는데 가장 중요한 역할을 하는 사람이라고 생각했죠. 정확..

이렇게 마구잡이로 정렬되어있던 글들을 가나다순, 역순으로 정렬해주는 필터를 만들어보았다. HTML 가나다순정렬 역순정렬 짜잔 아무 것도 없다. CSS *{ padding: 0; margin: 0; list-style: none; } .box li{ padding: 30px; font-size: 40px; border-bottom: 4px solid black; } button{ padding: 30px; font-size: 40px; } css도 뭐 별거없다. JAVASCRIPT let list = ['고양이','치킨','햄버거','다람쥐','안녕하세요']; list.forEach(function(data, i){ let template = `${data}`; document.querySelector('..

보통 홈페이지에 연혁을 보여주는 페이지를 가면 보이는 progressbar를 만들어보았다. HTML 안녕하세요요건 고정된 타이틀임다. 채워집니다~ 이것 좀 보세요오 신기하죠? 곧 끝나갑니다! CSS .section { width: 100%; position: relative; display: flex; justify-content: center; margin: 300px 0; } .title-box { position: sticky; top: 100px; left: 200px; width: 500px; height: 100%; } .progress-box { width: 5px; height: 3000px; position: relative; background-color: #999; } .progres..

마우스 움직임에 따라 원들이 3d느낌으로 움직이는 ui를 만들어보았다. 저대로 사진만 넣으면 좀 더 실감나게 3d느낌을 낼 수 있지 않을까 싶다. HTML CSS .section{ overflow: hidden; position: relative; width: 100%; height: 100vh; } .circle{ position: absolute; width: 700px; height: 700px; border-radius: 50%; transform-style: preserve-3d; perspective: 500px; } .circle:nth-child(1){ top: 200px; left: -200px; background-color: blue; } .circle:nth-child(2){ top..