css깨짐

조회수 2048회

웹창 상단에 봤던 화면을 10개정도 네모난 탭처럼 쌓이는 화면인데

                                    ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ

이탭들이 해상도가 작은 화면이나 웹창크기를 줄이면 탭이 살짝밑으로 깨지는 현상이있습니다. 어떤해결방법이있을까요...

1 답변

  • 작성하신 코드에 따라 경우가 다를것 같아요. 1. 각 탭에 width를 px등과 같은 값으로 설정을 했으면, 각각의 탭이 그 싸이즈 만큼의 width를 차지하기 때문에, 두줄로 생기는 경우가 있습니다.

    탭이 10개니까, css 스타일에서 이런식으로 주는 것이 어떨까 생각 되요. 이 때, 마진이나 패딩에 따라 10%를 할지라도, 두줄이 생길 가능성이 있으니, 주의하세요.

    width:10%;
    

    여기에 제가 간단히 만든 예제가 있습니다. https://jsfiddle.net/arclien/m87rfeu0/1/

    width:10%; 를 적용하면, 브라우저 싸이즈가 줄어도, 10% 비율로 리사이즈.

    width:100px;을 적용하면, 브라우저 싸이즈가 줄어도, 항상 100px유지

    html meta tag or javascript를 통해서, 창 사이즈가 특정 픽셀 이하로 줄 경우, 리사이즈를 하지 않도록 하는 방법도 괜찮을 것 같습니다.

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.