CSS만으로 innerheight 값을 자동으로 구하게는 안되나요?

Question

인덱스 페이지를 새로고침하면 css 적용하기 이전 버전이 보입니다.
자바스크립트로 dom을 조작했더니 HTML 렌더 전이 보여서요... 
reflow 전에 로딩을 보여주고 싶은 건데, 좋은 방법이 없을까요?

이렇게 저렇게 해보다가 해결을 하긴 했는데 제가 한 방식이 취약한 방식이라서요..
(저는 쌩 html 태그에 <script>로 넣어줬습니다. next js 사용하고 있고 dangerouslysetinnerhtml 넣었어요!)

진성주 · Answer

음 일단 css를 어떻게 프로젝트에 적용하고 있으신가요?

커리어리 AI 봇 · Answer

CSS만으로 innerHeight 값을 자동으로 구하는 것은 어렵습니다. 하지만 레이아웃을 잡는 데 있어 CSS Flexbox, CSS Grid와 같은 기술을 사용하면 화면 크기에 맞춰 요소들이 자동으로 배치되는 효과를 얻을 수 있습니다. 이를 통해 자바스크립트를 사용하지 않고도 원하는 레이아웃을 구현할 수 있습니다. 화면을 새로고침했을 때 CSS가 적용되기 전에 원래의 HTML이 보이는 문제는 다음과 같은 방법으로 해결할 수 있습니다. 1. CSS 파일을 ' <head> ' 태그 내부에 있는 ' <link> ' 태그를 사용하여 로드합니다. 이렇게 하면 CSS가 HTML 보다 먼저 로드되어 페이지가 렌더링되기 전에 스타일이 적용됩니다. 2. 화면에 보이지 않는 영역에 로딩 스피너를 추가하고, 모든 스타일이 적용된 후에 로딩 스피너를 숨기는 방법을 사용할 수 있습니다. 이를 위해 CSS 애니메이션을 이용하여 로딩 스피너를 만들고, JavaScript를 사용하여 페이지 로딩이 완료되면 스피너를 숨깁니다. 예를 들어, 로딩 스피너를 아래와 같이 추가할 수 있습니다 3. CSS에서는 다음과 같이 애니메이션을 만들어 적용합니다. 4. JavaScript에서는 다음과 같이 로딩이 완료되면 로딩 스피너를 숨깁니다. 이렇게 하면 페이지가 렌더링되기 전에 로딩 스피너가 표시되고, 모든 스타일이 적용된 후에 로딩 스피너가 숨겨집니다. ' dangerouslySetInnerHTML '을 사용한 방식은 좋지 않은 방법입니다. 이 방식은 취약한 코드를 동작하게 할 가능성이 있으므로, 가능한 한 안전한 방법을 사용하는 것이 좋습니다. 위에서 언급한 방법을 사용하여 페이지 로딩 시 CSS가 제대로 적용되도록 하는 것이 좋습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#1
<head>
  <link rel="stylesheet" href="your-css-file.css" />
</head>

#2
<div class="loading-spinner"></div>

#3
.loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 로딩 스피너 애니메이션 코드 */
}

#4
window.addEventListener("load", function () {
  const spinner = document.querySelector(".loading-spinner");
  spinner.style.display = "none";
});