![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/M7ydG/btsj6k6Wuwo/ybXyp5HkzUEf43nmEIpP3K/img.png)
스크롤의 위치에 따라 실행되는 애니메이션을 만들어볼건데요~ 스크롤 이벤트라고 하죠? 스크롤을 내릴 때마다 svg애니메이션이 돌아가게 하는 결과물이구요 svg애니메이션은 나중에 또 따로 포스팅을 하기로 해요 실은 순서대로 하는게 맞는데 그러다보니 자꾸 밀려서;;; 일단 html구조 자체를 한섹션씩 짜버리게 했습니다. 이미지 + 텍스트박스 + cass svg 를 한 박스로 묶어서 네개를 만들고 svg는 absolute처리를 했구요 // SVG HTML h a n m a c // SVG CSS /*svg*/ @keyframes stroke { 0% { stroke:#fff; stroke-width: 1px; stroke-dashoffset: 326px; } 70% { fill: transparent; } 98..
안녕하세요 찐망고입니다. 제가 벌써 나흘째 포스팅을 꾸준히 하고 있어요.. 예약포스팅이긴 하지만.. 오늘이 마지막이긴 하지만.. 오늘은 자바스크립트를 이용하여 페이지가 로드 되었을 때 타이핑 하며 나오는 텍스트를 만들어 볼거에요.. 일단 일반 타이핑 예제랑은 다르게 텍스트가 위쪽은 테두리만... 아래쪽은 면색이 포함되어서 요소가 두개로 분리되어야 하는 상황 학생 포트폴리오 - OB리뉴얼 사이트 // HTML // CSS .text-box { display: flex; justify-content: center; align-items: flex-start; height: 200px; } .text-box > span { display: block; -webkit-text-fill-color: transpa..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cHwyER/btsiBM4Z8xT/TGBmrDZMq9ZD2ad9u4RbKK/img.png)
안녕하세요 찐망고 입니다. 제목짓는거 왜이리 어렵죠? 헤메고있는 누군가에게 조금이라도 도움이 되길 바라며 오늘도 시작해볼게요. 네비게이션에 보면 각 메인메뉴에 마우스를 올리면 아래 depth들이 한번에 나오고 각 메뉴이름에 맞춰 depth가 나오는 배경아래 하단에 text가 나오는 작업을 해보려고 합니다. 저는 개인적으로 html과 css로 셋팅을 끝내놓은 후 JS작업을 하였습니다. 이런 류의 메뉴 디자인은 웹접근성을 생각하며 작업을 하기가 참.. // HTML COMPANY BRAND ESG NEWS&MEDIA CAREER 제목 히든제목 COMPANY ... BRAND ... ESG ... NEWS&MEDIA ... CAREER ... // CSS .nav-bg { position: absolute; ..
웹페이지 접속 할 때 숫자 카운팅 되면서 움직이는.. 그런것들을 만들고 싶었다면? // HTML 0 // JS // 숫자 카운트 const counter = ($counter, max) => { let now = max; const handle = setInterval(() => { $counter.innerHTML = Math.ceil(max - now); // 목표수치에 도달하면 정지 if (now { // 카운트를 적용시킬 요소 const ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bpR9FJ/btsiM9RDUdA/K3Aq1RFf9NrRQOx3VQmavk/img.png)
안녕하세요 찐망고입니다. 아.. 정말 매일매일 포스팅하시는 분 리스펙 바쁘니까 바로 본론에 들어가서 적응형 사이트를 만들다보면 pc와 mobile사이트를 따로 작업하게 되는데, pc의 해상도 기준을 최소 1366정도 잡거든요.. 그 이하 해상도에선 가로스크롤이 생기게요~ 문제는 header가 position: fixed인 경우 width길이만큼 고정이 되어버린다는 거죠~ 가로 스크롤을 이동해도 헤더는 움직이지 않습니다 저걸 무시하고 마크업 하는 분들도 있고, 움직이게는 했는데 전체 메뉴가 보이지 않게 셋팅한 사이트들도 많더라구요 이렇게 가로스크롤을 해도 nav가 제대로 보이는 게 좋겠죠? // HTML 제목 // CSS header { position: fixed; width: 100%; z-index:..
- Total
- Today
- Yesterday
- 피그마플러그인
- UI디자인
- 스마트폰해상도
- JavaScript
- 자바스크립트숫자카운트
- CSS3
- slickAPI
- margin
- uxdesign
- 디자인팁
- 코딩교육
- 웹디자인
- 슬라이드플러그인
- uidesign
- boxmodel
- padding
- css그리드
- 프로그래밍기초
- 웹표준
- Border
- JavaScriptTips
- uiux
- css4
- 반응형웹
- 시멘틱마크업
- css
- 크로스브라우징
- 웹접근성
- Slick
- 포토샵합성
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |