일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- NodeList
- 스크롤
- 애니메이션
- css
- Animation
- scrollevent
- For
- Sticky
- Hover
- localstorage
- NAV
- React
- scroll
- html
- getBoundingClientRect
- 확장성
- input
- swiper
- 반복문
- swiperjs
- mousemove
- classList
- insertAdjacentHTML
- width
- addEventListener
- pointermove
- scrollY
- forEach
- 이벤트리스너
- JavaScript
- Today
- Total
목록전체 글 (56)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bsicO9/btsGh3BzkVV/DwsYJ60KxkoSPm1kNAQuz0/img.jpg)
안녕하세요? 얼마 전에 웹디자인기능사 실기도 치고 이래저래 사느라 바빴네요. 일도 하면서 웹디자인기능사 실기 공부도 하고 운동도 하다보니 개인적으로 공부할 시간이 엄청 적었네요. 그래도 짬내서 계속 공부는 하고 있었답니다! 글을 안썼을 뿐... 리액트를 배우고 나서 리액트로 개인 페이지를 만들고 싶어서 이래저래 찾아보다가 웹을 기획하는 일을 하시는 분들이 있다는 것을 새삼 깨달았어요. 그래서 검색도 되게 많이 해보고 알아보려 했는데 생각보다 자료가 그리 많지 않더라구요..? 그래서 말 그대로 웹을 어떤 컨셉으로, 어떤 기능을 구현하고, 어떤 디자인 방향으로 나갈 것인지 등 전반적인 웹 틀을 짜는데 필요한 사람이라고 생각했습니다. 어찌보면 기초를 다지는데 가장 중요한 역할을 하는 사람이라고 생각했죠. 정확..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/yx5ej/btsE9EjApVx/PC0j9C4ijdRP9movHV18T1/img.gif)
이렇게 마구잡이로 정렬되어있던 글들을 가나다순, 역순으로 정렬해주는 필터를 만들어보았다. 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('..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bVIxee/btsEOUgc7My/G2iEY5BSzFH6mFv5p2vuT1/img.gif)
보통 홈페이지에 연혁을 보여주는 페이지를 가면 보이는 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rJJeV/btsEKDyjDVR/I3rbQhekpv7eSpjP1KNEfK/img.gif)
마우스 움직임에 따라 원들이 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CSD04/btsEy2ZELSW/l0pCUebk0GpUBw8Vd3yDnk/img.gif)
위와 같이 가로(좌우)스크롤 시 각 섹션이 안보일 때까지 해당 제목이 고정되는 ui를 만들어보았다. HTML 1번 컨텐츠입니당 2번 컨텐츠입니당 3번 컨텐츠입니당 CSS body, html{ contain: paint; } .section{ width: 100%; height: 3000px; position: relative; margin: 500px 0; } .scroll{ height: 100vh; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; left: 0; } .box{ padding: 0 60px; width: 1400px; height: 700px; } .title{ mar..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/k1rA6/btsEvXo0KS6/nTdo9vg8poUWseKoJPS4nk/img.gif)
위와 같이 마우스의 움직임에 따라 전체적인 페이지가 같이 움직이는 ui를 만들어보았다. HTML CSS * { overflow: hidden; margin: 0; padding: 0; } html,body{ background-color: #333; } .section { width: 100vw; height: 100vh; } .inner { position: absolute; background-color: #333; height: 2560px; } .rows { display: flex; align-items: center; justify-content: center; width: 100%; } .link { width: 400px; height: 600px; background-color: #ddd..
reset.css 라는 용어를 모르고 있다가 내가 평소에 하고 있는게 reset.css라는 것을 알게 되었다. reset.css란 특정 태그의 기본 템플릿같은 것을 본인이 코딩하는 스타일에 맞게 미리 설정해두는 것을 말한다. 예를 들어 ul,li를 쓰면 기본적으로 내용 앞에 동그라미가 하나 붙는데 나는 그 동그라미를 쓴 적이 한 번도 없기 때문에 list-style: none으로 초기에 설정해두고 사용한다. 이러한 초기값 설정을 해둔 것을 모아둔 것이 reset.css다. 구글에 reset.css를 검색하면 가장 상단에 나오는 링크가 하나 있는데 보통 그거를 복사해서 많이들 쓴다고 한다. 근데 나는 그렇게까지 다 필요한지는 모르겠어서 따로 자주 쓰는 것만 설정하는 편이다. https://meyerweb...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/4Hnec/btsEkfeorJG/GXQvQcYobLDMqYlhGwnBv1/img.gif)
아주 간단하게 아코디언 메뉴를 만들 수 있다. 저는 이렇게 아코디언 메뉴와 함께 해당 사진도 옆에서 나오게하는 애니메이션을 만들어 보았다. HTML 1번 사진입니다. 2번 사진입니다. 3번 사진입니다. 4번 사진입니다. 5번 사진입니다. 리스트 1번입니다. 리스트 1번 내용입니다. 리스트 2번입니다. 리스트 1번 내용입니다. 리스트 3번입니다. 리스트 3번 내용입니다. 리스트 4번입니다. 리스트 4번 내용입니다. 리스트 5번입니다. 리스트 5번 내용입니다. aco-list안에 content를 넣어준다. CSS .section{ padding: 0 120px; } .inner{ width: 100%; display: flex; justify-content: space-between; } .photo-box..