- 질문 게시판입니다.
Date 15/11/06 09:12:47
Name   얼그레이
File #1   rabbit.png (75.1 KB), Download : 4
File #2   markup.png (100.0 KB), Download : 5
Subject   css 질문입니다.




css 작업중인데 막혀서 질문드립니다.

이 css 작업을 어떻게 해야 토끼가 앞으로 오나요?
일단 항목으로 작업해서 float를 띄우긴 했는데.. 그냥 이미지를 하나로 자르는게 더 좋을까요?

<ul class="animal">
                                <li class="rabit" src="earth/rabbit.animal" alt="토끼" />
                                <li class="carrot" src="earth/carrot.food" alt="당근" />
</ul>

밑에 문서 첨부합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>rabbit and landscape</title>
        <style type="text/css">
                body{width:580px;height:450px;}
                #picture {width:573px;height:432px;border:2px solid #000;overflow:hidden;}
                #picutre #sky .animal{float:right;width:180px;height:150px;}
                #picture #earth{background:url(earth/field.earth)no-repeat 0 0;height:240px;position:relative;}
                #picture #earth .aniaml{position:absolute;left:208px;bottom:44px;}
                #picture #earth .aniaml li{float:left;}
                #picture #earth .plant .left{position:absolute;left:50px;bottom:84px;}
                #picture #earth .plant .right{position:absolute;right:20px;bottom:84px;float:left;overflow:hidden;width:165px;height:210px;}
                #picture #earth .plant .right .tree{float:left;width:20px;}
                #picture #earth .water{position:absolute;bottom:0;left:0;}
                #picture #earth .plant{position:absolute;bottom:0;right:0;}
                #picture #earth .plant li{float:left;letter-spacing:-5px;}
                #copyright{display:none;}
        </style>
</head>
<body>
        <div id="picture">
                <div id="sky">
                        <h1><img src="sky/red_sun.light" alt="sun" /></h1>
                        <div class="animal">
                                <img src="bird/five_birds.animal" alt="독수리오형제" />
                        </div>
                </div>
                <div id="earth">
                        <ul class="animal">
                                <li class="rabit" src="earth/rabbit.animal" alt="토끼" />
                                <li class="carrot" src="earth/carrot.food" alt="당근" />
                        </ul>
                        <div class="plant">
                                <div class="left">
                                        <img src="tree/tree1.plant" alt="나무" />
                                </div>
                                <div class="right">
                                        <img src="tree/two_tree.plant" width=165 height=210 alt="나무" />
                                        <img class="tree" src="tree/trees.plant" alt="나무" />
                                </div>
                        </div>
                        <div class="water">
                                <img src="water/river.water" alt="강" />
                        </div>
                        <ul class="plant">
                                <li><img src="tree/grass1.plant" alt="풀1" /></li>
                                <li><img src="tree/grass2.plant" alt="풀2" /></li>
                                <li><img src="tree/grass3.plant" alt="풀3" /></li>
                        </ul>
                </div>
                <div id="copyright">
                        <p>얼그레이</p>
                </div>
        </div>
</body>
</html>



0


목록
번호 제목 이름 날짜 조회 추천
13039 기타chancellery 어떻게 번역하나요? 11 라싸 22/03/01 3362 0
5623 의료/건강cis-ab형 혈액형은 수술시 검사에도 잘 나타나나요? 13 [익명] 18/10/10 3181 0
14236 기타cjone, 해피포인트, L.point 가 함께 적립/사용되는 카드가 있을지요...? 5 홍당무 22/12/08 2213 0
3718 기타CMA 통장 질문입니다 2 김치찌개 17/11/21 2955 0
2257 IT/컴퓨터CPU 발열 문제입니다. 6 충전기 17/02/05 4919 0
10791 IT/컴퓨터cpu 쉽게이해시켜준다는 인터넷 글 아시는분 계신가얌? 5 비얌 21/01/09 3066 0
10065 IT/컴퓨터cpu 오버클럭 된건가요 ..? 3 우가 20/09/05 4469 0
1069 기타crooked는 어떻게 쓰는 단어인가요? 7 리틀미 16/05/11 5504 0
15804 의료/건강CRP수치가 높으면 많이 위험한가요?? 2 Broccoli 24/04/28 1504 0
5494 IT/컴퓨터css 질문드립니다. 9 기쁨평안 18/09/20 2849 0
502 IT/컴퓨터css 질문입니다! 2 얼그레이 15/11/18 2898 0
425 IT/컴퓨터css 질문입니다. 25 얼그레이 15/11/06 3930 0
341 IT/컴퓨터CSS 질문입니다..! 4 얼그레이 15/10/08 2776 0
521 IT/컴퓨터css2 질문입니다. 3 얼그레이 15/11/23 2870 0
367 IT/컴퓨터css에서 테이블 보더 주는데 공간이 생겨요 12 얼그레이 15/10/22 3338 0
9740 IT/컴퓨터Ctrl키를 누르면 볼륨조절창이 뜹니다. 1 [익명] 20/07/09 2773 0
2946 기타C급 어음 할인율 9 아침 17/06/23 3136 0
6984 IT/컴퓨터C언어 관련 책 추천 부탁드립니다. 18 듣보잡3 19/04/19 4071 0
6883 IT/컴퓨터C언어는 어떻게 만들어졌나요? 30 Cascade 19/04/02 4893 0
900 IT/컴퓨터DAC 설정에 대해서 4 OshiN 16/03/10 6696 0
10505 진로Data 분야로 취업시 석박사 필수이죠? 17 NIKES 20/11/26 4263 0
8935 의료/건강DayQuil/NyQuil이 얼마나 좋은 약인가요? 3 나림 20/03/09 4415 0
12903 IT/컴퓨터db 캐릭터셋이 utf8mb4 으로 안바뀝니다 7 토비 22/01/28 3398 0
14810 IT/컴퓨터DC(?) 멀티 어뎁터가 있을까요? 3 dongri 23/05/13 1659 0
11417 문화/예술DC에서 놀림받던 작가 9 하트필드 21/04/24 4355 0
목록

+ : 최근 2시간내에 달린 댓글
+ : 최근 4시간내에 달린 댓글

댓글