- 질문 게시판입니다.
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


먼저 HTML 마크업에 대해 말씀드리자면 이런 작업은 그냥 div만 쭉 나열하셔서 하셔도 됩니다.
아무런 ul li가 의미가 없어요. 전체를 다 합쳐야 하나의 그림으로서 컨텐츠가 되는 것이고, 각각의 요소는 독립된 요소일 뿐이니까요.
풀1, 풀2, 풀3을 목록으로 만들 필요가 없습니다.
포지션 컨트롤하기 위해서 div로 감싸는 정도는 필요에 따라 할 수도 있지만요.

위의 케이스에서 float을 사용하는 건 별로 적절한 방법이 아닌 것 같습니다.
position: relative;
position: absolute;
... 더 보기
먼저 HTML 마크업에 대해 말씀드리자면 이런 작업은 그냥 div만 쭉 나열하셔서 하셔도 됩니다.
아무런 ul li가 의미가 없어요. 전체를 다 합쳐야 하나의 그림으로서 컨텐츠가 되는 것이고, 각각의 요소는 독립된 요소일 뿐이니까요.
풀1, 풀2, 풀3을 목록으로 만들 필요가 없습니다.
포지션 컨트롤하기 위해서 div로 감싸는 정도는 필요에 따라 할 수도 있지만요.

위의 케이스에서 float을 사용하는 건 별로 적절한 방법이 아닌 것 같습니다.
position: relative;
position: absolute;
위의 두가지 포지셔닝을 사용해보세요.

전체를 감싸는 #picture에 relative 포지션을 주고, 나머지 요소는 모두 absolute로 주면 됩니다.
그리고 각 요소에 top, left 값을 사용하여 좌표를 주면 됩니다.
얼그레이
float보다 postition을 사용하려고 했는데
position으로 두는게 더 좋겠네요.
div로 다 감쌌다가 ul로 바꿨는데 그냥 div로 작업하는 것이 더 편하겠네요.
감사합니다!
크크 이런 어이없는 질문에도 친절하게 대답해주셔서 감사합니당:D
세계구조
허허벌판에서 용케 당근을 구했네
얼그레이
크크크크크
absolute 포지션을 사용했을 때 토끼를 앞으로 당겨오는건 z-index 값을 높게 주시면 됩니다.

그와 별개로 눈에 띄는게 하나 더 있어서 말씀드리자면, five_birds.animal, grass1.plant 같은 파일명을 사용하셨는데 별로 좋아보이지 않습니다.
jpg, png, gif같은 원래의 이미지 파일 확장자를 써주시는게 좋겠구요.
파일명을 사용해서 그룹핑을 하고자 하신다면 animal_fivebirds.gif, plant_grass1.gif 와 같은식으로 해주시면 되겠지요.
파일명으로 정렬 했을 때 같은 ... 더 보기
absolute 포지션을 사용했을 때 토끼를 앞으로 당겨오는건 z-index 값을 높게 주시면 됩니다.

그와 별개로 눈에 띄는게 하나 더 있어서 말씀드리자면, five_birds.animal, grass1.plant 같은 파일명을 사용하셨는데 별로 좋아보이지 않습니다.
jpg, png, gif같은 원래의 이미지 파일 확장자를 써주시는게 좋겠구요.
파일명을 사용해서 그룹핑을 하고자 하신다면 animal_fivebirds.gif, plant_grass1.gif 와 같은식으로 해주시면 되겠지요.
파일명으로 정렬 했을 때 같은 성격의 요소들이 서로 모이도록 그룹명의 성격을 띄는 단어를 앞으로 두는게 좋을 수 있습니다.

.animal , .plant 같은 확장자로 바꿔써도 브라우저에서 표시는 되겠지요.
하지만 된다고 해서 그게 좋은건 아닙니다.
애초에 웹표준이란게 부각된 이유도, 사람들이 된다고 해서 아무거나 갖다 썼기 때문이거든요.
웹개발자들은 표준의 중요성에 대한 인식을 기본적으로 갖고 있기 때문에, 특별한 이유 없이 규칙을 깨는 것을 좋게 보지 않습니다.
만약 취업용 포트폴리오에서 이러한 파일명을 썼다면 감점요소가 될겁니다.
얼그레이
얼굴이 단박에 빨개지네요. 혼내주셔서 감사합니다.
아침에 이 그림을 보는 다양한 관점을 다룬 유머글을 보고 한번 상상력을 발휘해서 하면 어떨까 하는 생각에 장난스럽게 올렸던 질문인데 적절치 못했습니다.
앞으로 공부하는 데 더욱 유의하도록 하겠습니다.
정성스럽게 달아주신 덧글에 고개를 들 수가 없네요..
죄송합니다.
혼내는걸로 생각 안하셨으면 좋겠습니다.
면박드리려고 말씀드린건 아니에요.
어디까지나 참고하시라고 말씀드린거니 당당하시면 좋겠습니다.

물론 지적당하는 입장에선 당황스럽거나 창피할 수 있습니다만... 개발자들의 세상에선 이런 지적질이 굉장히 흔합니다. 내 코드가 지적당하는건 나에 대한 비난이 아니니 환영! 이라는 마인드를 가지실 수 있다면 좋습니다. (물론 그게 안돼서 감정상하는 일은 실무에서도 흔합니다)

저한테 죄송할건 더더욱 아니겠구요.
당황스러우셨다면 죄송합니다.
얼그레이
지적당했다는 점에 전혀 기분 상하거나 하지 않았어요!
원채 성격이 낙천적이고 장난치는걸 좋아하다 보니..8^8
시간내서 이렇게 정성스럽게 답해주신 거라곤 생각도 못하고 너무 장난스럽게 \'웃기겠지!흫헿\'거리면서 올렸던 제가 너무 부끄러워서요.. (올렸으면 유게나 올릴걸 하는 후회도 조금..)
오히려 말씀해주신 것을 받아들이며 스스로 돌아볼 수 있었던 것 같습니다.
지금 이미지를 잘라서 작업해보고 있어요.
표준 마크업 준수해서 크로스브라우징 까지 해서 웹으로 띄워보겠습니다 8^8
다음부터는 질문 게시판에 장난 안 칠게요..ㅠㅠ
장난치셔도 괜찮습니다.
그 덕분에 하나 더 배우면 좋은거죠.

네이버에서도 그런거 한적 있어요.
서버에서 확장자 변경 처리해서 웹 url에 .nhn 이 보이도록...

물론 대부분 개발자들의 반응은 뭥미? 였지만요.
얼그레이
일단은..작업 하고 돌아오겠습니다..☆
얼그레이
으..진짜 질문입니다 8^8..
익스 7과 8에서 웹페이지 전체에 회색 border가 적용되서 콘텐츠가 밀리는데
어떻게 해결해야할까요..
화면을 보고 있지 않으니 어떤 증상인지 잘 모르겠네요.
웹페이지 전체에 적용되었다면 body에 스타일이 들어간게 아닌가 싶은데 괄호가 잘 닫혀있나 확인해보시구요.

HTML Validator를 돌려보시면 어떨까 싶네요.
https://validator.w3.org/
얼그레이

파폭에 확장 프로그램을 사용해 validator를 쓰고 있는데, validator에서는 css에 문제가 있다고 뜨네용..
firebug에서는 문제가 없다고 뜨구요!
지금 다른 css작업을 하고 있어서.. 이따 찬찬히 돌려보면서 해볼게요:)
안 되면 들고 오겠습니다+_+
괄호 열고 안닫았는지.. 아니면 여는 괄호 빼먹었는지... 아니면 쉼표를 찍었다던지.. 하는 문법오류들 잘 확인해보세요.
눈부심
이거 웃기는 거였어요?
으크크크크크 까막눈인 저로선 공부 열심히 하시는구나 이 생각만 들었다는 크크.
얼그레이
엇.. 왜 크롬에서 굵기가 얇게나오지../_\
세계구조
div에 border 속성을 준건가요? 그 정도는 조금 다를 수도 있습니다. 브라우저가 해석해서 표현하기 나름이라서요. 나머지는 똑같이 보이네요.
얼그레이
크로스 브라우징이 가장 어려운 것 같아요..ㅠㅠ
간단한 작업이었는데도..!
앞으로 프로젝트 들어가면 얼마나 힘들지 8^8..
네 잘 하셨습니다.
크로스 브라우징 테스트 하시느라 일일이 다 해당브라우저에 열어보셨군요.

사실 크로스브라우징은 표준을 지켜 작업하면 문제가 되는 경우가 많지 않습니다.
크로스 브라우징 문제가 많이 발생한다면 표준을 지키지 않고 작업해서 생기는 문제일 수도 있는거지요.

IE7은 이미 대응하지 않아도 되는 점유율을 가진 브라우저라서. 안보셔도 된다고 생각하구요.
저희 회사는 IE8도 안봅니다. IE9 이상만 지원하고 있어요.

저는 작업할 때 크롬 외의 다른 브라우저 테스트를 잘 하지 않습니다. IE에서도 열어보지 않습니다.
대신 머릿속으로 IE에선 어떻게 보이겠지를 예상하며 작업합... 더 보기
네 잘 하셨습니다.
크로스 브라우징 테스트 하시느라 일일이 다 해당브라우저에 열어보셨군요.

사실 크로스브라우징은 표준을 지켜 작업하면 문제가 되는 경우가 많지 않습니다.
크로스 브라우징 문제가 많이 발생한다면 표준을 지키지 않고 작업해서 생기는 문제일 수도 있는거지요.

IE7은 이미 대응하지 않아도 되는 점유율을 가진 브라우저라서. 안보셔도 된다고 생각하구요.
저희 회사는 IE8도 안봅니다. IE9 이상만 지원하고 있어요.

저는 작업할 때 크롬 외의 다른 브라우저 테스트를 잘 하지 않습니다. IE에서도 열어보지 않습니다.
대신 머릿속으로 IE에선 어떻게 보이겠지를 예상하며 작업합니다.
IE를 많이 경험해보았기 때문에 가능한 것이기도 하지만, 많은 사람들의 증언과는 다르게 IE는 생각보다 그리 까다로운 존재는 아닙니다.

HTML 맨 처음을 다음과 같이 시작하시길 추천합니다.

<!DOCTYPE HTML>
<html>
<head>

<!DOCTYPE HTML> 이 부분을 HTML5 DTD라고 하는데요.
DTD를 무엇으로 하느냐는 중요한 부분입니다.
이걸 잘 셋팅하지 않고 작업하면 크로스브라우징 문제의 원인이 될 수 있는데요.
그냥 HTML5 DTD로 하시면 아무 문제가 없습니다.

어떤 DTD를 썼을 때 브라우저가 어떤 렌더링 모드를 선택하는지는 아래의 문서에서 볼 수 있습니다.
https://en.wikipedia.org/wiki/Quirks_mode
딴거 보실 필요없이 맨 밑의 표만 보시면 됩니다.

S는 Standard(표준모드), A는 Almost Standard, Q는 Quirks mode인데요.
S와 A는 유사합니다. 하지만 절대로 브라우저 렌더링 모두가 Q로 가서는 안됩니다.

