실례지만 코딩 질문 드려도 될까요?

실례지만 코딩 질문 드려도 될까요?

QA

실례지만 코딩 질문 드려도 될까요?

본문

안녕하세요.

 

여쭤볼곳이 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 마진 패딩을 포함한 꽉 찬 박스입니다.

 

보더나 마진 패딩값을 빼기도 번거롭고 해서 이런식으로 썼습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 21
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT