CSS를 파싱하는 중 오류가 발생했습니다: %1$s. CSS 파일의 어딘가에 오타나 문법 오류가 있습니다.

EPUB 제작의 기초/EPUBCheck 오류
posted by 내.맘.대.로 2025. 9. 25. 08:50

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

An error occurred while parsing the CSS: %1$s.

 

이 오류는 CSS 파일의 코드 어딘가에 문법적인 실수나 오타가 있음을 알려주는 메시지입니다.

컴퓨터는 정해진 문법 규칙을 매우 엄격하게 따르기 때문에, 세미콜론(;) 하나가 빠지거나 괄호({})의 짝이 맞지 않는 등 사소한 실수만 있어도 코드를 이해하지 못하고 오류를 보고합니다. 📝

오류 메시지의 %1$s 부분에는 컴퓨터가 발견한 구체적인 문제에 대한 힌트가 들어있으니, 이 부분을 잘 살펴보는 것이 중요합니다.

## 흔하게 발생하는 오류 원인

다음은 CSS에서 자주 발생하는 문법 오류의 유형입니다.

  • 세미콜론(;) 누락
    • p { color: blue } (→ blue 뒤에 ;가 빠짐)
  • 괄호({ })의 짝이 맞지 않음
    • p { color: blue; (→ 닫는 괄호 }가 없음)
  • 속성이나 값의 오타
    • p { colour: blue; } (→ color를 잘못 씀)
    • p { font-weight: blod; } (→ bold를 잘못 씀)
  • 주석(/* */)을 제대로 닫지 않음
    • /* 주석 시작 (→ */로 닫지 않아 뒤따르는 모든 코드가 주석으로 처리됨)

## 오류를 찾고 해결하는 방법

  1. 오류 메시지(%1$s) 확인하기 가장 먼저 %1$s에 표시된 내용을 확인하세요. "line 25에서 예기치 않은 문자 '}' 발견"과 같이 오류가 발생한 줄 번호와 문제의 원인에 대한 단서가 포함되어 있는 경우가 많습니다.
  2. 코드 편집기의 '구문 검사(Linting)' 기능 활용 (가장 추천) Visual Studio Code, Sigil, Calibre Editor 등 대부분의 최신 코드 편집기는 잘못된 코드를 자동으로 감지하여 빨간 밑줄 등으로 표시해 줍니다. 워드프로세서의 맞춤법 검사 기능과 같아서, 오류를 매우 쉽고 빠르게 찾을 수 있습니다.
  3. 온라인 CSS 검사기(Validator) 사용하기 W3C CSS Validation Service와 같은 웹사이트에 자신의 CSS 코드를 전부 복사하여 붙여넣으면, 문법적으로 잘못된 부분을 찾아 목록으로 알려줍니다.

직접 확인하기 위에서 언급한 '흔하게 발생하는 오류 원인'을 참고하여, 오류가 발생했다고 표시된 줄 번호와 그 바로 윗줄을 중심으로 코드를 꼼꼼히 살펴보세요. (세미콜론 누락은 다음 줄에서 오류로 잡히는 경우가 많습니다.)

반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 제작의 기초 > EPUBCheck 오류' 카테고리의 다른 글

CSS @font-face 선언에 속성이 없습니다.  (0) 2025.09.25
대체 스타일시트에는 title(제목)이 있어야 합니다.  (0) 2025.09.25
@font-face 참조 "%1$s"이(가) 비표준 글꼴 유형 "%2$s"을(를) 참조합니다.  (0) 2025.09.25
CSS 선택자가 고정된 위치(fixed position)를 지정합니다.  (0) 2025.09.25
서로 충돌하는 대체 스타일 태그가 발견되었습니다: %1$s.  (0) 2025.09.25

@font-face 참조 "%1$s"이(가) 비표준 글꼴 유형 "%2$s"을(를) 참조합니다.

EPUB 제작의 기초/EPUBCheck 오류
posted by 내.맘.대.로 2025. 9. 25. 08:49

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

Font-face reference "%1$s" refers to non-standard font type "%2$s".

 

