로그인

검색

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 사이즈가 원래대로 회복 되었습니다.


라이믹스 팁(90)

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

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views70 Votes0
    Read More
  6. Read More
  7. Read More
  8. 댓글 주소 클립보드에 복사하는 기능 추가하기 10

    Date2021.04.25 Category기능 Views66 Votes0
    Read More
  9. Read More
  10. Read More
  11. Read More
  12. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views48 Votes0
    Read More
  13. Read More
  14. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 17

    Date2021.04.10 Category기능 Views71 Votes0
    Read More
  15. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views63 Votes1
    Read More
  16. 본문 게시글 주소 클립보드 복사 기능 만들기 8

    Date2021.04.06 Category기능 Views127 Votes0
    Read More
  17. Read More
  18. 라이믹스 2.0 회원 서명 높이를 조절 하고 싶다면

    Date2021.03.13 Category기능 Views106 Votes0
    Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Flex 레이아웃 로그인 오류 메시지 안뜨는 문제 해결

    Date2021.01.31 Category오류 Views74 Votes0
    Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Read More
  32. Read More
Board Pagination Prev 1 2 3 Next
/ 3