일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 티스토리
- 블로그
- 한빛미디어서평단
- 독후감
- 서평
- 파이썬
- 한빛미디어
- Python
- Blog
- 통계학
- 시각화
- SQL
- matplotlib
- 리눅스
- Pandas
- MATLAB
- Visualization
- 텐서플로
- 서평단
- Linux
- Tistory
- MySQL
- 매틀랩
- 파이썬 시각화
- Google Analytics
- Ga
- python visualization
- 월간결산
- 딥러닝
- tensorflow
- Today
- Total
목록css로 그림그리기 (2)
pbj0812의 코딩 일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/9uucS/btq0JxpuIWr/Vt3uvwmX4lHSJDhqHiCAb1/img.png)
0. 목표 - 멍멍이 그리기 - Flow Chart 1. HTML 2. CSS *, *:after, *:before { box-sizing: border-box; } body { background: #A5C2F4; } .dog { position: relative; margin: 50px auto; width: 400px; height: 400px; } .dog .face .face1{ position: absolute; top: 120px; left: 25px; width: 400px; height: 400px; border-radius: 100%; background: #FFFFFF; } .dog .face .face2{ position: absolute; top: 380px; left: 150px..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cS3NLg/btqE74vbIro/F7A2O5KWpdAHh8rMtwgPi1/img.png)
0. 목표 - CSS로 탱크 그리기 1. 스케치 - 대략 이런느낌 2. html 작성(codepen) 1) 탱크 안에 2) 캐터필터1 : 양 옆 동그라미 + 몸통 3) 캐터필터2 : 양 옆 동그라미 + 몸통 4) 바퀴 다섯개 5) 몸통 2개 6) 포대 2개 7) ROK 글자 한개 ROK 3. CSS 작성 *, *:after, *:before { box-sizing: border-box; } body { background: #d0ddf8; } .tank { position: relative; margin: 50px auto; width: 400px; height: 400px; } .tank .catter1 .rectangle{ position: absolute; bottom: -200px; width: ..