네이버웹툰 사이트 클론코딩 중 예상치못한 문제가 발생했습니다.
문제 발생: 화면크기에 넘친 padding
웹사이트가 화면크기에 맞게 조절되고 좌우 여백이 들어간 모습을 예상했으나, 하단에 스크롤 바가 생기며 패딩이 넘치게 적용된 모습입니다. 부모 요소들도 width 값을 100vw 으로 지정했으며, padding은 해당 header 컴포넌트 root html 요소에 padding: 0 2rem 을 적용한 상태입니다.
/*오류난 코드*/
.wrapper{
width:100vw;
height: auto;
padding: 0 2rem;
/* box-sizing: border-box; */
border: 1px solid red;
}//jsx
//오류난 코드
import React from 'react';
import Wrapper from './helper/Wrapper';
import BrandBarLeft from './header-detail-component/BrandBarLeft';
import BrandBarRight from './header-detail-component/BrandBarRight';
import styled from 'styled-components';
const Container =styled(Wrapper)`
display: flex;
justify-content: space-between;
width:100vw;
`;
const Header = () => {
return (
<Container>
<BrandBarLeft />
<BrandBarRight />
</Container>
);
};
export default Header;문제원인: 박스 width값은 padding 값이 기본적으로 포함되지 않습니다.
기본적으로 block 의 width 값은 정확히 콘텐츠 영역의 크기를 의미합니다. 그래서 padding(안쪽 여백) 과 border(테두리) 를 포함하지 않습니다. 그래서 width값이 100px 로 작성해도 padding 값 20px과 같이 설정해줬다면 화면에 보이는 값은 100px + 좌우 여백(20px+20px) = 140px 으로 보여집니다.
따라서 with: 100vw 와 padding : 0 2rem 을 같이 적용한다면 실제로는 100vw + 2rem +2rem 값이 보여져서 화면이 넘치게 되는 모습으로 적용된 겁니다.
문제 해결: box-sizing :border-box;
박스 사이즈을 지정해줄 때 border 과 패딩을 포함한 값으로 적용한다는 뜻으로 box-sizing: border-box;를 추가로 적용해주면 해결됩니다.
/*잘 동작하는 코드*/
.wrapper{
width:100vw;
height: auto;
padding: 0 2rem;
box-sizing: border-box;
border: 1px solid red;
}아득한 옛날에 css를 공부해 맛있게 다 까먹은 기념으로 헷갈리는 css 개념을 정리했습니다.
기억해야하는 css 개념 정리
block 과 inline
1. 블럭 요소
- 기억에 잘 안나는 블럭요소 종류: p h1
- width 값의 디폴트 값은 100%; height:0;으로 시작합니다.
- 크기를 width 속성과 height 속성으로 지정할 수 있습니다.
2. 인라인 요소
- 기억에 잘 안남는 인라인요소 종류: label
- 필요한 만큼의 너비만 사용합니다.
- 크기를 지정할 수 없습니다. width 속성과 height 속성 적용해도 적용 x
- 디폴트 값은 width: 0; height:0;으로 시작합니다.
rest.css
브라우저에서 코드를 실행해보면 사용자가 특정 태그의 css을 작성하지 않았는 데도 기본적으로 css가 적용된 모습을 볼 수 있습니다. 이는 웹브라우저 마다 default 값으로 스타일이 적용되었기 때문인데 원래 사용자 편의를 위해서 적용된 것이지만 사용자가 예측할 수 없는 css가 적용되는 꼴이 되어 오히려 다소 불편함을 겪습니다. 그래서 대부분의 사람들이 기본적으로 적용된 css 를 리셋시키는 작업을 선행하는 데 리셋한 코드만 작성된 파일을 rest.css 파일이라고 부릅니다.
/* 흔히 사용되는 리셋코드*/
*{
margin:0;
padding:0;
box-sizing:border-box;
list-style:none;
}