- 질문 게시판입니다.
| 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;} #picture #earth{background:url(earth/field.earth)no-repeat 0 0;height:240px;position:relative;} #picture #earth .plant .right{position:absolute;right:20px;bottom:84px;float:left;overflow:hidden;width:165px;height:210px;} </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;
... 더 보기
아무런 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 값을 사용하여 좌표를 주면 됩니다.
아무런 ul li가 의미가 없어요. 전체를 다 합쳐야 하나의 그림으로서 컨텐츠가 되는 것이고, 각각의 요소는 독립된 요소일 뿐이니까요.
풀1, 풀2, 풀3을 목록으로 만들 필요가 없습니다.
포지션 컨트롤하기 위해서 div로 감싸는 정도는 필요에 따라 할 수도 있지만요.
위의 케이스에서 float을 사용하는 건 별로 적절한 방법이 아닌 것 같습니다.
position: relative;
position: absolute;
위의 두가지 포지셔닝을 사용해보세요.
전체를 감싸는 #picture에 relative 포지션을 주고, 나머지 요소는 모두 absolute로 주면 됩니다.
그리고 각 요소에 top, left 값을 사용하여 좌표를 주면 됩니다.
absolute 포지션을 사용했을 때 토끼를 앞으로 당겨오는건 z-index 값을 높게 주시면 됩니다.
그와 별개로 눈에 띄는게 하나 더 있어서 말씀드리자면, five_birds.animal, grass1.plant 같은 파일명을 사용하셨는데 별로 좋아보이지 않습니다.
jpg, png, gif같은 원래의 이미지 파일 확장자를 써주시는게 좋겠구요.
파일명을 사용해서 그룹핑을 하고자 하신다면 animal_fivebirds.gif, plant_grass1.gif 와 같은식으로 해주시면 되겠지요.
파일명으로 정렬 했을 때 같은 ... 더 보기
그와 별개로 눈에 띄는게 하나 더 있어서 말씀드리자면, 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 같은 확장자로 바꿔써도 브라우저에서 표시는 되겠지요.
하지만 된다고 해서 그게 좋은건 아닙니다.
애초에 웹표준이란게 부각된 이유도, 사람들이 된다고 해서 아무거나 갖다 썼기 때문이거든요.
웹개발자들은 표준의 중요성에 대한 인식을 기본적으로 갖고 있기 때문에, 특별한 이유 없이 규칙을 깨는 것을 좋게 보지 않습니다.
만약 취업용 포트폴리오에서 이러한 파일명을 썼다면 감점요소가 될겁니다.
그와 별개로 눈에 띄는게 하나 더 있어서 말씀드리자면, five_birds.animal, grass1.plant 같은 파일명을 사용하셨는데 별로 좋아보이지 않습니다.
jpg, png, gif같은 원래의 이미지 파일 확장자를 써주시는게 좋겠구요.
파일명을 사용해서 그룹핑을 하고자 하신다면 animal_fivebirds.gif, plant_grass1.gif 와 같은식으로 해주시면 되겠지요.
파일명으로 정렬 했을 때 같은 성격의 요소들이 서로 모이도록 그룹명의 성격을 띄는 단어를 앞으로 두는게 좋을 수 있습니다.
.animal , .plant 같은 확장자로 바꿔써도 브라우저에서 표시는 되겠지요.
하지만 된다고 해서 그게 좋은건 아닙니다.
애초에 웹표준이란게 부각된 이유도, 사람들이 된다고 해서 아무거나 갖다 썼기 때문이거든요.
웹개발자들은 표준의 중요성에 대한 인식을 기본적으로 갖고 있기 때문에, 특별한 이유 없이 규칙을 깨는 것을 좋게 보지 않습니다.
만약 취업용 포트폴리오에서 이러한 파일명을 썼다면 감점요소가 될겁니다.
화면을 보고 있지 않으니 어떤 증상인지 잘 모르겠네요.
웹페이지 전체에 적용되었다면 body에 스타일이 들어간게 아닌가 싶은데 괄호가 잘 닫혀있나 확인해보시구요.
HTML Validator를 돌려보시면 어떨까 싶네요.
https://validator.w3.org/
웹페이지 전체에 적용되었다면 body에 스타일이 들어간게 아닌가 싶은데 괄호가 잘 닫혀있나 확인해보시구요.
HTML Validator를 돌려보시면 어떨까 싶네요.
https://validator.w3.org/
네 잘 하셨습니다.
크로스 브라우징 테스트 하시느라 일일이 다 해당브라우저에 열어보셨군요.
사실 크로스브라우징은 표준을 지켜 작업하면 문제가 되는 경우가 많지 않습니다.
크로스 브라우징 문제가 많이 발생한다면 표준을 지키지 않고 작업해서 생기는 문제일 수도 있는거지요.
IE7은 이미 대응하지 않아도 되는 점유율을 가진 브라우저라서. 안보셔도 된다고 생각하구요.
저희 회사는 IE8도 안봅니다. IE9 이상만 지원하고 있어요.
저는 작업할 때 크롬 외의 다른 브라우저 테스트를 잘 하지 않습니다. IE에서도 열어보지 않습니다.
대신 머릿속으로 IE에선 어떻게 보이겠지를 예상하며 작업합... 더 보기
크로스 브라우징 테스트 하시느라 일일이 다 해당브라우저에 열어보셨군요.
사실 크로스브라우징은 표준을 지켜 작업하면 문제가 되는 경우가 많지 않습니다.
크로스 브라우징 문제가 많이 발생한다면 표준을 지키지 않고 작업해서 생기는 문제일 수도 있는거지요.
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를 쓰시는 편이 훨씬 좋습니다.
크로스 브라우징 테스트 하시느라 일일이 다 해당브라우저에 열어보셨군요.
사실 크로스브라우징은 표준을 지켜 작업하면 문제가 되는 경우가 많지 않습니다.
크로스 브라우징 문제가 많이 발생한다면 표준을 지키지 않고 작업해서 생기는 문제일 수도 있는거지요.
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시 되면 집 가는게 아쉬워서..학원 근처에서 살면 좋겠다는 생각도 하고, 교실 안에서 잤으면 싶기도 하구..!!
오늘은 편의점에... 더 보기
toby님께서는 경험이 많으시지만 저는 없는 편이라 여러모로 고민하는 것도 좋은 것 같아요!
그리고 해결했을 때의 쾌감이란..!
학원이 4시에 끝나는데, 8시까지 문 열어서 공부하다 오거든요.
첨에는 잘 못하니까 억지로라도 남아서 하고 가자는 마음으로 했는데, 이제는 너무 재밌어요..!
8시 되면 집 가는게 아쉬워서..학원 근처에서 살면 좋겠다는 생각도 하고, 교실 안에서 잤으면 싶기도 하구..!!
오늘은 편의점에... 더 보기
아직 배우고 있는 입장이라 익스7~edge, 크롬, 파이어폭스, 오페라, 사파리까지 맞춰보려고 하고 있어요.
toby님께서는 경험이 많으시지만 저는 없는 편이라 여러모로 고민하는 것도 좋은 것 같아요!
그리고 해결했을 때의 쾌감이란..!
학원이 4시에 끝나는데, 8시까지 문 열어서 공부하다 오거든요.
첨에는 잘 못하니까 억지로라도 남아서 하고 가자는 마음으로 했는데, 이제는 너무 재밌어요..!
8시 되면 집 가는게 아쉬워서..학원 근처에서 살면 좋겠다는 생각도 하고, 교실 안에서 잤으면 싶기도 하구..!!
오늘은 편의점에 갔는데 와플 모양의 과자가 있길래
저건 테이블인데 보더를 어떻게 줘야하나 순간 고민하는게 웃기기도 하고 재밌기도 하고..
선생님께서 전에 한창 푹 빠져있으면 아파트 건물을 보면서도 테이블 구조 짜는 연습 한다고 하시더니 그 말이 맞더라구요. 흐흐흐
일케 막 너무 재밌어하면 다들 너무 질겁하는 거 같아서 조용히 있긴 한데..
자바 스크립트는 한번 놓친 뒤로는 너무 어려워서.. 주말에 보충해서 공부해야겠다고 생각하는데, 할 일이 너무 많네요..8^8..
공부하고 싶어요..!
이렇게 친절하게 설명해주시는 분들도 너무 감사하고 좋네요. 진짜 홍차넷 너무 좋아요..8^8..
늘 감사합니다 ㅠㅠ
toby님께서는 경험이 많으시지만 저는 없는 편이라 여러모로 고민하는 것도 좋은 것 같아요!
그리고 해결했을 때의 쾌감이란..!
학원이 4시에 끝나는데, 8시까지 문 열어서 공부하다 오거든요.
첨에는 잘 못하니까 억지로라도 남아서 하고 가자는 마음으로 했는데, 이제는 너무 재밌어요..!
8시 되면 집 가는게 아쉬워서..학원 근처에서 살면 좋겠다는 생각도 하고, 교실 안에서 잤으면 싶기도 하구..!!
오늘은 편의점에 갔는데 와플 모양의 과자가 있길래
저건 테이블인데 보더를 어떻게 줘야하나 순간 고민하는게 웃기기도 하고 재밌기도 하고..
선생님께서 전에 한창 푹 빠져있으면 아파트 건물을 보면서도 테이블 구조 짜는 연습 한다고 하시더니 그 말이 맞더라구요. 흐흐흐
일케 막 너무 재밌어하면 다들 너무 질겁하는 거 같아서 조용히 있긴 한데..
자바 스크립트는 한번 놓친 뒤로는 너무 어려워서.. 주말에 보충해서 공부해야겠다고 생각하는데, 할 일이 너무 많네요..8^8..
공부하고 싶어요..!
이렇게 친절하게 설명해주시는 분들도 너무 감사하고 좋네요. 진짜 홍차넷 너무 좋아요..8^8..
늘 감사합니다 ㅠㅠ
| 목록 |
|
