실례지만 코딩 질문 드려도 될까요?
본문
안녕하세요.
여쭤볼곳이 sir 밖에 없네요 ㅠㅠ
코딩하다보면 border:1px solid #ddd 이런식으로
박스를 감싸는 border 값을 줄때, pc는 width 값을 border 좌우 1px 씩 계산하여
-2 씩 빼서 width 값을 잡아서 정확한 레이아웃을 맞추는데요.
모바일버전 경우,
width:100% 주고 여기서 border:1px solid #ddd 를 주면,
실제영역은 800 인데, 보더값 때문에 802 가 되는데요,
혹시 퍼블리셔나 코더 분들 이럴경우는 어떻게 width값 border 포함 800 에 딱 맞추시나요? ㅠㅠ
답변 2
box-sizing:border-box;
달콤별님 감사합니다. ^^ 좋은 하루 되세요~
저같은 경우 가로 정렬 박스는 각각 처리를 합니다.
4개의 가로 정렬 박스가 있다면
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 마진 패딩을 포함한 꽉 찬 박스입니다.
보더나 마진 패딩값을 빼기도 번거롭고 해서 이런식으로 썼습니다.
kisiki 님 말씀 감사합니다. ^^
답변을 작성하시기 전에 로그인 해주세요.