이 오류는 CSS의 @font-face 규칙을 통해 EPUB에 글꼴(폰트)을 포함시켰지만, 그 글꼴 파일의 형식이 EPUB 표준에서 공식적으로 지원하지 않는 비표준 형식이라는 의미입니다. 🔤

## 왜 글꼴 형식이 중요한가요?

EPUB은 호환성을 매우 중요하게 생각합니다. 어떤 전자책 뷰어에서든 책이 동일하게 보이도록 하기 위해, 모든 뷰어가 반드시 지원해야 하는 '공식 글꼴 형식'을 지정해 두었습니다. 이 목록에 없는 형식을 사용하면 일부 기기에서는 글꼴이 적용되지 않고 기본 글꼴로 보이게 됩니다.

### EPUB 공식 지원 글꼴 형식

EPUB 3 표준에서 안정적으로 지원되는 글꼴 형식은 다음과 같습니다.

  • WOFF2 (.woff2)
  • WOFF (.woff)
  • OpenType (.otf)
  • TrueType (.ttf)

오류 메시지에 나온 %2$s는 위 목록에 없는 형식(예: .svg, .eot)일 가능성이 높습니다.

## 해결 방법

해결책은 비표준 형식의 글꼴 파일을 표준 형식(가급적 WOFF2 또는 WOFF)으로 변환하는 것입니다.

  1. 글꼴 변환하기 Font Squirrel Webfont Generator나 CloudConvert와 같은 무료 온라인 글꼴 변환 서비스를 이용하세요. 가지고 있는 비표준 글꼴 파일(예: myfont.svg)을 업로드하여 표준 형식(예: myfont.woff2)으로 변환합니다.
  2. EPUB 파일 교체하기 기존의 비표준 글꼴 파일을 EPUB에서 삭제하고, 새로 변환한 표준 글꼴 파일을 추가합니다.
  3. CSS 파일 수정하기 @font-face 규칙에서 참조하는 파일 이름을 새 파일 이름으로 변경합니다.
    • 수정 전:
    • CSS
       
      @font-face {
  font-family: 'MyWebFont';
  src: url('../fonts/myfont.svg');
}
    • 수정 후: ✅
    • CSS
       
      @font-face {
  font-family: 'MyWebFont';
  src: url('../fonts/myfont.woff2');
}
  4. OPF 파일 확인하기 (중요) EPUB의 .opf 파일 안에 있는 <manifest> 목록에서 해당 글꼴 항목의 href (파일 경로)와 media-type (파일 종류)이 올바르게 수정되었는지 확인해야 합니다.
    • .woff 파일의 media-type은 font/woff 입니다.
    • .woff2 파일의 media-type은 font/woff2 입니다.
    • .otf 파일의 media-type은 font/otf 입니다.
    • .ttf 파일의 media-type은 font/ttf 입니다.
반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 제작의 기초 > EPUBCheck 오류' 카테고리의 다른 글

대체 스타일시트에는 title(제목)이 있어야 합니다.  (0) 2025.09.25
CSS를 파싱하는 중 오류가 발생했습니다: %1$s. CSS 파일의 어딘가에 오타나 문법 오류가 있습니다.  (0) 2025.09.25
CSS 선택자가 고정된 위치(fixed position)를 지정합니다.  (0) 2025.09.25
서로 충돌하는 대체 스타일 태그가 발견되었습니다: %1$s.  (0) 2025.09.25
CSS 문서는 UTF-8로 인코딩해야 합니다, %1$s 인코딩이 감지되었습니다;  (0) 2025.09.24

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

EPUB 제작의 기초/EPUBCheck 오류
posted by 내.맘.대.로 2025. 9. 25. 08:46

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

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; /* 테두리 등으로 시각적 구분을 줍니다. */
}
반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 제작의 기초 > EPUBCheck 오류' 카테고리의 다른 글

