pbj0812의 코딩 일기

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..

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; ..

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..

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..

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;..

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..

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..

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..

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: ..

- 해당 블로그의 내용을 보고 제 현재 수준에 맞게 변형한 글입니다. 1. 준비물 1) 그림 2) COLOR PICKER - 구글 웹스토어에서 COLOR PICKER 검색 - 색상 스포이드 역할 3) codepen - 링크 2. 실습 1) HTML 레이아웃 잡기 - 얼굴, 눈2개, 눈동자2개, 귀2개, 귀안2개, 코, 입 - 얼굴 안에는 눈, 코, 입이 있기에 face로 묶어줌. 2) CSS (1) 틀 잡기 - *은 전체 선택자를 나타냄. *, *:after, *:before { box-sizing: border-box; } - 배경색 지정 body { background: #d0ddf8; } (2) 얼굴 형태 - .bear 로 400, 400의 공간을 잡고 내부에 .face로 다시 400,400의 공간..