1.2.4.3 CSS 스타일 적용방식 - 인라인 스타일

인라인 스타일은 HTML 태그에 직접 스타일을 적용하는 방식이다. 여러개의 스타일이 중복 적용될 경우 인라인 스타일이 우선시 되는 장점이 있지만, 많은 단점이 있어 특별한 경우가 아니라면 권장하지 않는다. 인라인 스타일을 적용하게 되면 다음과 같은 문제점이 발생한다.

1. 태그별로 스타일을 지정해 줘야 한다.

    - 모든 태그에 스타일을 개별적으로 지정해 줘야 하기 때문에 편집 시간이 오래 걸리고 문서가 복잡해진다. 뷰어에서 로딩시간이 오래 걸리고 오류가 자주 발생한다. 또한 문서의 용량이 커지기 때문에 동일한 내용이라면 외부 스타일을 사용한 문서보다 용량이 커진다. 

2. 스타일을 변경하기 위해서는 모든 태그를 수정해야 한다.

    - 본문은 동일한 스타일이 적용된 여러 단락으로 되어 있다. 한 책에 수백에서 천개 이상의 단락이 있는데 인라인 스타일을 사용했다면 편집을 바꾸기 위해 모든 단락을 수정해야 한다. 그리고 문서를 수정해야 할 때 스타일이 어떻게 적용됐는지 파악하기 어렵다. 외부 스타일을 사용했다면 css파일을 보고 문서의 스타일을 한눈에 파악할 수 있으며, 수정을 할 때도 하나만 고치면 된다.

3. 스타일의 일관성을 유지하기 어렵다.

    - 인라인 스타일은 단락별로 스타일을 지정해야 하기 때문에 스타일이 여러개 있을 경우 일관성을 유지하기 어렵다. 인라인 스타일을 적용한 문서 중에는 본문 글씨 크기가 챕터별로 1.2em, 1.0em, 1.3em 등 서로 다른 경우가 많다. 그리고 주석, 인용, 참고 등 서로 다른 스타일을 적용할 때도 챕터별로 다른 스타일을 적용해서 일관성이 유지되지 않는 경우가 많다. 

4. 스타일이 변경되지 않는다.

    - 이는 뷰어에 따라 다를 수 있지만, 인라인 스타일을 적용하면 웹킷 기반의 뷰어에서는 스타일이 변경되지 않을 가능성이 높다. 사용자가 뷰어 설정에서 글꼴이나 글자 크기를 바꾸더라도 인라인 스타일이 적용된 단락은 변경되지 않는다. 태블릿, 스마트폰, 전자잉크(EPD)를 사용한 전용 단말기 등 다양한 전자책 독서 환경에서 스타일이 변경되지 않는다면 사용자의 불편을 초래할 수 있다.

4번은 단점이기도 하지만 인라인 스타일이 필요한 이유이기도 하다. 인라인 스타일은 CSS적용 순서에서 가장 상위에 있기 때문에 스타일이 중복되더라도 우선 적용된다. 예를 들어 외부 스타일에서 글자 크기를 1em으로, 내부 스타일에서 글자 크기를 2em으로, 인라인 스타일로 글자크기를 3em으로 적용하고, 뷰어 설정에서 사용자가 글자크기가 1.5em으로 적용했다면 최종 결과물은 인라인 스타일의 글자크기 3em이 된다.(단, 뷰어에 따라 사용자 스타일이 우선 적용될 수 있다) 따라서 스타일 자체가 본문의 내용을 설명하는데 중요한 역할을 한다면 인라인 스타일을 사용할 수 있다.

<p> style="스타일 속성 : 스타일 값; 스타일 속성 : 스타일 값;">본문 내용</p>

기본 문법

인라인 스타일은 여는 태그 뒤에 style 속성을 사용해서 적용할 수 있다. style 속성 뒤에 " "(따옴표)로 묶어 여러개의 스타일 속성을 ;(세미콜론)으로 구분해서 지정할 수 있다. 

<p style=”text-align: justify; text-indent: 1em; font-family:"기본글꼴"; font-size: 1em;”>인라인 스타일은 태그별로 스타일을 직접 적용하는 방식이다.</p>

<p style=”text-align: justify; text-indent: 1em; font-family:"기본글꼴"; font-size: 1em;”>동일한 스타일이라도 단락이 바뀔 때마다 스타일을 적용해 줘야 한다.</p>

<p style=”text-align: justify; text-indent: 1em; font-family:"기본글꼴"; font-size: 1em;”>스타일을 변경하기 위해서는 모든 동일한 스타일을 수정해 줘야 하기 때문에 시간이 오래 걸린다. .</p>

스타일 적용 예

인라인 스타일은 특별한 경우가 아니라면 사용하지 않아야 한다. 하지만 대부분의 전자책 편집기는 인라인 스타일로 스타일을 지정하고 있다. 코드 방식을 동시에 지원하지만 WYSIWYG 방식이 편집하기 편하기 때문에 HTML이나 CSS를 모르는 편집자라면 편집기에서 기본 제공하는 편집 기능을 사용하게 되는데 이 방식은 대부분 인라인 스타일이 적용된다. 

인라인 스타일이 적용되면 뷰어에서 로딩 속도가 오래 걸리거나 오류가 발생하기 쉽고 문서 용량도 크게 증가한다. 문서의 편집 상태를 한눈에 파악하기 어렵고 수정하는데 시간이 오래 걸리기 때문에 문서편집기를 이용하더라도 WYSIWYG 방식을 지원하는 편집기라도 코드 방식을 권한다.