일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- button
- 자바스크립트
- 프론트엔드
- react
- CSS
- SWIFT
- HTML
- image
- iOS 개발자
- Animation
- effect
- keyframes
- html5
- ipad
- 애니메이션
- MAC
- 개발자
- 풀스택
- javascript
- hover
- css3
- iPhone
- jQuery
- 비전공 개발자
- xcode
- IOS
- 비전공자
- front-end
- php
- 백엔드
- Today
- Total
목록CSS (62)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bdXJj1/btrhTcvRIHN/6NcGMfcnZKor4rgUtbr7KK/img.png)
Home main01 menu1 menu2 menu3 main02 .dropmenu{ border:none; border:0px; margin:0px; padding:0px; font: "sans-serif"; font-size:18px; } .dropmenu ul{ background: #666; height:100px; list-style:none; margin:0; padding:0; } .dropmenu li{ float:left; padding:0px; } .dropmenu li a{ background: #666; color:#fff; display:block; line-height:100px; margin:0px; padding:0px 25px; text-align:center; text-d..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/MDCqU/btrg9jhYVab/KCrYnUaU8thNZkeOi7RmQK/img.jpg)
로고 01_menu 02_menu 03_menu 04_menu 05_menu 01_menu 02_menu 03_menu 04_menu 05_menu Culture Report.01 내 일 에 책임을 다하는 문화 '나 스스로 어떤 성과를 낼 것인지'에 집중하여 개개인이 자율적으로 업무시간을 관리하고 일에 책임지는 문화를 정착시켜나가고 있습니다. 하부로고 카피라이트
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/8c021/btrgWBEFI6x/aoZGJ6bhEGicJvQfz8afIK/img.jpg)
재활클리닉 HOME 회사 병원소개 재활의학과 상담신청 게시판 게시판2 재활의학과 menu_01 menu_02 menu_03 menu_04 menu_05 menu_06 재활의학과 소개 재활의학이란 어떠한 질환의 합병증을 초기에 예방하고, 각종 질병 및 사고로 인하여 장애가 생긴 환자의 기능적인 회복을 위해 치료를 실시 합니다. 또한 손상된 부분을 주어진 환경 내에서 최대한의 신체적, 정신적, 사회적 능력과 잠재 능력을 발달시켜 가능한 한 정상에 가까운 기능 실행 뿐만 아니라, 잃어버린 기능을 대치하도록 노력하며, 타인의 도움을 받지 않는 생황을 할 수 있게 도와드립니다. 기능뿐 아니라 각종 통증으로 인하여 보행 및 일상생활 동작에 지장을 받는 모든 환자가 재활치료의 대상입니다. 재활클리닉 동도이미지(주) ..
BULMA https://bulma.io/ Bulma: Free, open source, and modern CSS framework based on Flexbox Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free. bulma.io CSS만을 위한 프레임워크 1. JQuery를 사용하지 않기 때문에 Bootstrap보다는 조금은 이해가 쉬운 클래스 2. 쉬운 CUSTOMIZE 3. 내가 작성한 CSS와 충돌이 없음 4. 브라우저 호환성이 낮음 npm install bulma TAILWIND https://..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/Ni0fw/btreJhvePoB/mLVjQ4RqrJue8apEd9xc9k/img.jpg)
Update CSS Variables with JS Spacing: Blur: Base Color :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } body { text-align: center; background: #193549; color: white; font-family: 'helvetica neue', sans-serif; font-weight: 100; font-size: 50px; } .h1 { color: var(--base); } .controls { margin-bottom: 50px; } a { color: var(--base); text-decoration: none; } input { width: 100px; } img{ pa..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/barnnC/btreLLVgIWt/WHcMOKmjzAqJCmfKQjeZZ1/img.jpg)
Simple Clock html { background: #018ded background-size: cover; font-family: 'helvatica neue'; text-align: center; font-size: 10px; } body { font-size: 2rem; display: flex; flex-flow: column; flex: 1; min-height: 100vh; align-items: center; } h1 { color: lavender; } .clock { width: 30rem; height: 30rem; border: 20px solid lavender; border-radius: 50%; margin: 50px auto; position: relative; paddi..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dnsb0Q/btreCe42GGm/tCuGrKfYpLgZG17WCNxox1/img.jpg)
Sun Mon Tue Wed Thu Fri Sat * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Quicksand', sans-serif; } html { font-size: 62.5%; } .container { width: 100%; height: 100vh; background-color: #12121f; color: #eee; display: flex; justify-content: center; align-items: center; } .calendar { width: 45rem; height: 52rem; background-color: #222227; box-shadow: 0 .5rem 3rem rgba(0,0,0,.4) ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/srxGf/btrepuUo6TH/9Jz1SA9kAKZ7OnWWxBrD81/img.jpg)
A clap S hihat D kick F openhat G boom H ride J snare K tom L tink function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) const key = document.querySelector(`.key[data-key="${e.keyCode}"]`) // console.log(audio) if (!audio) return; audio.currentTime = 0; audio.play(); // console.log(key) key.classList.add('playing'); } function removeTransition(e) { if (e...