<h1 class="title is-3 is-size-4-mobile" style="box-sizing: inherit; margin: 50px 0px 1.5rem; padding: 0px; word-break: break-word; color: #363636; line-height: 1.125; letter-spacing: -1.4px; font-family: &quot;Gowun Batang&quot;, Ubuntu, Roboto, &quot;Open Sans&quot;, &quot;Microsoft YaHei&quot;, sans-serif; background-color: #ffffff;">ESP32, OLED (한글 출력 하기)</h1>
<div class="content" style="box-sizing: inherit; margin-bottom: 1.5rem; overflow-wrap: break-word; font-size: 1.3rem; line-height: 1.75em; letter-spacing: -0.3px; color: #5d686f; margin-top: 20px; font-family: &quot;Gowun Batang&quot;, Ubuntu, Roboto, &quot;Open Sans&quot;, &quot;Microsoft YaHei&quot;, sans-serif; background-color: #ffffff;">
   <h3 id="OLED" style="box-sizing: inherit; margin: 0px 0px 0.6666em; padding: 0px; font-size: 1.5em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#OLED" class="headerlink" title="OLED" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>OLED</h3>
   <h4 id="종류" style="box-sizing: inherit; margin: 0px 0px 0.8em; padding: 0px; font-size: 1.25em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#%EC%A2%85%EB%A5%98" class="headerlink" title="종류" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>종류</h4>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">ESP32나 Arduino에서 사용할 수 있는 oled의 종류는 매우 많지만, 주로 128*64 픽셀을 가진 0.96인치, 1.3인치의 SSD1306, SH1106 컨트롤러를 사용한 oled가 판매되고 있으며, 통신 프로토콜은 I2C나 SPI를 사용한다. oled 모듈 구입시 픽셀수, 컨트롤러 및 통신프로토콜을 잘 알아두어야 스케치 작성시 참고할 수 있음에 유의한다. I2C 방식은 GPIO를 2개만 사용하여 구성이 쉽다는 장점이 있고, SPI방식은 4~5개의 GPIO를 사용하지만 속도가 빠르다는 장점이 있다. 겉모습만으로는 컨트롤러를 확인하기는 어렵다.</p>
   <table style="box-sizing: inherit; border-spacing: 0px; width: 867px; margin-bottom: 1em;">
      <thead style="box-sizing: inherit;">
         <tr style="box-sizing: inherit;">
            <th style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; color: #363636; text-align: left; border-style: solid; border-color: #dbdbdb; border-width: 0px 0px 2px;">I2C</th>
            <th style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; color: #363636; text-align: left; border-style: solid; border-color: #dbdbdb; border-width: 0px 0px 2px;">SPI</th>
            </tr>
         </thead>
      <tbody style="box-sizing: inherit;">
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"><a class="gallery-item" href="https://stemwith.github.io/image/u/u8g2-oled-i2c-01.png" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"><img src="https://stemwith.github.io/image/u/u8g2-oled-i2c-01.png" style="box-sizing: inherit; height: auto; max-width: 100%; margin-top: 30px;" /></a></td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"><a class="gallery-item" href="https://stemwith.github.io/image/u/u8g2-oled-spi-01.png" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"><img src="https://stemwith.github.io/image/u/u8g2-oled-spi-01.png" style="box-sizing: inherit; height: auto; max-width: 100%; margin-top: 30px;" /></a></td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-width: 0px; border-style: solid; border-color: #dbdbdb;"><a class="gallery-item" href="https://stemwith.github.io/image/u/u8g2-oled-i2c-02.png" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"><img src="https://stemwith.github.io/image/u/u8g2-oled-i2c-02.png" style="box-sizing: inherit; height: auto; max-width: 100%; margin-top: 30px;" /></a></td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-width: 0px; border-style: solid; border-color: #dbdbdb;"><a class="gallery-item" href="https://stemwith.github.io/image/u/u8g2-oled-spi-02.png" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"><img src="https://stemwith.github.io/image/u/u8g2-oled-spi-02.png" style="box-sizing: inherit; height: auto; max-width: 100%; margin-top: 30px;" /></a></td>
            </tr>
         </tbody>
      </table>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">이밖에도 U8g2 라이브러리에서 사용가능한 다양한 oled의 종류를 아래 링크에서 확인할 수 있다.</p>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;"><a target="_blank" rel="external nofollow noopener noreferrer" href="https://github.com/olikraus/u8g2/wiki/u8g2setupcpp#constructor-reference" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;">Constructor Reference for U8g2 library</a></p>
   <br style="box-sizing: inherit;" /><br style="box-sizing: inherit;" />
   <h3 id="SPI-OLED" style="box-sizing: inherit; margin: 1.3333em 0px 0.6666em; padding: 0px; font-size: 1.5em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#SPI-OLED" class="headerlink" title="SPI OLED" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>SPI OLED</h3>
   <h4 id="pinmap" style="box-sizing: inherit; margin: 0px 0px 0.8em; padding: 0px; font-size: 1.25em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#pinmap" class="headerlink" title="pinmap" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>pinmap</h4>
   <table style="box-sizing: inherit; border-spacing: 0px; width: 867px; margin-bottom: 1em;">
      <thead style="box-sizing: inherit;">
         <tr style="box-sizing: inherit;">
            <th style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; color: #363636; text-align: left; border-style: solid; border-color: #dbdbdb; border-width: 0px 0px 2px;">OLED</th>
            <th style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; color: #363636; text-align: left; border-style: solid; border-color: #dbdbdb; border-width: 0px 0px 2px;">ESP32 (HW_SPI로 사용시) (VSPI)</th>
            <th style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; color: #363636; text-align: left; border-style: solid; border-color: #dbdbdb; border-width: 0px 0px 2px;"></th>
            <th style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; color: #363636; text-align: left; border-style: solid; border-color: #dbdbdb; border-width: 0px 0px 2px;">(I2C겸용보드인 경우)</th>
            </tr>
         </thead>
      <tbody style="box-sizing: inherit;">
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">GND</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">GND</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"></td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"></td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">VDD</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">3.3V</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"></td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"></td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">D0</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"><span style="box-sizing: inherit; color: #363636; font-weight: 700;">18</span>&nbsp;(HW_SPI 사용시 GPIO_18로 고정)</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">SCK/CLK/CLOCK</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">SCL</td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">D1</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"><span style="box-sizing: inherit; color: #363636; font-weight: 700;">23</span>&nbsp;(HW_SPI 사용시 GPIO_23으로 고정)</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">DATA/DIN/MOSI</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">SDA</td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">RES</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">15</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">RST/RESET</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"></td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">DC</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">14</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">Data Command</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"></td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-width: 0px; border-style: solid; border-color: #dbdbdb;">CS</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-width: 0px; border-style: solid; border-color: #dbdbdb;">5</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-width: 0px; border-style: solid; border-color: #dbdbdb;">Chip Select</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-width: 0px; border-style: solid; border-color: #dbdbdb;"></td>
            </tr>
         </tbody>
      </table>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">※ HW_SPI로 사용하는 경우에는 D0, D1의 핀번호를 바꿀 수 없으며, SW_SPI로 사용하는 경우에는 사용되는 모든 핀의 번호를 임의로 지정하여 사용할 수 있다.</p>
   <br style="box-sizing: inherit;" />
   <h4 id="schematic" style="box-sizing: inherit; margin: 0px 0px 0.8em; padding: 0px; font-size: 1.25em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#schematic" class="headerlink" title="schematic" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>schematic</h4>
   <ul style="box-sizing: inherit; margin: 1em 0px 1em 2em; padding: 0px; list-style-position: outside; list-style-image: initial;">
      <li style="box-sizing: inherit; margin: 0px; padding: 0px;">SW_SPI 연결시에는 스케치에서 지정하는 GPIO핀에 연결한다.</li>
      <li style="box-sizing: inherit; margin: 0.25em 0px 0px; padding: 0px;">HW_SPI로 연결할 때의 회로도는 아래 그림과 같다.</li>
      </ul>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;"><a class="gallery-item" href="https://stemwith.github.io/image/u/u8g2-oled-spi-03.png" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"><img src="https://stemwith.github.io/image/u/u8g2-oled-spi-03.png" style="box-sizing: inherit; height: auto; max-width: 100%; margin-top: 30px;" /></a></p>
   <br style="box-sizing: inherit;" />
   <h4 id="sketch" style="box-sizing: inherit; margin: 0px 0px 0.8em; padding: 0px; font-size: 1.25em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#sketch" class="headerlink" title="sketch" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>sketch</h4>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">oled를 SPI로 연결하는 경우, 다음을 추가해야 한다.</p>
   <figure class="highlight c hljs" id="code-1663822179479764" style="box-sizing: inherit; margin-top: 2em; margin-bottom: 2em; padding: 0px; overflow: hidden; background: rgb(39, 40, 34); color: #dddddd; max-width: 100%; text-align: center; width: 867px; position: relative; border-radius: 4px; margin-right: 0px !important; margin-left: 0px !important;">
      <figcaption class="level is-mobile" style="box-sizing: inherit; align-items: center; justify-content: space-between; display: flex; background: rgba(200, 200, 200, 0.15); padding: 0.3em 0em 0.3em 0.75em; font-size: 0.8em; margin-bottom: 1.5rem; overflow: auto; margin-top: 0px !important; margin-right: 0px !important; margin-left: 0px !important;">
         <div class="level-left" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-start; display: flex; color: inherit;"><span class="fold" style="box-sizing: inherit; font-style: inherit; color: inherit; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; cursor: pointer;"><span class="fas fa-angle-down" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></span></div>
         <div class="level-right" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-end; display: flex; color: inherit; margin-top: 0px;"><a class="copy" title="Copy" data-clipboard-target="#code-1663822179479764 .code" style="box-sizing: inherit; color: inherit; cursor: pointer; opacity: 0.7; padding: 0em 0.75em;"><span class="fas fa-copy" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></a></div>
         </figcaption>
      <div class="highlight-body" style="box-sizing: inherit; overflow: auto;">
         <table style="box-sizing: inherit; border-spacing: 0px; width: auto;">
            <tbody style="box-sizing: inherit;">
               <tr style="box-sizing: inherit;">
                  <td class="gutter" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; text-align: right; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial; background: rgba(200, 200, 200, 0.15);">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">1</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  <td class="code" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial;">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-meta" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">#<span class="hljs-meta-keyword" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">include</span><span class="hljs-meta-string" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">&lt;SPI.h&gt;</span></span></span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </figure>
   <br style="box-sizing: inherit;" />
   <h5 id="sketch-SH1106-HW-SPI" style="box-sizing: inherit; margin: 0px 0px 0.8888em; padding: 0px; font-size: 1.125em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#sketch-SH1106-HW-SPI" class="headerlink" title="sketch: SH1106, HW_SPI" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>sketch: SH1106, HW_SPI</h5>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">HW_SPI를 사용하는 경우에는 D0(CLK), D1(MOSI)을 ESP32에 지정된 핀으로 사용하기 때문에, 나머지 3개의 핀만 sketch에서 지정해주면 된다.</p>
   <figure class="highlight c hljs" id="code-1663822179479943" style="box-sizing: inherit; margin-top: 2em; margin-bottom: 2em; padding: 0px; overflow: hidden; background: rgb(39, 40, 34); color: #dddddd; max-width: 100%; text-align: center; width: 867px; position: relative; border-radius: 4px; margin-right: 0px !important; margin-left: 0px !important;">
      <figcaption class="level is-mobile" style="box-sizing: inherit; align-items: center; justify-content: space-between; display: flex; background: rgba(200, 200, 200, 0.15); padding: 0.3em 0em 0.3em 0.75em; font-size: 0.8em; margin-bottom: 1.5rem; overflow: auto; margin-top: 0px !important; margin-right: 0px !important; margin-left: 0px !important;">
         <div class="level-left" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-start; display: flex; color: inherit;"><span class="fold" style="box-sizing: inherit; font-style: inherit; color: inherit; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; cursor: pointer;"><span class="fas fa-angle-down" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></span></div>
         <div class="level-right" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-end; display: flex; color: inherit; margin-top: 0px;"><a class="copy" title="Copy" data-clipboard-target="#code-1663822179479943 .code" style="box-sizing: inherit; color: inherit; cursor: pointer; opacity: 0.7; padding: 0em 0.75em;"><span class="fas fa-copy" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></a></div>
         </figcaption>
      <div class="highlight-body" style="box-sizing: inherit; overflow: auto;">
         <table style="box-sizing: inherit; border-spacing: 0px; width: auto;">
            <tbody style="box-sizing: inherit;">
               <tr style="box-sizing: inherit;">
                  <td class="gutter" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; text-align: right; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial; background: rgba(200, 200, 200, 0.15);">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">1</span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">2</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  <td class="code" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial;">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">// for HW_SPI (VSPI)</span></span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-function" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">U8G2_SH1106_128X64_NONAME_F_4W_HW_SPI <span class="hljs-title" style="box-sizing: inherit; font-style: inherit; font-weight: bold; color: #a6e22e;">u8g2</span><span class="hljs-params" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">(U8G2_R0, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* cs=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">5</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* dc=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">14</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* reset=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">15</span>)</span></span>;</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </figure>
   <br style="box-sizing: inherit;" />
   <h5 id="sketch-SH1106-SW-SPI" style="box-sizing: inherit; margin: 0px 0px 0.8888em; padding: 0px; font-size: 1.125em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#sketch-SH1106-SW-SPI" class="headerlink" title="sketch: SH1106, SW_SPI" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>sketch: SH1106, SW_SPI</h5>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">SW_SPI를 사용하는 경우, 4~5개의 핀을 sketch에 지정해주어야 한다.</p>
   <figure class="highlight c hljs" id="code-1663822179479430" style="box-sizing: inherit; margin-top: 2em; margin-bottom: 2em; padding: 0px; overflow: hidden; background: rgb(39, 40, 34); color: #dddddd; max-width: 100%; text-align: center; width: 867px; position: relative; border-radius: 4px; margin-right: 0px !important; margin-left: 0px !important;">
      <figcaption class="level is-mobile" style="box-sizing: inherit; align-items: center; justify-content: space-between; display: flex; background: rgba(200, 200, 200, 0.15); padding: 0.3em 0em 0.3em 0.75em; font-size: 0.8em; margin-bottom: 1.5rem; overflow: auto; margin-top: 0px !important; margin-right: 0px !important; margin-left: 0px !important;">
         <div class="level-left" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-start; display: flex; color: inherit;"><span class="fold" style="box-sizing: inherit; font-style: inherit; color: inherit; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; cursor: pointer;"><span class="fas fa-angle-down" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></span></div>
         <div class="level-right" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-end; display: flex; color: inherit; margin-top: 0px;"><a class="copy" title="Copy" data-clipboard-target="#code-1663822179479430 .code" style="box-sizing: inherit; color: inherit; cursor: pointer; opacity: 0.7; padding: 0em 0.75em;"><span class="fas fa-copy" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></a></div>
         </figcaption>
      <div class="highlight-body" style="box-sizing: inherit; overflow: auto;">
         <table style="box-sizing: inherit; border-spacing: 0px; width: auto;">
            <tbody style="box-sizing: inherit;">
               <tr style="box-sizing: inherit;">
                  <td class="gutter" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; text-align: right; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial; background: rgba(200, 200, 200, 0.15);">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">1</span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">2</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  <td class="code" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial;">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">// for SW_SPI</span></span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-function" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">U8G2_SH1106_128X64_NONAME_F_4W_SW_SPI <span class="hljs-title" style="box-sizing: inherit; font-style: inherit; font-weight: bold; color: #a6e22e;">u8g2</span><span class="hljs-params" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">(U8G2_R0, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* clock=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">26</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* data=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">25</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* cs=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">5</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* dc=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">14</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* reset=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">15</span>)</span></span>;</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </figure>
   <br style="box-sizing: inherit;" />
   <h5 id="sketch-SSD1306-HW-SPI" style="box-sizing: inherit; margin: 0px 0px 0.8888em; padding: 0px; font-size: 1.125em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#sketch-SSD1306-HW-SPI" class="headerlink" title="sketch: SSD1306, HW_SPI" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>sketch: SSD1306, HW_SPI</h5>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">SSD1306을 사용하는 oled의 경우&nbsp;<span style="box-sizing: inherit; color: #363636; font-weight: 700;">U8G2_SH1106_</span>~ 부분을&nbsp;<span style="box-sizing: inherit; color: #363636; font-weight: 700;">U8G2_SSD1306_</span>~ 으로 수정하여 사용한다. 자세한 옵션은&nbsp;<a target="_blank" rel="external nofollow noopener noreferrer" href="https://github.com/olikraus/u8g2/wiki/u8g2setupcpp#constructor-reference" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;">Constructor Reference for U8g2 library</a>에서 확인할 수 있다.</p>
   <figure class="highlight plaintext hljs" id="code-166382217947937" style="box-sizing: inherit; margin-top: 2em; margin-bottom: 2em; padding: 0px; overflow: hidden; background: rgb(39, 40, 34); color: #dddddd; max-width: 100%; text-align: center; width: 867px; position: relative; border-radius: 4px; margin-right: 0px !important; margin-left: 0px !important;">
      <figcaption class="level is-mobile" style="box-sizing: inherit; align-items: center; justify-content: space-between; display: flex; background: rgba(200, 200, 200, 0.15); padding: 0.3em 0em 0.3em 0.75em; font-size: 0.8em; margin-bottom: 1.5rem; overflow: auto; margin-top: 0px !important; margin-right: 0px !important; margin-left: 0px !important;">
         <div class="level-left" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-start; display: flex; color: inherit;"><span class="fold" style="box-sizing: inherit; font-style: inherit; color: inherit; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; cursor: pointer;"><span class="fas fa-angle-down" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></span></div>
         <div class="level-right" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-end; display: flex; color: inherit; margin-top: 0px;"><a class="copy" title="Copy" data-clipboard-target="#code-166382217947937 .code" style="box-sizing: inherit; color: inherit; cursor: pointer; opacity: 0.7; padding: 0em 0.75em;"><span class="fas fa-copy" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></a></div>
         </figcaption>
      <div class="highlight-body" style="box-sizing: inherit; overflow: auto;">
         <table style="box-sizing: inherit; border-spacing: 0px; width: auto;">
            <tbody style="box-sizing: inherit;">
               <tr style="box-sizing: inherit;">
                  <td class="gutter" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; text-align: right; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial; background: rgba(200, 200, 200, 0.15);">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">1</span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">2</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  <td class="code" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial;">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">// for HW_SPI (VSPI)</span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">U8G2_SSD1306_128X64_NONAME_F_4W_HW_SPI u8g2(U8G2_R0, /* cs=*/ 5, /* dc=*/ 14, /* reset=*/ 15);</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </figure>
   <br style="box-sizing: inherit;" />
   <h5 id="sketch-SSD1306-SW-SPI" style="box-sizing: inherit; margin: 0px 0px 0.8888em; padding: 0px; font-size: 1.125em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#sketch-SSD1306-SW-SPI" class="headerlink" title="sketch: SSD1306, SW_SPI" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>sketch: SSD1306, SW_SPI</h5>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">SW_SPI를 사용하는 경우, 4~5개의 핀을 sketch에 지정해주어야 한다.</p>
   <figure class="highlight c hljs" id="code-1663822179479602" style="box-sizing: inherit; margin-top: 2em; margin-bottom: 2em; padding: 0px; overflow: hidden; background: rgb(39, 40, 34); color: #dddddd; max-width: 100%; text-align: center; width: 867px; position: relative; border-radius: 4px; margin-right: 0px !important; margin-left: 0px !important;">
      <figcaption class="level is-mobile" style="box-sizing: inherit; align-items: center; justify-content: space-between; display: flex; background: rgba(200, 200, 200, 0.15); padding: 0.3em 0em 0.3em 0.75em; font-size: 0.8em; margin-bottom: 1.5rem; overflow: auto; margin-top: 0px !important; margin-right: 0px !important; margin-left: 0px !important;">
         <div class="level-left" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-start; display: flex; color: inherit;"><span class="fold" style="box-sizing: inherit; font-style: inherit; color: inherit; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; cursor: pointer;"><span class="fas fa-angle-down" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></span></div>
         <div class="level-right" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-end; display: flex; color: inherit; margin-top: 0px;"><a class="copy" title="Copy" data-clipboard-target="#code-1663822179479602 .code" style="box-sizing: inherit; color: inherit; cursor: pointer; opacity: 0.7; padding: 0em 0.75em;"><span class="fas fa-copy" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></a></div>
         </figcaption>
      <div class="highlight-body" style="box-sizing: inherit; overflow: auto;">
         <table style="box-sizing: inherit; border-spacing: 0px; width: auto;">
            <tbody style="box-sizing: inherit;">
               <tr style="box-sizing: inherit;">
                  <td class="gutter" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; text-align: right; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial; background: rgba(200, 200, 200, 0.15);">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">1</span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">2</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  <td class="code" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial;">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">// for SW_SPI</span></span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-function" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">U8G2_SSD1306_128X64_NONAME_F_4W_SW_SPI <span class="hljs-title" style="box-sizing: inherit; font-style: inherit; font-weight: bold; color: #a6e22e;">u8g2</span><span class="hljs-params" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">(U8G2_R0, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* clock=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">26</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* data=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">25</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* cs=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">5</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* dc=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">14</span>, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* reset=*/</span><span class="hljs-number" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">15</span>)</span></span>;</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </figure>
   <br style="box-sizing: inherit;" /><br style="box-sizing: inherit;" />
   <h3 id="I2C-OLED" style="box-sizing: inherit; margin: 1.3333em 0px 0.6666em; padding: 0px; font-size: 1.5em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#I2C-OLED" class="headerlink" title="I2C OLED" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>I2C OLED</h3>
   <h4 id="pinmap-1" style="box-sizing: inherit; margin: 0px 0px 0.8em; padding: 0px; font-size: 1.25em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#pinmap-1" class="headerlink" title="pinmap" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>pinmap</h4>
   <table style="box-sizing: inherit; border-spacing: 0px; width: 867px; margin-bottom: 1em;">
      <thead style="box-sizing: inherit;">
         <tr style="box-sizing: inherit;">
            <th style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; color: #363636; text-align: left; border-style: solid; border-color: #dbdbdb; border-width: 0px 0px 2px;">OLED</th>
            <th style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; color: #363636; text-align: left; border-style: solid; border-color: #dbdbdb; border-width: 0px 0px 2px;">ESP32</th>
            </tr>
         </thead>
      <tbody style="box-sizing: inherit;">
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">GND</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">GND</td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">VDD</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">3.3V</td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;">SDA</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: solid; border-color: #dbdbdb; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px;"><span style="box-sizing: inherit; color: #363636; font-weight: 700;">21</span>&nbsp;(HW_I2C 사용시 GPIO_21로 고정)</td>
            </tr>
         <tr style="box-sizing: inherit;">
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-width: 0px; border-style: solid; border-color: #dbdbdb;">SCL</td>
            <td style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-width: 0px; border-style: solid; border-color: #dbdbdb;"><span style="box-sizing: inherit; color: #363636; font-weight: 700;">22</span>&nbsp;(HW_I2C 사용시 GPIO_22으로 고정)</td>
            </tr>
         </tbody>
      </table>
   <br style="box-sizing: inherit;" />
   <h4 id="schematic-1" style="box-sizing: inherit; margin: 0px 0px 0.8em; padding: 0px; font-size: 1.25em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#schematic-1" class="headerlink" title="schematic" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>schematic</h4>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;"><a class="gallery-item" href="https://stemwith.github.io/image/u/u8g2-oled-i2c-03.png" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"><img src="https://stemwith.github.io/image/u/u8g2-oled-i2c-03.png" style="box-sizing: inherit; height: auto; max-width: 100%; margin-top: 30px;" /></a></p>
   <br style="box-sizing: inherit;" />
   <h4 id="sketch-1" style="box-sizing: inherit; margin: 0px 0px 0.8em; padding: 0px; font-size: 1.25em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#sketch-1" class="headerlink" title="sketch" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>sketch</h4>
   <h5 id="sketch-SH1106-HW-I2C" style="box-sizing: inherit; margin: 0px 0px 0.8888em; padding: 0px; font-size: 1.125em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#sketch-SH1106-HW-I2C" class="headerlink" title="sketch: SH1106, HW_I2C" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>sketch: SH1106, HW_I2C</h5>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">HW_I2C를 사용하는 경우에는 SDA, SCL을 ESP32에 지정된 핀으로 사용하기 때문에, 구동 드라이버만 지정해주면 된다.</p>
   <figure class="highlight c hljs" id="code-166382217947954" style="box-sizing: inherit; margin-top: 2em; margin-bottom: 2em; padding: 0px; overflow: hidden; background: rgb(39, 40, 34); color: #dddddd; max-width: 100%; text-align: center; width: 867px; position: relative; border-radius: 4px; margin-right: 0px !important; margin-left: 0px !important;">
      <figcaption class="level is-mobile" style="box-sizing: inherit; align-items: center; justify-content: space-between; display: flex; background: rgba(200, 200, 200, 0.15); padding: 0.3em 0em 0.3em 0.75em; font-size: 0.8em; margin-bottom: 1.5rem; overflow: auto; margin-top: 0px !important; margin-right: 0px !important; margin-left: 0px !important;">
         <div class="level-left" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-start; display: flex; color: inherit;"><span class="fold" style="box-sizing: inherit; font-style: inherit; color: inherit; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; cursor: pointer;"><span class="fas fa-angle-down" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></span></div>
         <div class="level-right" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-end; display: flex; color: inherit; margin-top: 0px;"><a class="copy" title="Copy" data-clipboard-target="#code-166382217947954 .code" style="box-sizing: inherit; color: inherit; cursor: pointer; opacity: 0.7; padding: 0em 0.75em;"><span class="fas fa-copy" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></a></div>
         </figcaption>
      <div class="highlight-body" style="box-sizing: inherit; overflow: auto;">
         <table style="box-sizing: inherit; border-spacing: 0px; width: auto;">
            <tbody style="box-sizing: inherit;">
               <tr style="box-sizing: inherit;">
                  <td class="gutter" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; text-align: right; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial; background: rgba(200, 200, 200, 0.15);">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">1</span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">2</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  <td class="code" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial;">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">// for SH1106,  I2C, (ESP32: SDA 21, SCL 22)</span></span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-function" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">U8G2_SH1106_128X64_NONAME_F_HW_I2C <span class="hljs-title" style="box-sizing: inherit; font-style: inherit; font-weight: bold; color: #a6e22e;">u8g2</span><span class="hljs-params" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">(U8G2_R0, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* reset=*/</span> U8X8_PIN_NONE)</span></span>;</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </figure>
   <br style="box-sizing: inherit;" />
   <h5 id="sketch-SSD1306-HW-I2C" style="box-sizing: inherit; margin: 0px 0px 0.8888em; padding: 0px; font-size: 1.125em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#sketch-SSD1306-HW-I2C" class="headerlink" title="sketch: SSD1306, HW_I2C" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>sketch: SSD1306, HW_I2C</h5>
   <figure class="highlight c hljs" id="code-1663822179479523" style="box-sizing: inherit; margin-top: 2em; margin-bottom: 2em; padding: 0px; overflow: hidden; background: rgb(39, 40, 34); color: #dddddd; max-width: 100%; text-align: center; width: 867px; position: relative; border-radius: 4px; margin-right: 0px !important; margin-left: 0px !important;">
      <figcaption class="level is-mobile" style="box-sizing: inherit; align-items: center; justify-content: space-between; display: flex; background: rgba(200, 200, 200, 0.15); padding: 0.3em 0em 0.3em 0.75em; font-size: 0.8em; margin-bottom: 1.5rem; overflow: auto; margin-top: 0px !important; margin-right: 0px !important; margin-left: 0px !important;">
         <div class="level-left" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-start; display: flex; color: inherit;"><span class="fold" style="box-sizing: inherit; font-style: inherit; color: inherit; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; cursor: pointer;"><span class="fas fa-angle-down" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></span></div>
         <div class="level-right" style="box-sizing: inherit; flex: 0 0 auto; align-items: center; justify-content: flex-end; display: flex; color: inherit; margin-top: 0px;"><a class="copy" title="Copy" data-clipboard-target="#code-1663822179479523 .code" style="box-sizing: inherit; color: inherit; cursor: pointer; opacity: 0.7; padding: 0em 0.75em;"><span class="fas fa-copy" style="box-sizing: inherit; -webkit-font-smoothing: antialiased; display: inline-block; font-variant-numeric: normal; font-variant-east-asian: normal; text-rendering: auto; line-height: inherit; font-family: &quot;Font Awesome 5 Free&quot;; font-weight: 900; color: inherit;"></span></a></div>
         </figcaption>
      <div class="highlight-body" style="box-sizing: inherit; overflow: auto;">
         <table style="box-sizing: inherit; border-spacing: 0px; width: auto;">
            <tbody style="box-sizing: inherit;">
               <tr style="box-sizing: inherit;">
                  <td class="gutter" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; text-align: right; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial; background: rgba(200, 200, 200, 0.15);">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">1</span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;">2</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  <td class="code" style="box-sizing: inherit; padding: 0.5em 0.75em; vertical-align: top; border-style: none; border-color: initial; border-top-width: initial; border-right-width: initial; border-bottom-width: 0px; border-left-width: initial;">
                     <pre style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px; padding: 0px; -webkit-font-smoothing: auto; font-family: &quot;Source Code Pro&quot;, monospace, &quot;Microsoft YaHei&quot;; background: transparent; color: inherit; font-size: 0.85em; overflow: visible; overflow-wrap: normal; max-width: 100%;"><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">// for SSD1306, I2C, (ESP32: SDA 21, SCL 22)</span></span><br style="box-sizing: inherit;" /><span class="line" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; line-height: 1.5rem;"><span class="hljs-function" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">U8G2_SSD1306_128X64_NONAME_F_HW_I2C <span class="hljs-title" style="box-sizing: inherit; font-style: inherit; font-weight: bold; color: #a6e22e;">u8g2</span><span class="hljs-params" style="box-sizing: inherit; font-style: inherit; font-weight: inherit;">(U8G2_R0, <span class="hljs-comment" style="box-sizing: inherit; font-style: inherit; font-weight: inherit; color: #75715e;">/* reset=*/</span> U8X8_PIN_NONE)</span></span>;</span><br style="box-sizing: inherit;" /></pre>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </figure>
   <br style="box-sizing: inherit;" /><br style="box-sizing: inherit;" />
   <h3 id="U8g2-라이브러리" style="box-sizing: inherit; margin: 1.3333em 0px 0.6666em; padding: 0px; font-size: 1.5em; font-weight: 400; color: #363636; line-height: 1.125; scroll-margin: 1em;"><a href="https://stemwith.github.io/2021/09/26/ESP32-OLED/#U8g2-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC" class="headerlink" title="U8g2 라이브러리" style="box-sizing: inherit; color: #363636; cursor: pointer; text-decoration-line: none;" target="_blank"></a>U8g2 라이브러리</h3>
   <p style="box-sizing: inherit; margin-bottom: 1em; padding: 0px;">ESP32나 Arduino에서 OLED를 사용을 위한 대표적인 라이브러리는 3~4가지 정도이다.</p>
   <ul style="box-sizing: inherit; margin: 1em 0px 1em 2em; padding: 0px; list-style-position: outside; list-style-image: initial;">
      <li style="box-sizing: inherit; margin: 0px; padding: 0px;">U8glib</li>
      <li style="box-sizing: inherit; margin: 0.25em 0px 0px; padding: 0px;"><span style="box-sizing: inherit; color: #363636; font-weight: 700;">U8g2</spa