1. Problem
html/css 를 사용하면서 자식 html tag 가 부모 tag 를 크기(width)를 무시하고 100% width 크기를 주고 싶은 상황이 있습니다. 부모 width 가 100% 가 아닌 경우에 자식에 width 100% 를 주면 부모를 넘어설 수 없기 때문에, 화면 전체 width 를 차지할 수 없습니다. 아래와 같은 상황이 예시입니다. 어떤 방법을 사용하여 위의 문제를 해결할 수 있을까요?
<div>
<nav>width를 화면 전체로 하고 싶은 tag</nav>
</div>
div {
width:50%;
}
2. Solution
{
width: 100vw;
margin-left: calc(-50vw + 50%);
}
이 경우 위와 같이 vw 를 넣어서 해결할 수 있습니다. 위의 nav 예시에서는 아래와 같이 사용할 수 있습니다.
nav {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
css 에서 vw 는 html tag의 width 를 브라우저 크기로 설정해주면 됩니다. % 는 상대적인 경우에만 사용하는 값이기 때문에 부모를 따라가지만, vw는 부모와 상관없이 브라우저의 크기를 따라갑니다.
위의 해결책을 적용하여 문제는 해결되지만 scrollbar 가 생성될 수 있습니다. scrollbar가 생성되는 이유는 우측의 스크롤바 크기를 무시한 화면 전체를 width로 계산하기 때문입니다. 실제 화면은 스크롤바를 제외한 크기로 계산되기 때문에 100vw 와 100% 에서 오차가 발생합니다.
이 때에는 아래의 해결책 중에 하나를 사용하여 해결할 수 있습니다.
body {
margin: 0;
}
body {
overflow-y: hidden;
}
문제 해결에 도움이 되셨으면 좋겠습니다! 감사합니다!