로그인

검색

Extra Form
추천지수 6

제가 사용하는 레이아웃의 경우 레이아웃 외 다른 자료들에서 input 입력창의 크기나 혹은 box 크기가 정상적이지 않은 경우가 발생합니다.

 

이유는 레이아웃에서 지정된 box-sizing 때문인데요.

 

border-box.jpg

 

이렇게 다른 자료의 박스가 세로가 유난히 작습니다. 

 

레이아웃에 

 

* {

box-sizing: border-box;

 

위와 같이 모든 곳에 box-sizing: border-box; 가 적용되도록 지정되어 있어서 다른 모든 곳이 저것이 적용되어 버립니다.

 

각 자료별로 박스의 가로,세로 크기를 입력할때 저 기준이 아닌 것들이 있을 수 있는데 레이아웃에서 모든 요소에 적용되도록 해버리니 의도된 박스크기가 아닌 크기의 박스가 출력되어 버리는 것 입니다.

 

 

레이아웃의 box-sizing: border-box; 를 적용하고 싶은 곳을 개별적으로 지정해서 모든 요소에 지정되지 않도록 해야 하는데 이걸 다시 수정하기가 좀 어려워서 약간의 트릭으로 레이아웃과 관련이 적은 컨텐츠가 출력되는 부부분을 정확히 구분해서 해당 영역(div)에는 box-sizing: border-box; 가 예외가 되도록 처리해 주어 회피했습니다.

 

컨텐츠가 출력되는 곳에 저는 div를 임의로 추가해서 감싼 것이 있어서 거기에 class를 추가해주고 해당 class를 제외할 수 있도록 해봤습니다.

 

*:not(.content-area *) {
box-sizing: border-box;
}

 

위와 같이 해 주니 content-area 쪽에는 box-sizing: border-box; 가 적용되지 않아 다른 자료들이 원래 가졌던 기준 그대로 가로,세로폭이 출력이 되게 되었습니다.

 

 

 

border-box1.jpg

 

게시판 설정, 회원가입 등등... 너무 많은 곳들의 box 사이즈가 원래대로 회복 되었습니다.

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
4 추천
Atachment
첨부 '0'

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. 여태 몰랐던 라이믹스의 $document, $oDocument 게시글 정보

    Date2021.04.29 Category기타 Views379 Votes3
    Read More
  17. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views245 Votes4
    Read More
  18. XE 레이아웃 메뉴에 폰트어썸이나 XEICON을 출력하기 3

    Date2020.07.20 Category기타 Views337 Votes3
    Read More
Prev 1 Next
/ 1