목록css picture (6)

pbj0812의 코딩 일기

[CSS] 빵떡오리 그리기

0. 목표 - 빵떡오리 그리기 1. 데생 2. HTML 3. CSS *, *:after, *:before { box-sizing: border-box; } body { background: #FFFFFF; } .duck { position: relative; margin: 50px auto; width: 400px; height: 400px; } .duck .face .face1{ position: absolute; top: 120px; left: 25px; width: 400px; height: 400px; border-radius: 100%; background: #FBEE99; } .duck .face .face2{ position: absolute; top: 250px; left: -25px; w..
ComputerLanguage_Program/CSS 2021. 4. 5. 01:45
[CSS] 몽글이(강아지) 그리기

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: 220px; left: 25px; width: 400px; height: 300px; border-radius: 20%; background: #FFFFFF; } .dog .face .face2{ position: absolute; top: 150px; left: 25px; ..
ComputerLanguage_Program/CSS 2021. 3. 28. 23:48
[CSS] 멍멍이 그리기

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..
ComputerLanguage_Program/CSS 2021. 3. 22. 01:25
[CSS] 농구공 들고있는 진국이 그리기

0. 목표 - 농구공 들고 있는 진국이 그리기 1. html WA 2. css *, *:after, *:before { box-sizing: border-box; } body { background: #d0ddf8; } .waba { position: relative; margin: 50px auto; width: 400px; height: 400px; } .waba .body .body1{ position: absolute; bottom: -350px; left: 75px; width: 250px; height: 250px; background: #00CCCB; } .waba .body .body2{ position: absolute; top: 400px; left: 50px; width: 300px;..
ComputerLanguage_Program/CSS 2021. 2. 22. 03:41
[CSS] 컵에 낀 병아리

0. 목표 1) 원본 2) 순서도 1. 실습 1) html 2) css *, *:after, *:before { box-sizing: border-box; } body { background: #d0ddf8; } .cup { position: relative; margin: 50px auto; width: 400px; height: 400px; } .cup .body{ position: absolute; left: -100px; bottom: -200px; width: 300px; height: 400px; background: #8b00ff; } .cup .leg .left .middle{ position: absolute; left: 240px; bottom: -200px; width: 15px; h..
ComputerLanguage_Program/CSS 2021. 1. 27. 03:14
[CSS] 탱크 그리기

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: ..
ComputerLanguage_Program/CSS 2020. 6. 24. 23:59
Prev 1 Next