css 관련 질문입니다. 채택완료
http://worldmobile.kr">http://worldmobile.kr
맨 아래쪽 Nexus5 에 hover 를 설정해놓았습니다.
#main_optimus > .is_32:hover {
이와같은 형식으로 설정을 해놓았는데 안쪽으로 선이 표출이 되기는 하나 내부 내용물이 고정이 안되고 안쪽선을 기준으로 움직이게 됩니다.
내용은 움직임없이 겹쳐도 좋으니 border 를 5px로 표출하고싶은데, 어떻게 해야하나요?
답변 2개
저도 fear님처럼 흰색보더를 같은 굵기로 주시라고 하려했는데
hover가 안됐을땐 1px 보더가 있어서 그것도 애매하겠군요;
그럼 일단 일반(#main_optimus > .is_32)에 padding:5px; box-sizing:border-box; 주시고 hover에서 padding:0; 을 줘보세요.
다만 일반에도 box-sizing이 처리될테니 border-right준 부분만큼 줄어들겁니다.
그에 따라서 width값도 1픽셀식 더 줘야겠죠.
.is_32와 .is_32:hover 에 width:290px; 으로 하셔야 할겁니다.
여기까지 적용해보니 오버시에 이미지가 움찔움찔 하는군요.
.is_32 > .is_1a32 > .is_1ab32 에 width:101px; 로 수정하니 잘 되는듯 싶습니다.
그런데.. 소스를 자세히는 보지않은터라 든 궁금점인데요.. 클래스명을 저렇게 숫자별로 다 따로 줘야 할 필요가 있었던건가요?
그냥 클래스명 통일하고 css는 해당클래스 하나에만 주면 되지 않으려나요?
행여 스크립트등에서 쓰느라고 번호가 필요한거라면 class="is_box is_32" 이런식으로 두개를 줘서 대표로 지정되는 is_box 하나에만 css 선언하고 스크립트는 그대로 처리해도 될듯한데..
안에 들어가는 이미지(background)에 대해서만 각각 별도로 선언하고 기본레이아웃은 대표로 선언하는게 수정하기도 편할거 같아서.. 막상 수정하시라고 했는데 수정할게 너무 많아 보여서 괜시리 참견해보았습니다. ^^;
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
어제 3시간동안 골머리싸매면서 고민했던 문제를 단 한번에!
클래스명을 숫자별로 따로준 이유는.. 사실 저도 is_27 정도까지 만들어놓고 기본틀은 그냥 기존꺼 가져다 써도 된다는 생각이 퍼뜩! 들었습니다만..지금까지 만들어놓은게 아깝기도하고.. 귀찮아서요!!..ㅎㅎㅎㅎㅎ
조언 정말로 감사드립니다 ㅠㅠㅠ