적용된 스타일이 분명 같은데, width가 다르게 나오는건 왜그럴까요;;

Question

따로 스타일 추가한거도 없고, vuetify 소스 그대로 사용중인 상황이구요. v-radio-group label 표시를 위해 사용되는 legend 태그가 한쪽은 width가 28정도로 나오는데 (이게 정상입니다.)다른 한쪽은 부모와 사이즈를 상속받아서 훨씬 큰 사이즈로 나오네요.그때문에 라디오 버튼 위로 라벨이 출력되는 현상이 생깁니다.스타일 적용되는거 하나씩 비교해봐도 동일하게 적용되있는데,코드는 이상이 없는데 width가 다르게 나올 수가 있나요?이해가 안되네요.뭐가 문제인지 모르겠어서, vuetify 버전도 똑같이 맞춰봤는데도 그러네요; 한쪽은 개발중인 코드 중 일부라, 새로 vuetify 환경 구축한 곳에서는 동일한 코드 돌리면 정상적으로 나오네요. 이럴때 어떤식으로 디버깅 해봐야되나요?

초보자1212 · Accepted Answer

css 는 다른 부모 자식 형제 관계가 어떤식으로 이뤄졌냐에 따라서 결과가 다를 수 있습니다width: 28px 이렇게 고정으로 들어가 있는데 다른거라면 box-sizing 부터 다른 요소를 점검을 해보시고요,개발자도구를 열어서 width: 28px 이 실제로 적용되고 있는지도 확인해보시면 좋겠습니다width 를 따로 설정하지 않아서 자동으로 할당되도록 해놨으면 문제가 더 복잡해지는데 그 때는 위에서언급한것처럼 부모/자식/형제의 박스모델이 뭐냐를 점검하셔야합니다

서예ㅎ · Answer

부모가 width 100%고 따로 width 선언된게 없으니 100%로 상속받았습니다.고정값은 아니구요.부모 display 모델은 flex이구요. 형제들도 flex입니다. width가 길게 나오는 태그에 강제로 width px지정해주면 정상적으로 나옵니다.아무래도 부모 width를 받아오는거 같은데, 같이 width 설정 안해놨는데 한쪽은 부모랑 사이즈가 같고, 한쪽은 다르네요. 형제들은 그리고 다 사이즈가 똑같이 작아서 영향이 없을것 같아요. computed style 비교도 해보니 perspective-origin 18px 338.5px 10px transform-origin 18px 338.5px 10px width 36px 677pxinline-size 36px 677px 이렇게 다르네요. 아 , 찾았습니다._reboot.scss 이 파일이 뭔지 모르겠는데 여기서 width 선언해주는 부분이 있는데 그거 때문에 값이 이상하게 넘오네요..width를 100%로 주네요. 그거 지우니 정상적으로 출력됩니다. 간단하게는 legend

서예ㅎ · Answer

찾았네요._reboot.scss 파일은 bootstrap 파일인데, django 쪽에서 crispy form을 이용중에 cdn으로 bootstrap 파일을 가져와서 쓰고 있었습니다.해당 파일을 유저 인증 쪽에만 적용되게끔 해놨어야했는데, base html 코드에 넣어놔서 vuetify파일이랑 css가 겹쳐서 생기는 문제였네요.

적용된 스타일이 분명 같은데, width가 다르게 나오는건 왜그럴까요;;

3개의 답변

Q&A 목록