지금 사용하신 DTD도 큰 문제는 없네요.
하지만 매번 저 문서를 찾아서 브라우저 렌더링 모드를 확인하실게 아니라면 HTML5 DTD를 쓰시는 편이 훨씬 좋습니다.
얼그레이
아직 배우고 있는 입장이라 익스7~edge, 크롬, 파이어폭스, 오페라, 사파리까지 맞춰보려고 하고 있어요.
toby님께서는 경험이 많으시지만 저는 없는 편이라 여러모로 고민하는 것도 좋은 것 같아요!
그리고 해결했을 때의 쾌감이란..!
학원이 4시에 끝나는데, 8시까지 문 열어서 공부하다 오거든요.
첨에는 잘 못하니까 억지로라도 남아서 하고 가자는 마음으로 했는데, 이제는 너무 재밌어요..!
8시 되면 집 가는게 아쉬워서..학원 근처에서 살면 좋겠다는 생각도 하고, 교실 안에서 잤으면 싶기도 하구..!!
오늘은 편의점에... 더 보기
아직 배우고 있는 입장이라 익스7~edge, 크롬, 파이어폭스, 오페라, 사파리까지 맞춰보려고 하고 있어요.
toby님께서는 경험이 많으시지만 저는 없는 편이라 여러모로 고민하는 것도 좋은 것 같아요!
그리고 해결했을 때의 쾌감이란..!
학원이 4시에 끝나는데, 8시까지 문 열어서 공부하다 오거든요.
첨에는 잘 못하니까 억지로라도 남아서 하고 가자는 마음으로 했는데, 이제는 너무 재밌어요..!
8시 되면 집 가는게 아쉬워서..학원 근처에서 살면 좋겠다는 생각도 하고, 교실 안에서 잤으면 싶기도 하구..!!
오늘은 편의점에 갔는데 와플 모양의 과자가 있길래
저건 테이블인데 보더를 어떻게 줘야하나 순간 고민하는게 웃기기도 하고 재밌기도 하고..
선생님께서 전에 한창 푹 빠져있으면 아파트 건물을 보면서도 테이블 구조 짜는 연습 한다고 하시더니 그 말이 맞더라구요. 흐흐흐
일케 막 너무 재밌어하면 다들 너무 질겁하는 거 같아서 조용히 있긴 한데..
자바 스크립트는 한번 놓친 뒤로는 너무 어려워서.. 주말에 보충해서 공부해야겠다고 생각하는데, 할 일이 너무 많네요..8^8..
공부하고 싶어요..!
이렇게 친절하게 설명해주시는 분들도 너무 감사하고 좋네요. 진짜 홍차넷 너무 좋아요..8^8..
늘 감사합니다 ㅠㅠ
라이카
너무 귀여운데요? 직접 그리신 이미지인가요? 크크크
얼그레이
앗 아니에요!!
되게 유명한 시리즌데 나중에 유게에 올려볼게요!
토끼 망했으면...
얼그레이
토끼는 죄가없어요..8^8
목록
번호 제목 이름 날짜 조회 추천
공지 질문 게시판 이용 규정 11 토비 15/06/19 25360 4
16888 문화/예술무성애적 성향과 무성애자 17 + [익명] 25/07/22 497 0
16887 체육/스포츠여름에 하는 운동 6 송꽃분 25/07/22 205 0
16886 경제부동산 매매시 판매대금을 올려서 계약요구를 합니다 15 + DogSound-_-* 25/07/21 638 0
16885 기타서울 및 고양 인근 돼지고기집 추천 바랍니다. 5 니르바나 25/07/21 328 0
16884 IT/컴퓨터호옥시 speechify 레퍼런스코드 있으신분 계십니가..? 3 25/07/21 230 0
16883 여행여행용 트레블로그 체크카드를 하나 만드려 합니다 11 Cascade 25/07/21 540 0
16882 기타정신과를 꾸준히 다니면서 +암보험 등 가입한 경우 있으신가요? 2 [익명] 25/07/20 409 0
16881 기타스벅 25.7.20까지 라코스테수건 프리퀀시 전국 증정품획득 불가능한가요? 7 mathematicgirl 25/07/20 444 0
16880 기타지방소득세가 무엇인지요..? 11 홍당무 25/07/19 660 0
16879 기타인터넷 약정기간 기망, 민원 어디로 넣어야 하나요 2 방사능홍차 25/07/18 443 0
16878 의료/건강물리치료기 추천부탁드립니다 1 잔고부자 25/07/18 219 0
16877 IT/컴퓨터휴대 전화를 바꿔야 할 시기가 온 걸까요? 16 알로에비누 25/07/18 539 0
16876 기타학연에 의한 청탁, 어떻게 끊어내시나요? 6 [익명] 25/07/18 626 0
16875 여행오늘 철원에서 래프팅 할 수 있을까요? 15 오쇼 라즈니쉬 25/07/18 558 0
16874 법률세금 경정청구 방법과 세무사 업무 비용 6 [익명] 25/07/17 417 0
16873 의료/건강면역력회복! 원기충전! 하는 꿀팁 있을까요? 27 오리꽥 25/07/17 620 0
16872 게임쿠팡에서나 닌텐도 공홈 이나 마리오카트 스위치2 가격 동일한데 무슨 차이인가요? 2 mathematicgirl 25/07/16 508 0
16871 여행맛집 추천 부탁드립니다.(서울 지도첨부) 23 연구개발 25/07/15 574 0
16870 체육/스포츠고척돔 주차 질문 9 blu 25/07/15 344 0
16869 기타밥솥 질문입니다 6 김치찌개 25/07/15 291 0
16867 연애정치인 자녀와의 결혼 어떻게 생각하시는지요 30 [익명] 25/07/15 1132 0
16866 과학천문학 공부 하신 분 있으시면 용어 질문 드립니다. 3 mathematicgirl 25/07/15 336 0
16863 IT/컴퓨터노션 수식 세우기 11 OshiN 25/07/14 440 0
16862 IT/컴퓨터핸드폰 해킹이나 악성코드가 깔린 걸까요? 조언 부탁드립니다. ㅠㅠ 2 VinHaDaddy 25/07/13 473 0
목록

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

댓글