모든 곳이 아닌
지정한 한 페이지의 배경만 가득 채우고자 했다.
🤔 정하려는 페이지의 외각 태그의 높이 설정해보면
import "./test.css";
function Test() {
return <div className="testContainer">Test</div>;
}
export default Test;일단 페이지의 구성은 <div>태그 하나로 채워져있다.
<html>
<body>
<div>
Test
</div>
</body>
</html>간단하게 보면 이런 구조다.
.testContainer {
height: 100%;
background-color: aqua;
}페이지를 가득 채우기 위해 높이값을 100%로 설정했다.
그러나 문자 사이즈 만큼만 배경이 적용된 것을 볼 수 있다.
왜 적용이 안되었을까?
.testContainer의 height: 100%;는 부모 요소의 크기를 기준으로 100%를 계산한다.
이때 부모인 html과 body의 높이는 기본적으로 height: auto;이기 때문에
콘텐츠 크기만큼 높이가 결정된다.
👉 즉, .testContainer는 100%여도 부모와 동일하게 콘텐츠 크기인
텍스트("Test") 사이즈 만큼만 높이가 늘어난다.
📚 그럼 페이지 전체를 채우려면?
step1) body, html 높이 설정
html,
body {
height: 100%;
}
.testContainer {
height: 100%;
background-color: aqua;
}
🚨 주의
리액트의 경우 html, body를 설정해도 변화가 없다.
개발자 도구를 열어 요소를 살펴봤다.
<body>와 .testContainer 사이에 <div id="root">라는 태그가 있는 것을 확인할 수 있다.
따라서 리액트에서는 root까지 설정해줘야한다.
step2) 리액트의 경우 root 설정
React 애플리케이션의 DOM 구조는 다음과 같다.
html - body - #root - React 컴포넌트들(사용자가 만든 태그)
<!-- React 앱이 실행되는 기본 구조 -->
<html>
<body>
<div id="root">
<!-- React에서 렌더링한 컴포넌트가 들어가는 위치 -->
</div>
</body>
</html>
html,
body,
#root {
height: 100%;
}
.testContainer {
height: 100%;
background-color: aqua;
}따라서 #root에도 높이 설정을 했다.
html, body, root 높이 설정후 원하는 페이지의 높이를 설정하면
원하던 대로 페이지가 가득 채워졌다.
See the Pen Untitled by mjtime (@mjtime) on CodePen.
이렇게 확인해보면 부모요소들의 높이가 잘 설정된 것을 확인할 수 있다.
다른 방법) %대신 vh를 사용
.testContainer {
min-height: 100vh;
background-color: aqua;
}부모 요소의 높이 설정 하지 않는 방법으로는
vh를 사용하면된다.
동일하게 화면 전체 높이를 차지하게 할 수 있다.
✅ % 방법이 적용 안된다면 확인해볼 것
📌 index.css 가 아니라 index.module.css를 사용하고 있는가?
CSS Modules 방식이라서
html, body, #root같은
전역 스타일이 적용되지 않는다.
👉 전역 스타일을 적용하려면index.css같은 일반 css파일을 사용하자.
추가 설정 - 외각 여백 제거
페이지를 다 채웠음에도 상하좌우에 여백이 있는 것을 볼 수 있다.
이때, 외각의 여백을 없애기 위해
기본적으로 있는 html, body의 margin을 0으로 설정한다.
html,
body,
#root {
height: 100%;
margin: 0;
}
.testContainer {
height: 100%;
background-color: aqua;
}
'LANGUAGE > CSS' 카테고리의 다른 글
| [CSS] body 여백 없애기 (0) | 2022.05.20 |
|---|
모든 곳이 아닌
지정한 한 페이지의 배경만 가득 채우고자 했다.
🤔 정하려는 페이지의 외각 태그의 높이 설정해보면
import "./test.css";
function Test() {
return <div className="testContainer">Test</div>;
}
export default Test;일단 페이지의 구성은 <div>태그 하나로 채워져있다.
<html>
<body>
<div>
Test
</div>
</body>
</html>간단하게 보면 이런 구조다.
.testContainer {
height: 100%;
background-color: aqua;
}페이지를 가득 채우기 위해 높이값을 100%로 설정했다.
그러나 문자 사이즈 만큼만 배경이 적용된 것을 볼 수 있다.
왜 적용이 안되었을까?
.testContainer의 height: 100%;는 부모 요소의 크기를 기준으로 100%를 계산한다.
이때 부모인 html과 body의 높이는 기본적으로 height: auto;이기 때문에
콘텐츠 크기만큼 높이가 결정된다.
👉 즉, .testContainer는 100%여도 부모와 동일하게 콘텐츠 크기인
텍스트("Test") 사이즈 만큼만 높이가 늘어난다.
📚 그럼 페이지 전체를 채우려면?
step1) body, html 높이 설정
html,
body {
height: 100%;
}
.testContainer {
height: 100%;
background-color: aqua;
}
🚨 주의
리액트의 경우 html, body를 설정해도 변화가 없다.
개발자 도구를 열어 요소를 살펴봤다.
<body>와 .testContainer 사이에 <div id="root">라는 태그가 있는 것을 확인할 수 있다.
따라서 리액트에서는 root까지 설정해줘야한다.
step2) 리액트의 경우 root 설정
React 애플리케이션의 DOM 구조는 다음과 같다.
html - body - #root - React 컴포넌트들(사용자가 만든 태그)
<!-- React 앱이 실행되는 기본 구조 -->
<html>
<body>
<div id="root">
<!-- React에서 렌더링한 컴포넌트가 들어가는 위치 -->
</div>
</body>
</html>
html,
body,
#root {
height: 100%;
}
.testContainer {
height: 100%;
background-color: aqua;
}따라서 #root에도 높이 설정을 했다.
html, body, root 높이 설정후 원하는 페이지의 높이를 설정하면
원하던 대로 페이지가 가득 채워졌다.
이렇게 확인해보면 부모요소들의 높이가 잘 설정된 것을 확인할 수 있다.
다른 방법) %대신 vh를 사용
.testContainer {
min-height: 100vh;
background-color: aqua;
}부모 요소의 높이 설정 하지 않는 방법으로는
vh를 사용하면된다.
동일하게 화면 전체 높이를 차지하게 할 수 있다.
✅ % 방법이 적용 안된다면 확인해볼 것
📌 index.css 가 아니라 index.module.css를 사용하고 있는가?
CSS Modules 방식이라서
html, body, #root같은
전역 스타일이 적용되지 않는다.
👉 전역 스타일을 적용하려면index.css같은 일반 css파일을 사용하자.
추가 설정 - 외각 여백 제거
페이지를 다 채웠음에도 상하좌우에 여백이 있는 것을 볼 수 있다.
이때, 외각의 여백을 없애기 위해
기본적으로 있는 html, body의 margin을 0으로 설정한다.
html,
body,
#root {
height: 100%;
margin: 0;
}
.testContainer {
height: 100%;
background-color: aqua;
}
'LANGUAGE > CSS' 카테고리의 다른 글
| [CSS] body 여백 없애기 (0) | 2022.05.20 |
|---|