CSS를 파싱하는 중 오류가 발생했습니다: %1$s. CSS 파일의 어딘가에 오타나 문법 오류가 있습니다.  (0) 2025.09.25
@font-face 참조 "%1$s"이(가) 비표준 글꼴 유형 "%2$s"을(를) 참조합니다.  (0) 2025.09.25
서로 충돌하는 대체 스타일 태그가 발견되었습니다: %1$s.  (0) 2025.09.25
CSS 문서는 UTF-8로 인코딩해야 합니다, %1$s 인코딩이 감지되었습니다;  (0) 2025.09.24
CSS 문서가 UTF-16으로 인코딩되었습니다. 반드시 UTF-8으로 인코딩해야 합니다.  (0) 2025.09.24

서로 충돌하는 대체 스타일 태그가 발견되었습니다: %1$s.

EPUB 제작의 기초/EPUBCheck 오류
posted by 내.맘.대.로 2025. 9. 25. 08:45

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

Conflicting alternate style tags found: %1$s.

 

이 오류는 HTML 문서의 <head> 섹션에서 대체 스타일시트를 설정하는 방식에 논리적인 충돌이 있음을 의미합니다.

## 대체 스타일시트란?

대체 스타일시트는 독자에게 여러 가지 디자인 테마(예: '낮 모드', '밤 모드', '세피아 모드')를 선택할 수 있도록 제공하는 고급 기능입니다. 🎨 독자는 뷰어의 설정을 통해 선호하는 스타일을 고를 수 있습니다.

이 오류는 이 '테마 선택지'를 제공하는 규칙에 문제가 생겼다는 뜻입니다.

## 충돌이 발생하는 원인

가장 흔한 원인은 '기본 테마'로 설정된 스타일시트가 두 개 이상이기 때문입니다.

  • rel="stylesheet"와 title="테마이름"을 모두 가진 <link> 태그는 '기본 테마(Preferred Style)'로 간주됩니다.
  • 규칙상 '기본 테마'는 단 하나만 존재해야 합니다.

책의 기본 표지가 두 종류일 수 없는 것처럼, 기본 테마가 여러 개이면 뷰어는 어떤 것을 먼저 보여줘야 할지 혼란에 빠집니다.

## 해결 방법

  1. 오류가 발생한 HTML/XHTML 파일을 엽니다.
  2. <head> 섹션 안에서 CSS 파일을 연결하는 모든 <link> 태그를 찾습니다.
  3. rel="stylesheet"와 title="..." 속성을 동시에 가지고 있는 <link> 태그가 여러 개 있는지 확인합니다.
  4. 그 중 하나만 남기고, 나머지는 rel="stylesheet"를 rel="alternate stylesheet"로 변경하여 '대체 테마'로 지정합니다.

### 수정 예시

  • 오류가 발생하는 코드:➡️ title이 있는 rel="stylesheet"가 두 개이므로 어떤 것이 기본값인지 알 수 없어 충돌이 발생합니다.
  • HTML
     
    <head>
  ...
  <link rel="stylesheet" href="day.css" title="밝은 테마">
  <link rel="stylesheet" href="night.css" title="어두운 테마">
  ...
</head>
  • 올바르게 수정한 코드: ✅➡️ '밝은 테마'를 기본값으로 두고, '어두운 테마'는 선택 가능한 '대체' 스타일로 변경하여 충돌을 해결했습니다.
  • HTML
     
    <head>
  ...
  <link rel="stylesheet" href="day.css" title="밝은 테마">
  <link rel="alternate stylesheet" href="night.css" title="어두운 테마">
  ...
</head>
반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 제작의 기초 > EPUBCheck 오류' 카테고리의 다른 글

@font-face 참조 "%1$s"이(가) 비표준 글꼴 유형 "%2$s"을(를) 참조합니다.  (0) 2025.09.25
CSS 선택자가 고정된 위치(fixed position)를 지정합니다.  (0) 2025.09.25
CSS 문서는 UTF-8로 인코딩해야 합니다, %1$s 인코딩이 감지되었습니다;  (0) 2025.09.24
CSS 문서가 UTF-16으로 인코딩되었습니다. 반드시 UTF-8으로 인코딩해야 합니다.  (0) 2025.09.24
비어 있거나 NULL인 참조가 발견되었습니다.  (0) 2025.09.24

티스토리툴바