css 관련 질문입니다.
본문
맨 아래쪽 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)에 대해서만 각각 별도로 선언하고 기본레이아웃은 대표로 선언하는게 수정하기도 편할거 같아서.. 막상 수정하시라고 했는데 수정할게 너무 많아 보여서 괜시리 참견해보았습니다. ^^;
완벽합니다! 감사합니다 ㅠㅠㅠㅠㅠ
어제 3시간동안 골머리싸매면서 고민했던 문제를 단 한번에!
클래스명을 숫자별로 따로준 이유는.. 사실 저도 is_27 정도까지 만들어놓고 기본틀은 그냥 기존꺼 가져다 써도 된다는 생각이 퍼뜩! 들었습니다만..지금까지 만들어놓은게 아깝기도하고.. 귀찮아서요!!..ㅎㅎㅎㅎㅎ
조언 정말로 감사드립니다 ㅠㅠㅠ
border style이 바깥쪽으로 생겨서 생기는 문제 같은데요.
1. hover 되기 전, 미리 안보이는 선(#fff) 하얀색으로 미리 지정해 놓고 hover 했을 때 바뀌도록 하는 것도 하나의 방법이고요.
2. 평소이미지에 보더를 투명으로 주고 오버할때 색깔을 바꾸게 하는것도 방법입니다.
