일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- button
- 개발자
- 애니메이션
- css3
- IOS
- HTML
- Animation
- ipad
- effect
- react
- 비전공 개발자
- hover
- image
- MAC
- 자바스크립트
- html5
- jQuery
- 백엔드
- 비전공자
- xcode
- iPhone
- SWIFT
- php
- 프론트엔드
- iOS 개발자
- keyframes
- 풀스택
- CSS
- front-end
- javascript
- Today
- Total
목록HTML (66)
비전공자 개발일기
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..
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) ..
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...
점 수 계 산 기 변환 수학 점수 : 영어 점수 : 화학 점수 : 국사 점수 : 국어 점수 : 총 점수 : 평균 점수 : 최소 점수 : 최대 점수 : 낙제 유무 : (낙제 : 50점 미만 과목) 만점 유무 :
checkbox 연습 선택된 box의 value 확인 h.w.1) All select 선택 시 모든 checkbox 선택 h.w.2) checkbox의 선택이 바뀌면 선택된 항목 출력(check 된것만 출력) check1 : check2 : check3 : All select : 선택된 항목 :
HTML CANVAS CANVAS는 웹 페이제 그래픽을 그려주는 컨테이너 CANVAS는 JAVASCRIPT로 그래픽을 그림 strokeRect(x1,y1,x2,y2) 사각형 그리기 fillStyle: 사각형 색 지정 fillRect: 색이 있는 사각형 그리기 strokeRect: 사각형 테두리 그리기 clearRect: 사각형 모양의 지우개 웹 브라우저가 canvas를 지원하지 않습니다(라는 문장만 출력) lineTo 선그리기 moveTo: 선이 시작되는 좌표 lineTo: 선이 끝나는 좌표(연속으로 지정 가능) ex)let c2 = document.getElementById("canvas2").getContext("2d") c2.moveTo(0,0); c2.lineTo(300,100); c2.lineT..
html SVG(Scalable Vector Graphics) xml 형식의 벡터 기반 그래픽을 정의하는 요소 svg는 확장 가능한 웹용 벡터 그래픽을 나타냄 svg는 xml 형식으로 그래픽을 정의 svg는 모든 요소와 속성에 에니메이션 정의 가능 ex) 경과 시간에 따른 스타일이 변화는 것 svg는 W3C(html을 표준화하는 곳)에서 권장하는 태그(요소) SVG 사각형 그리기 rect width: 도형의 너비 height: 도형의 높이 stroke: 테두리 색 stroke-width: 테두리 두께 fill: 도형의 배경색 opacity: 도형의 투명도 x: 사각형의 왼쪽 상단 x좌표 y: 사각형의 왼쪽 상단 y좌표 rx: 사각형 모서리 굴곡의 x축 반지름 ry: 사각형 모서리 굴곡의 y축 반지름 SV..