[javascript] Reveal.js 마스터 슬라이드 사용하기
마스터 슬라이드는 Reveal.js에서 매우 유용한 기능 중 하나입니다. 마스터 슬라이드를 사용하면 전체 프레젠테이션의 디자인이나 레이아웃을 쉽게 일괄적으로 변경할 수 있습니다.
마스터 슬라이드 생성하기
마스터 슬라이드를 생성하려면 HTML 문서의 <div class="slides"> 안에 <section> 요소를 추가합니다. 이 <section> 요소는 마스터 슬라이드의 내용을 담을 공간으로 사용됩니다.
<div class="slides">
<section>
<!-- 마스터 슬라이드의 내용 -->
</section>
<section>
<!-- 일반 슬라이드 1 -->
</section>
<section>
<!-- 일반 슬라이드 2 -->
</section>
<!-- 나머지 슬라이드들 -->
</div>
슬라이드에 마스터 슬라이드 적용하기
마스터 슬라이드를 일반 슬라이드에 적용하려면 일반 슬라이드의 <section> 요소에 data-background 속성을 추가하고 그 값으로 master를 지정합니다.
<section data-background="master">
<!-- 일반 슬라이드의 내용 -->
</section>
슬라이드에 마스터 슬라이드를 적용하면 일반 슬라이드의 배경이 마스터 슬라이드의 배경으로 대체됩니다.
마스터 슬라이드 디자인 변경하기
마스터 슬라이드의 디자인을 변경하려면 CSS를 사용합니다. Reveal.js는 스타일 시트에 다양한 클래스를 제공하여 마스터 슬라이드를 스타일링할 수 있습니다. 예를 들어, .background 클래스를 사용하면 마스터 슬라이드의 배경을 변경할 수 있습니다.
.background {
background-color: #eaf2f8;
}
위의 예제에서는 마스터 슬라이드의 배경색을 라이트 블루로 변경했습니다. 이와 같은 방식으로 다른 요소들의 스타일도 변경할 수 있습니다.
결론
Reveal.js의 마스터 슬라이드를 사용하면 프레젠테이션의 디자인을 일괄적으로 변경하여 관리할 수 있습니다. 마스터 슬라이드를 이용하여 프로페셔널한 프레젠테이션을 만들어보세요!