CSS 선택자가 고정된 위치(fixed position)를 지정합니다.

CSS selector specifies fixed position.

 

이 오류는 CSS 코드에 position: fixed; 스타일이 사용되었음을 의미합니다. 이 스타일은 웹사이트에서는 유용할 수 있지만, 리플로우(reflowable) EPUB에서는 심각한 문제를 일으켜 금지됩니다.

position: fixed;는 특정 요소(예: 헤더, 메뉴 등)를 화면의 한 위치에 '고정'시키는 역할을 합니다. 사용자가 페이지를 넘겨도 그 요소는 항상 같은 자리에 머물러 있습니다.

---

## 왜 EPUB에서 문제가 되나요?

컴퓨터 화면에 포스트잇 메모를 붙여놓는 것을 상상해 보세요. 📌 문서를 스크롤해도 메모는 화면의 같은 자리에 계속 머물며 그 아래에 있는 내용을 가리게 됩니다. position: fixed;가 EPUB에서 하는 역할이 바로 이것입니다.

• 콘텐츠 겹침: 고정된 요소가 본문 텍스트 위를 덮어버려 독자가 내용을 읽을 수 없게 만듭니다.
• 페이지 넘김 문제: EPUB은 웹사이트처럼 스크롤하는 방식이 아니라 페이지를 넘기는 방식입니다. 고정된 요소는 모든 페이지의 동일한 위치에 나타나 독서 흐름을 완전히 방해합니다.
• 사용자 설정과 충돌: 독자가 글자 크기를 키우면 본문은 그에 맞춰 재배열되지만, 고정된 요소는 제자리에 머물러 레이아웃이 완전히 깨지게 됩니다.

---

## 해결 방법

가장 좋은 해결책은 position: fixed;를 삭제하고, 해당 요소가 책의 자연스러운 흐름에 맞게 표시되도록 디자인을 재고하는 것입니다.

1. EPUB의 CSS 파일에서 position: fixed; 코드를 검색하여 찾습니다.
2. 해당 코드 줄 전체를 삭제합니다.

### 수정 예시

• 오류가 발생하는 코드:
• CSS

   

  .note-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: yellow;
  }
  

• 올바르게 수정한 코드: ✅위와 같이 수정하면 'note-box'는 더 이상 화면에 고정되지 않고, 본문 내용의 흐름에 따라 자연스럽게 표시됩니다.
• CSS

   

  .note-box {
    /* position: fixed; <-- 이 줄을 삭제합니다. */
    margin: 20px; /* margin이나 padding 등으로 위치를 조정합니다. */
    background-color: yellow;
    border: 1px solid black; /* 테두리 등으로 시각적 구분을 줍니다. */
  }