안녕하세요.
여쭤볼곳이 sir 밖에 없네요 ㅠㅠ
코딩하다보면 border:1px solid #ddd 이런식으로
박스를 감싸는 border 값을 줄때, pc는 width 값을 border 좌우 1px 씩 계산하여
-2 씩 빼서 width 값을 잡아서 정확한 레이아웃을 맞추는데요.
모바일버전 경우,
width:100% 주고 여기서 border:1px solid #ddd 를 주면,
실제영역은 800 인데, 보더값 때문에 802 가 되는데요,
혹시 퍼블리셔나 코더 분들 이럴경우는 어떻게 width값 border 포함 800 에 딱 맞추시나요? ㅠㅠ
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
ysnet
2016-08-04 (목) 12:47:06
box-sizing:border-box;
답변에 대한 댓글 1개
kisiki
2016-08-04 (목) 14:00:03
저같은 경우 가로 정렬 박스는 각각 처리를 합니다.
4개의 가로 정렬 박스가 있다면
Copy
ul>li { width:25%; }ul>li>div { margin:10px; padding:10px; } ul>li>div>p { border:1px #f00 solid; } <ul><li><div><p></p></div></li><li><div><p></p></div></li> <li><div><p></p></div></li> <li><div><p></p></div></li></ul>위 처럼 합니다.
ul>li>div 는 블럭이기 때문에 마진 패딩을 포함해서 꽉 찬 박스를 만들어 주고
ul>li>div>p 여기에서 위의 ul>li>div 마진 패딩을 포함한 꽉 찬 박스입니다.
보더나 마진 패딩값을 빼기도 번거롭고 해서 이런식으로 썼습니다.
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.