Presenting like a kunoichi :scale 35% with xaringan

# Presenting like a kunoichi <img src="fig/kunoichi.svg" alt=":scale 35%" /> with xaringan
### Earo Wang, 이광춘, 2020-10-27

---

![:scale 35%](https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)
]

---
class: inverse middle center

.pull-left[
.animate__animated.animate__bounceInDown[
![:scale 50%](fig/kunoichi.svg)
]
]
.pull-right[
<br>
<br>
# HTML.orange[<i class="fab fa-html5"></i>]
<hr>
# 다양한 시도
# Tidyverse Korea
]

---
## .left[🛠 슬라이드 발표순서]

<br>
.alert[
  .large[
1. 슬라이드 열기
2. 발표하기
3. 슬라이드 닫기
  ]
]

---
class: center middle inverse

# 경청해 주셔서 감사합니다.

# 질문?

# 끝

---
class: center middle inverse

.animate__animated.animate__hinge[
# 경청해 주셔서 감사합니다.
# 질문?
# 끝
]

---

.center[
👇 슬라이드에 슬라이드 넣기
<iframe src="https://slides.yihui.org/xaringan/" frameborder="0" height="480" width="640">
</iframe>
]

---
class: middle

.left-column[
.center[![:scale 50%](https://user-images.githubusercontent.com/163582/45438104-ea200600-b67b-11e8-80fa-d9f2a99a03b0.png)]
### - markdown
]

.right-column[
````markdown
---
background-image: url(fig/kunoichi.svg)
background-position: 50% 50%
background-size: cover
class: inverse middle

## Presenting like a kunoichi with ⚔️aringan

1. Jot down in Markdown
2. Prettify with CSS
3. Interact with JS

```{r eval = FALSE}
install.packages("xaringan") #<<
```

````
]

---

background-image: url(img/kunoichi.svg)
background-position: 50% 50%
background-size: cover
class: inverse middle

## Presenting like a kunoichi with ⚔️aringan

1. Jot down in Markdown
2. Prettify with CSS
3. Interact with JS

```r
*install.packages("xaringan")
```

---

.left-column[
.center[![:scale 50%](https://user-images.githubusercontent.com/163582/45438104-ea200600-b67b-11e8-80fa-d9f2a99a03b0.png)]
### - markdown
### - prettify
]
.right-column[
##  다단 편집
```css
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap');
.encoding {
  font-family: 'Libre Barcode 128 Text', cursive;
}
```

.pull-left[
```yml
---
output:
  xaringan::moon_reader:
    css: [default, custom.css]
---
.encoding[
This message is encoded.
]
```
]

.pull-right[
```html
<div class="encoding">
  <p>This message is encoded.</p>
</div>
```
.alert.center[.encoding[
This message is encoded.
]]
]
]

---

```r
library(ggplot2)
ggplot(mpg, aes(displ, hwy, colour = class)) +
  geom_point()
```
]

.panel[.panel-name[Plot]
<img src="figure/unnamed-chunk-2-1.png" width="70%" style="display: block; margin: auto;" />
]

.panel[.panel-name[Plot_old]
<img src="figure/existing-method-1.png" width="70%" style="display: block; margin: auto;" />
]

]
]

---

.left-column[
.center[![:scale 50%](https://user-images.githubusercontent.com/163582/45438104-ea200600-b67b-11e8-80fa-d9f2a99a03b0.png)]
### - markdown
### - prettify
### - interact
]
.right-column[
## Use `custom.js`
<br>
```yml
output:
  xaringan::moon_reader:
*   includes:
*     after_body: "custom.js"
```

---
class: center middle

## 슬라이드 카드

.card[
[![](fig/kunoichi.svg)](https://statkclee.github.io/ds-authoring/ds-statistics-symposium.html#/)
]
.card[
[![](fig/xaringan-hex.png)](https://statkclee.github.io/ds-authoring/ds-weather-github-actions.html#1)
]

---
class: middle

## 이모티콘과 발표자료 링크

<i class="fas fa-images"></i> [remark.js](https://remarkjs.com)

<i class="fas fa-images"></i> [Presentation ninja](https://slides.yihui.org/xaringan)

<i class="fas fa-images"></i> [Making slides in R Markdown](https://arm.rbind.io/slides/xaringan.html)

<i class="fas fa-book-open"></i> [xaringan wiki](https://github.com/yihui/xaringan/wiki)

<i class="fas fa-blog"></i> [Infinite moon reader](https://yihui.org/en/2019/02/ultimate-inf-mr/)