일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- iOS 개발자
- react
- 백엔드
- html5
- 비전공자
- php
- xcode
- iPhone
- jQuery
- css3
- 프론트엔드
- ipad
- Animation
- effect
- image
- IOS
- 풀스택
- 애니메이션
- 비전공 개발자
- hover
- keyframes
- button
- front-end
- HTML
- 자바스크립트
- SWIFT
- CSS
- MAC
- 개발자
- javascript
- Today
- Total
목록CSS (62)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/6qORA/btrzj0FvO5U/LHKJvGf3BDfpTJkRofOIwk/img.png)
Learn More .button { display: inline-block; color: #3c67e3; text-decoration: none; padding: 20px 50px; border: 3px solid #3c67e3; border-radius: 10px; } .button:hover { animation: pulsate 1s ease-in-out; } @keyframes pulsate { 0% { box-shadow: 0 0 25px #5ddcff, 0 0 50px #4e00c2; } }
Loading Animation .loader-wrapper { width: 60px; height:60px; } .loader { box-sizing: border-box; width: 100%; height: 100%; border: 10px solid #162534; border-top-color: #4bc8eb; border-bottom-color: #f13a8f; border-radius: 50%; animation: rotate 5s linear infinite; } .loader-inner { border-top-color: #36f372; border-bottom-color: #fff; animation-duration: 2.5s; } @keyframes rotate { 0%{ transf..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/uT0hh/btrySOUrBga/H2fC4U6Z0sZds3u5U7u721/img.jpg)
.toggle-switch, .toggle-switch .toggle-knob { -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .toggle-switch { height: 30px; width: 55px; display: inline-block; background-color: #ffffff; margin: 2px; margin-bottom: 5px; border-radius: 30px; cursor: pointer; border: solid 1px #d2d6de; box-shadow: inset 1px ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/t0NG7/btrp6x715Ms/BFqfwof7mpV6Zki7w2Dhe1/img.jpg)
환경 설정 1. node js 설치 - LTS(안정화) 버전 - 설치시 , npm도 같이 설치됨 2. Expo 설치 - npm install -g expo-cli https://expo.io/ Expo Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. expo.dev 3. 파일 생성 - expo init 파일명 - 3가지 선택사항이 나오는데 상황에 맞게 선택(글쓴이의 경우 blank로 선택) 4. Hello World import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Te..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/7Vv37/btrp6lsd7TV/tAUYv45L9iVkdf4l96pmrk/img.jpg)
특정 클래스 존재 유무에 따른 jQuery 실행문 예시 BOX1 BOX2 BOX3
PHP 정보 확인 : phpinfo() 문자 표시 : PHP 상수 이름 설명 PHP_VERSION PHP의 버전 PHP OS PHP가 실행중인 OS __LINE__ 처리 중인 파일의 현재 줄 번호 __FILE__ 처리 중인 파일의 전체 경로와 이름 __DIR__ 처리 중인 파일의 디렉터리 __FUNCTION__ 함수명 __CLASS__ 클래스명 __TRAIT__ 트레이트명 __METHOD__ 클래스 메소드명 __NAMESPACE__ 현재 네임스페이스 이름 true 참 false 거짓 null 아무 값이 없음 함수 정의: define() define() -> PHP VERSION 확인: PHP_VERSION 현재 처리중인 파일명 확인: __FILE__ 처리 중인 행 번호 출력: __LINE__
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/RAZvE/btrjO20d11q/v16OdWOBvMYTpYw969Xc8K/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..