목록CSS (10)

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] 쿼카 그리기

1. 자료수집 2. 스케치 3. html 4. css *, *:after, *:before { box-sizing: border-box; } body { background: #FFFFFF; } .quokka { position: relative; margin: 50px auto; width: 400px; height: 400px; } .quokka .ear .left .ear1{ position: absolute; top: 80px; left: 55px; width: 120px; height: 120px; border-radius: 100%; background: #FFD967; } .quokka .ear .left .ear2{ position: absolute; top: 90px; left: 75px..
ComputerLanguage_Program/CSS 2021. 3. 7. 03:13
[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] CSS 로 산타 그리기

0. 목표 - CSS 로 산타 그리기 - flow chart 1. 실습 1) html 2) CSS *, *:after, *:before { box-sizing: border-box; } body { background: #d0ddf8; } .santa { position: relative; margin: 50px auto; width: 400px; height: 400px; } .santa .body .body1{ position: absolute; bottom: -350px; width: 400px; height: 150px; background: #ff0000; } .santa .body .body2{ position: absolute; top: 400px; width: 400px; height: 2..
ComputerLanguage_Program/CSS 2020. 12. 26. 03:45
[CSS] 태극 문양 그리기

0. 목표 - CSS로 태극 문양 그리기 1. 준비 1) 태극기 파악 - 가운데의 태극은 기울어져 있음(약 33도) 2) flow chart - 네 부분으로 나누어서 하나로 합치기 2. 실습 1) html - 태극기 안에 반원과 원 부분을 구분하고 다시 빨간 부분과 파란 부분 구분 2) css - 배경색은 하얀색(#ffffff) - 반원을 그릴 때에는 전체가 아닌 특정 부분만의 radius 적용(border-top-right-radius 등) - transform:rotate 를 통한 기울기 적용 - 비효율적...(뭔가 노가다가 심하고 div 구분의 의미가 없음) body { background: #ffffff; } .Taegeukgi { position: relative; margin: 50px aut..
ComputerLanguage_Program/CSS 2020. 8. 15. 14:14
[CSS] W3SCHOOL CSS Tutorial 쿡북 제작

0. 목표 - W3SCHOOL CSS Tutorial 쿡북 제작 1. 기본 형태 2. 코드 1) 기본 예제 Hello World! These paragraphs are styled with CSS. 2) element selector Every paragraph will be affected by the style. Me too! And me! 3) id selector Hello World! This paragraph is not affected by the style. 4) class selector Red and center-aligned heading Red and center-aligned paragraph. This heading will not be affected This paragraph..
ComputerLanguage_Program/CSS 2020. 4. 21. 02:22
[CSS] 기본 CSS 파일 셋팅(common, reset)

0. 목표 - common.css, reset.css 세팅 1. 폴더 트리 구조 - index.html - css ㄴ reset.css ㄴ common.css ㄴ main.css 2. reset.css - 사용목적 : 여백 초기화 - 공식문서 접근(링크) - 하위 내용 부분을 복사해서 reset.css로 저장 * a태그 부분 추가(사용자 맘대로) /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, ..
ComputerLanguage_Program/CSS 2020. 4. 15. 00:21
Prev 1 Next