목록HTML (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
[HTML] html tutorial 쿡북

이 소스는 W3SCHOOL의 소스를 실습/변형한 것입니다. 0. 목표 - html 쿡북 제작 1. 코드 1) 기본 형태 내용 2) headings - h1부터 h6까지 존재 This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 3) paragraph This is a paragraph. This is another paragraph. 4) link HTML Links HTML links are defined with the a tag: This is a link 5) image HTML Images HTML images are defined with the img t..
ComputerLanguage_Program/HTML 2020. 4. 19. 02:00
[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