http://kenji.blog/ko/tags/html/Recent content in HTML on kenji.blogHugo -- gohugo.iokokenjinoteThu, 06 Apr 2023 23:23:46 +0900http://kenji.blog/ko/p/html%E3%81%A7%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95reveal.js/Thu, 06 Apr 2023 23:23:46 +0900http://kenji.blog/ko/p/html%E3%81%A7%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95reveal.js/<img src="http://kenji.blog/p/html%E3%81%A7%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95reveal.js/img.png" alt="Featured image of post HTML로 프레젠테이션 자료를 만드는 방법 (reveal.js)" /><h1 id="html로-프레젠테이션-자료를-만드는-방법">HTML로 프레젠테이션 자료를 만드는 방법 </h1><p>reveal.js는 HTML과 Markdown을 사용한 프레젠테이션 작성 도구로, 다음과 같은 기능이 있습니다.</p> <ul> <li>수식, 애니메이션, 스와이프 조작 등 다양한 프레젠테이션 기능</li> <li>테마 및 레이아웃 커스터마이즈 가능</li> <li>마우스, 키보드, 터치패드 등 여러 디바이스를 지원하는 내비게이션 기능</li> <li>슬라이드 자동 재생 및 비디오 포함 등 고급 기능 제공</li> <li>PDF 형식으로 내보내기 가능</li> </ul> <p>이러한 기능을 통해 사용자는 쉽게 인터랙티브하고 매력적인 프레젠테이션을 만들 수 있습니다.</p> <h1 id="revealjs-설치-및-사용법">reveal.js 설치 및 사용법 </h1><p>가장 간단한 사용법은 다음 페이지에서 ZIP 파일을 통째로 다운로드하여 압축을 푸는 것입니다.</p> <ol> <li><a class="link" href="https://revealjs.com/installation" target="_blank" rel="noopener" >https://revealjs.com/installation</a>을 열고, 링크에서 <code>master.zip</code>을 다운로드한다</li> <li>압축을 푼 폴더 내의 index.html을 브라우저로 연다</li> <li>index.html을 수정하여 자신의 프레젠테이션 자료를 만든다</li> </ol> <p>※demo.html에 데모용 HTML 코드가 작성되어 있으므로 참고할 수 있습니다.</p> <h1 id="활용-방법">활용 방법 </h1><p>만든 프레젠테이션 자료는 그대로 웹 페이지로 공개하거나, PDF로 내보낼 수 있습니다. 또한, 프레젠테이션 소스가 텍스트이므로 버전 관리 시스템으로 관리하기가 용이합니다.</p> <p>마크다운 형식으로 프레젠테이션 자료를 작성하는 것도 가능한 것 같습니다.</p> <h1 id="참고">참고 </h1><ul> <li><a class="link" href="https://qiita.com/Targityen/items/40ae4795e2cb77c1adc6" target="_blank" rel="noopener" >앞으로 프레젠테이션 자료는 reveal.js를 사용하자</a></li> <li><a class="link" href="https://qiita.com/jkjoluvjlajelljicvjzojieoaid/items/01cd7ff819bc2e69b652" target="_blank" rel="noopener" >Markdown 표기법 샘플 목록</a></li> </ul>http://kenji.blog/ko/p/hugo%E3%81%A7html%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86/Tue, 17 Jan 2023 19:20:32 +0900http://kenji.blog/ko/p/hugo%E3%81%A7html%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86/<img src="http://kenji.blog/p/hugo%E3%81%A7html%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86/img.png" alt="Featured image of post HUGO에서 HTML 태그 사용하기" /><p>HUGO의 기본 설정에서는 게시물 내에 HTML 태그를 사용할 수 없게 되어 있지만, config.toml에 아래와 같이 기재하면 사용할 수 있게 됩니다.</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span> </span></span></code></pre></td></tr></table> </div> </div><p>참고: <a class="link" href="https://gohugo.io/getting-started/configuration-markup" target="_blank" rel="noopener" >Configure Markup</a></p>