<figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-origin-width="299" data-origin-height="245" style="margin: 0px auto 20px; max-width: 100%; clear: both; padding: 0px; display: table; position: relative; text-align: center; font-family: &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><span data-url="https://blog.kakaocdn.net/dn/bg2Csh/btrz3kR412h/chO7Xf23ZiPphSxCKn3IQk/img.png" data-lightbox="lightbox" style="cursor: pointer;"><img src="https://blog.kakaocdn.net/dn/bg2Csh/btrz3kR412h/chO7Xf23ZiPphSxCKn3IQk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbg2Csh%2Fbtrz3kR412h%2FchO7Xf23ZiPphSxCKn3IQk%2Fimg.png" data-origin-width="299" data-origin-height="245" style="border: none; vertical-align: top; max-width: 100%; display: inline-block; width: 299px; margin: 0px; height: auto;" /></span></figure>
<p style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">ESP32에서 웹서버 구현 방법에는 여러가지가 있는데 이번에는 장점이 많은 비동기 웹서버를 이용하여 구현해 보았다.</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">장점이 있지만 라이브러리가 필요하다.</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">ESPAsyncTCP, ESPAsyncWebServer (<a href="https://github.com/me-no-dev/ESPAsyncWebServer" target="_blank" rel="noopener" style="color: #666666;">https://github.com/me-no-dev/ESPAsyncWebServer</a>)</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">지난번 기본 라이브러리로 제공하는&nbsp;<a href="https://nexp.tistory.com/3369" target="_blank" rel="noopener" style="color: #666666;">ESP32 동기식 웹서버 예제</a>와 같이 이번에도 가장 기본이 되는 웹서버 코드로 구현 해 보자</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<pre id="code_1648781108857" class="c++ arduino" data-ke-language="c++" data-ke-type="codeblock" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word;">
   <code class="hljs cpp" style="margin: 0px; padding: 20px; display: block; overflow-x: auto; color: #abb2bf; background: rgb(40, 44, 52);"><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">ifdef</span> ESP32 <span class="hljs-comment" style="color: #b18eb1; font-style: italic;">// ESP32 libraries</span></span><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string" style="color: #98c379;">&lt;WiFi.h&gt;</span></span><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string" style="color: #98c379;">&lt;AsyncTCP.h&gt;</span></span><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">else</span><span class="hljs-comment" style="color: #b18eb1; font-style: italic;">// ESP8266 libraries</span></span><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string" style="color: #98c379;">&lt;ESP8266WiFi.h&gt;</span></span><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string" style="color: #98c379;">&lt;ESPAsyncTCP.h&gt;</span></span><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">endif</span></span><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">include</span><span class="hljs-meta-string" style="color: #98c379;">&lt;ESPAsyncWebServer.h&gt;</span></span><span class="hljs-comment" style="color: #b18eb1; font-style: italic;">// SSID &amp; Password</span><span class="hljs-keyword" style="color: #f92672;">const</span><span class="hljs-keyword" style="color: #f92672;">char</span> *ssid = <span class="hljs-string" style="color: #98c379;">" "</span>;
<span class="hljs-keyword" style="color: #f92672;">const</span><span class="hljs-keyword" style="color: #f92672;">char</span> *password = <span class="hljs-string" style="color: #98c379;">" "</span>;
<span class="hljs-function" style="color: #61aeee;">AsyncWebServer <span class="hljs-title">server</span><span class="hljs-params" style="color: #a6e22e;">(<span class="hljs-number" style="color: #d19a66;">80</span>)</span></span>;  <span class="hljs-comment" style="color: #b18eb1; font-style: italic;">// Object of WebServer(HTTP port, 80 is defult)</span><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">define</span> Led1Pin        23    </span><span class="hljs-comment" style="color: #b18eb1; font-style: italic;">// HTML &amp; CSS contents which display on web server</span><span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">if</span> 1</span><span class="hljs-keyword" style="color: #f92672;">const</span><span class="hljs-keyword" style="color: #f92672;">char</span> index_html[] PROGMEM = <span class="hljs-string" style="color: #98c379;">R"rawliteral(
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;center&gt;
&lt;h1&gt;ESP32 Simple WebServer - Async Mode&lt;/h1&gt;
&lt;a href="on"&gt;&lt;button class="button"&gt;ON&lt;/button&gt;&lt;/a&gt;&lt;p&gt;&lt;/p&gt;
&lt;a href="off"&gt;&lt;button class="button"&gt;OFF&lt;/button&gt;&lt;/a&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;
)rawliteral"</span>;
<span class="hljs-meta" style="color: #61aeee;">#<span class="hljs-meta-keyword">endif</span></span><span class="hljs-comment" style="color: #b18eb1; font-style: italic;">//페이지 요청이 들어 오면 처리 하는 함수</span><span class="hljs-function" style="color: #61aeee;">String <span class="hljs-title">processor</span><span class="hljs-params" style="color: #a6e22e;">(<span class="hljs-keyword" style="color: #f92672;">const</span> String&amp; var)</span></span>{
  Serial.<span class="hljs-built_in" style="color: #e6c07b;">println</span>(var);
  <span class="hljs-keyword" style="color: #f92672;">return</span> var;
}
<span class="hljs-function" style="color: #61aeee;"><span class="hljs-keyword" style="color: #f92672;">void</span><span class="hljs-title">onRootRequest</span><span class="hljs-params" style="color: #a6e22e;">(AsyncWebServerRequest *request)</span></span>{
  request-&gt;<span class="hljs-built_in" style="color: #e6c07b;">send_P</span>(<span class="hljs-number" style="color: #d19a66;">200</span>, <span class="hljs-string" style="color: #98c379;">"text/html"</span>, index_html, processor);
}
<span class="hljs-function" style="color: #61aeee;"><span class="hljs-keyword" style="color: #f92672;">void</span><span class="hljs-title">InitWebServer</span><span class="hljs-params" style="color: #a6e22e;">()</span></span>{
    server.<span class="hljs-built_in" style="color: #e6c07b;">on</span>(<span class="hljs-string" style="color: #98c379;">"/"</span>, onRootRequest);
    server.<span class="hljs-built_in" style="color: #e6c07b;">on</span>(<span class="hljs-string" style="color: #98c379;">"/on"</span>, HTTP_GET, [] (AsyncWebServerRequest *request) {
      <span class="hljs-built_in" style="color: #e6c07b;">digitalWrite</span>(Led1Pin, <span class="hljs-number" style="color: #d19a66;">1</span>); 
      request-&gt;<span class="hljs-built_in" style="color: #e6c07b;">send_P</span>(<span class="hljs-number" style="color: #d19a66;">200</span>, <span class="hljs-string" style="color: #98c379;">"text/html"</span>, index_html, processor);
    });
    server.<span class="hljs-built_in" style="color: #e6c07b;">on</span>(<span class="hljs-string" style="color: #98c379;">"/off"</span>, HTTP_GET, [] (AsyncWebServerRequest *request) {
      <span class="hljs-built_in" style="color: #e6c07b;">digitalWrite</span>(Led1Pin, <span class="hljs-number" style="color: #d19a66;">0</span>); 
      request-&gt;<span class="hljs-built_in" style="color: #e6c07b;">send_P</span>(<span class="hljs-number" style="color: #d19a66;">200</span>, <span class="hljs-string" style="color: #98c379;">"text/html"</span>, index_html, processor);
    });
    server.<span class="hljs-built_in" style="color: #e6c07b;">begin</span>();
}
<span class="hljs-function" style="color: #61aeee;"><span class="hljs-keyword" style="color: #f92672;">void</span><span class="hljs-title">setup</span><span class="hljs-params" style="color: #a6e22e;">()</span></span>{
    <span class="hljs-built_in" style="color: #e6c07b;">pinMode</span>(Led1Pin, OUTPUT);
    <span class="hljs-built_in" style="color: #e6c07b;">digitalWrite</span>(Led1Pin, <span class="hljs-number" style="color: #d19a66;">1</span>);
    Serial.<span class="hljs-built_in" style="color: #e6c07b;">begin</span>(<span class="hljs-number" style="color: #d19a66;">115200</span>);
    Serial.<span class="hljs-built_in" style="color: #e6c07b;">println</span>(<span class="hljs-string" style="color: #98c379;">"ESP32 Simple web Start"</span>);
    Serial.<span class="hljs-built_in" style="color: #e6c07b;">println</span>(ssid);
    <span class="hljs-comment" style="color: #b18eb1; font-style: italic;">//Wifi 접속</span>
    WiFi.<span class="hljs-built_in" style="color: #e6c07b;">begin</span>(ssid, password);
    <span class="hljs-keyword" style="color: #f92672;">while</span> (WiFi.<span class="hljs-built_in" style="color: #e6c07b;">status</span>() != WL_CONNECTED)
    {
      <span class="hljs-built_in" style="color: #e6c07b;">delay</span>(<span class="hljs-number" style="color: #d19a66;">1000</span>);
      Serial.<span class="hljs-built_in" style="color: #e6c07b;">print</span>(<span class="hljs-string" style="color: #98c379;">"."</span>);
    }
    Serial.<span class="hljs-built_in" style="color: #e6c07b;">println</span>(<span class="hljs-string" style="color: #98c379;">""</span>);
    Serial.<span class="hljs-built_in" style="color: #e6c07b;">println</span>(<span class="hljs-string" style="color: #98c379;">"WiFi connected successfully"</span>);
    Serial.<span class="hljs-built_in" style="color: #e6c07b;">print</span>(<span class="hljs-string" style="color: #98c379;">"IP: "</span>);
    Serial.<span class="hljs-built_in" style="color: #e6c07b;">println</span>(WiFi.<span class="hljs-built_in" style="color: #e6c07b;">localIP</span>());  <span class="hljs-comment" style="color: #b18eb1; font-style: italic;">//Show ESP32 IP on serial</span><span class="hljs-comment" style="color: #b18eb1; font-style: italic;">//웹서버 초기화 및 페이지 요청 처리 함수 등록</span><span class="hljs-built_in" style="color: #e6c07b;">InitWebServer</span>();
    Serial.<span class="hljs-built_in" style="color: #e6c07b;">println</span>(<span class="hljs-string" style="color: #98c379;">"HTTP server started"</span>);
    <span class="hljs-built_in" style="color: #e6c07b;">delay</span>(<span class="hljs-number" style="color: #d19a66;">100</span>); 
}
<span class="hljs-function" style="color: #61aeee;"><span class="hljs-keyword" style="color: #f92672;">void</span><span class="hljs-title">loop</span><span class="hljs-params" style="color: #a6e22e;">()</span></span>{
}</code>
   </pre>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">이번에는 웹페이지를 조금더 능동적으로 동작하도록 하기 위해 javascripts 를 사용해서 페이지 상태 정보를 전달 할 수 있도록 했다.</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">자바스크립트로 웹페이지 상의 체크 박스의 상태값을 읽어서 서버로 GET 메시지를 전송 하도록 했다.</p>
<pre id="code_1648797556445" class="html xml" data-ke-language="html" data-ke-type="codeblock" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word;">
   <code class="hljs xml" style="margin: 0px; padding: 20px; display: block; overflow-x: auto; color: #abb2bf; background: rgb(40, 44, 52);">const char index_html[] PROGMEM = R"rawliteral(
<span class="hljs-meta" style="color: #61aeee;">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">html</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">head</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">style</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name" style="color: #e06c75;">style</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name" style="color: #e06c75;">head</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">body</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">center</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">h1</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">center</span>&gt;</span>ESP32 Simple Web Server - Async<span class="hljs-tag">&lt;/<span class="hljs-name" style="color: #e06c75;">h1</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">br</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">br</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">h4</span>&gt;</span>LED - Status <span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">span</span><span class="hljs-attr" style="color: #d19a66;">id</span>=<span class="hljs-string" style="color: #98c379;">"outputState"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name" style="color: #e06c75;">h4</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">label</span><span class="hljs-attr" style="color: #d19a66;">class</span>=<span class="hljs-string" style="color: #98c379;">"switch"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">input</span><span class="hljs-attr" style="color: #d19a66;">type</span>=<span class="hljs-string" style="color: #98c379;">"checkbox"</span><span class="hljs-attr" style="color: #d19a66;">onchange</span>=<span class="hljs-string" style="color: #98c379;">"toggleCheckbox(this)"</span><span class="hljs-attr" style="color: #d19a66;">id</span>=<span class="hljs-string" style="color: #98c379;">"output"</span> &gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">span</span><span class="hljs-attr" style="color: #d19a66;">class</span>=<span class="hljs-string" style="color: #98c379;">"slider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name" style="color: #e06c75;">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name" style="color: #e06c75;">label</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name" style="color: #e06c75;">script</span>&gt;</span><span class="javascript"><span class="hljs-function" style="color: #61aeee;"><span class="hljs-keyword" style="color: #f92672;">function</span><span class="hljs-title">toggleCheckbox</span>(<span class="hljs-params" style="color: #a6e22e;">element</span>) </span>{
  <span class="hljs-keyword" style="color: #f92672;">var</span> xhr = <span class="hljs-keyword" style="color: #f92672;">new</span> XMLHttpRequest();
  <span class="hljs-keyword" style="color: #f92672;">if</span>(element.checked)
  { 
      xhr.open(<span class="hljs-string" style="color: #98c379;">"GET"</span>, <span class="hljs-string" style="color: #98c379;">"/update?output="</span>+element.id+<span class="hljs-string" style="color: #98c379;">"&amp;state=1"</span>, <span class="hljs-literal" style="color: #56b6c2;">true</span>);
  }
  <span class="hljs-keyword" style="color: #f92672;">else</span>
  { 
      xhr.open(<span class="hljs-string" style="color: #98c379;">"GET"</span>, <span class="hljs-string" style="color: #98c379;">"/update?output="</span>+element.id+<span class="hljs-string" style="color: #98c379;">"&amp;state=0"</span>, <span class="hljs-literal" style="color: #56b6c2;">true</span>);
  }
  xhr.send();
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name" style="color: #e06c75;">script</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name" style="color: #e06c75;">body</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name" style="color: #e06c75;">html</span>&gt;</span>
)rawliteral";</code>
   </pre>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">서버측에서는 상태 값에 따라 LED를 제어 할 수 있는 update 함수를 등록해서 제어 할 수 있도록 했다.</p>
<pre id="code_1648797602292" class="c++ arduino" data-ke-language="c++" data-ke-type="codeblock" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word;">
   <code class="hljs cpp" style="margin: 0px; padding: 20px; display: block; overflow-x: auto; color: #abb2bf; background: rgb(40, 44, 52);"><span class="hljs-function" style="color: #61aeee;"><span class="hljs-keyword" style="color: #f92672;">void</span><span class="hljs-title">onStatusUpdate</span><span class="hljs-params" style="color: #a6e22e;">(AsyncWebServerRequest *request)</span></span>{
    String inmsg; 
    <span class="hljs-keyword" style="color: #f92672;">if</span> (request-&gt;<span class="hljs-built_in" style="color: #e6c07b;">hasParam</span>(<span class="hljs-string" style="color: #98c379;">"state"</span>))
    {
        inmsg = request-&gt;<span class="hljs-built_in" style="color: #e6c07b;">getParam</span>(<span class="hljs-string" style="color: #98c379;">"state"</span>)-&gt;<span class="hljs-built_in" style="color: #e6c07b;">value</span>(); 
        <span class="hljs-built_in" style="color: #e6c07b;">digitalWrite</span>(Led1Pin, inmsg.<span class="hljs-built_in" style="color: #e6c07b;">toInt</span>()); 
    }
    <span class="hljs-keyword" style="color: #f92672;">else</span> {
        inmsg = <span class="hljs-string" style="color: #98c379;">"No message sent"</span>;
    }
    <span class="hljs-comment" style="color: #b18eb1; font-style: italic;">//Serial.print("LED ON");</span>
    Serial.<span class="hljs-built_in" style="color: #e6c07b;">println</span>(inmsg);
    request-&gt;<span class="hljs-built_in" style="color: #e6c07b;">send</span>(<span class="hljs-number" style="color: #d19a66;">200</span>, <span class="hljs-string" style="color: #98c379;">"text/plain"</span>, <span class="hljs-string" style="color: #98c379;">"OK"</span>);
}
<span class="hljs-function" style="color: #61aeee;"><span class="hljs-keyword" style="color: #f92672;">void</span><span class="hljs-title">initWebServer</span><span class="hljs-params" style="color: #a6e22e;">()</span></span>{
    server.<span class="hljs-built_in" style="color: #e6c07b;">on</span>(<span class="hljs-string" style="color: #98c379;">"/"</span>, onRootRequest);
    server.<span class="hljs-built_in" style="color: #e6c07b;">on</span>(<span class="hljs-string" style="color: #98c379;">"/update"</span>, onStatusUpdate);
    server.<span class="hljs-built_in" style="color: #e6c07b;">begin</span>();
}</code>
   </pre>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">웹페이지 실행후 체크 박스의 상태에 따라 LED가 제어 되는 것을 확인 할수 있다.</p>
<p style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-origin-width="602" data-origin-height="478" style="margin: 0px; max-width: 100%; clear: both; padding: 0px; display: table; position: relative; font-family: &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><span data-url="https://blog.kakaocdn.net/dn/bokDNW/btrybWYEhUG/mlXu2XYpJbpMDcCWMV8TI0/img.png" data-lightbox="lightbox" style="cursor: pointer;"><img src="https://blog.kakaocdn.net/dn/bokDNW/btrybWYEhUG/mlXu2XYpJbpMDcCWMV8TI0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbokDNW%2FbtrybWYEhUG%2FmlXu2XYpJbpMDcCWMV8TI0%2Fimg.png" data-origin-width="602" data-origin-height="478" style="border: none; vertical-align: top; max-width: 100%; display: inline-block; width: 602px; margin: 0px; height: auto;" /></span></figure>
<p style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" style="border: none; font-size: 0px; line-height: 0; height: 20px; margin: 20px auto; background-image: url(&quot;https://t1.daumcdn.net/keditor/dist/0.4.0/image/divider-line.svg&quot;); background-position: 0px -120px; background-size: 200px 200px; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-family: &quot;Noto Sans KR&quot;, sans-serif; cursor: pointer !important;" />
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">이번에도 ccs 문으로 좀더 화면을 꾸며 보자</p>
<pre id="code_1648797454725" class="css" data-ke-language="css" data-ke-type="codeblock" style="overflow: auto; margin-top: 0px; margin-bottom: 0px; padding: 0px; word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word;">
   <code class="hljs" style="margin: 0px; padding: 20px; display: block; overflow-x: auto; color: #abb2bf; background: rgb(40, 44, 52);">&lt;style&gt;
    <span class="hljs-selector-tag" style="color: #e06c75;">html</span> {<span class="hljs-attribute" style="color: #98c379;">font-family</span>: Arial; <span class="hljs-attribute" style="color: #98c379;">display</span>: inline-block; <span class="hljs-attribute" style="color: #98c379;">text-align</span>: center;}
    <span class="hljs-selector-tag" style="color: #e06c75;">h2</span> {<span class="hljs-attribute" style="color: #98c379;">font-size</span>: <span class="hljs-number" style="color: #d19a66;">3.0rem</span>;}
    <span class="hljs-selector-tag" style="color: #e06c75;">p</span> {<span class="hljs-attribute" style="color: #98c379;">font-size</span>: <span class="hljs-number" style="color: #d19a66;">3.0rem</span>;}
    <span class="hljs-selector-tag" style="color: #e06c75;">body</span> {<span class="hljs-attribute" style="color: #98c379;">max-width</span>: <span class="hljs-number" style="color: #d19a66;">600px</span>; <span class="hljs-attribute" style="color: #98c379;">margin</span>:<span class="hljs-number" style="color: #d19a66;">0px</span> auto; <span class="hljs-attribute" style="color: #98c379;">padding-bottom</span>: <span class="hljs-number" style="color: #d19a66;">25px</span>;}
    <span class="hljs-selector-class" style="color: #d19a66;">.switch</span> {<span class="hljs-attribute" style="color: #98c379;">position</span>: relative; <span class="hljs-attribute" style="color: #98c379;">display</span>: inline-block; <span class="hljs-attribute" style="color: #98c379;">width</span>: <span class="hljs-number" style="color: #d19a66;">120px</span>; <span class="hljs-attribute" style="color: #98c379;">height</span>: <span class="hljs-number" style="color: #d19a66;">68px</span>}
    <span class="hljs-selector-class" style="color: #d19a66;">.switch</span><span class="hljs-selector-tag" style="color: #e06c75;">input</span> {<span class="hljs-attribute" style="color: #98c379;">display</span>: none}
    <span class="hljs-selector-class" style="color: #d19a66;">.slider</span> {<span class="hljs-attribute" style="color: #98c379;">position</span>: absolute; <span class="hljs-attribute" style="color: #98c379;">top</span>: <span class="hljs-number" style="color: #d19a66;">0</span>; <span class="hljs-attribute" style="color: #98c379;">left</span>: <span class="hljs-number" style="color: #d19a66;">0</span>; <span class="hljs-attribute" style="color: #98c379;">right</span>: <span class="hljs-number" style="color: #d19a66;">0</span>; <span class="hljs-attribute" style="color: #98c379;">bottom</span>: <span class="hljs-number" style="color: #d19a66;">0</span>; <span class="hljs-attribute" style="color: #98c379;">background-color</span>: <span class="hljs-number" style="color: #d19a66;">#F63E36</span>; <span class="hljs-attribute" style="color: #98c379;">border-radius</span>: <span class="hljs-number" style="color: #d19a66;">34px</span>}
    <span class="hljs-selector-class" style="color: #d19a66;">.slider</span>:before {position: absolute; <span class="hljs-attribute" style="color: #98c379;">content</span>: <span class="hljs-string" style="color: #98c379;">""</span>; <span class="hljs-attribute" style="color: #98c379;">height</span>: <span class="hljs-number" style="color: #d19a66;">52px</span>; <span class="hljs-attribute" style="color: #98c379;">width</span>: <span class="hljs-number" style="color: #d19a66;">52px</span>; <span class="hljs-attribute" style="color: #98c379;">left</span>: <span class="hljs-number" style="color: #d19a66;">8px</span>; <span class="hljs-attribute" style="color: #98c379;">bottom</span>: <span class="hljs-number" style="color: #d19a66;">8px</span>; <span class="hljs-attribute" style="color: #98c379;">background-color</span>: <span class="hljs-number" style="color: #d19a66;">#fff</span>; -webkit-<span class="hljs-attribute" style="color: #98c379;">transition</span>: .<span class="hljs-number" style="color: #d19a66;">4s</span>; <span class="hljs-attribute" style="color: #98c379;">transition</span>: .<span class="hljs-number" style="color: #d19a66;">4s</span>; <span class="hljs-attribute" style="color: #98c379;">border-radius</span>: <span class="hljs-number" style="color: #d19a66;">68px</span>}
    <span class="hljs-selector-tag" style="color: #e06c75;">input</span><span class="hljs-selector-pseudo" style="color: #d19a66;">:checked</span>+<span class="hljs-selector-class" style="color: #d19a66;">.slider</span> {<span class="hljs-attribute" style="color: #98c379;">background-color</span>: <span class="hljs-number" style="color: #d19a66;">#3CC33C</span>}
    <span class="hljs-selector-tag" style="color: #e06c75;">input</span><span class="hljs-selector-pseudo" style="color: #d19a66;">:checked</span>+<span class="hljs-selector-class" style="color: #d19a66;">.slider</span>:before {-webkit-transform: <span class="hljs-built_in" style="color: #e6c07b;">translateX</span>(<span class="hljs-number" style="color: #d19a66;">52px</span>); -ms-<span class="hljs-attribute" style="color: #98c379;">transform</span>: <span class="hljs-built_in" style="color: #e6c07b;">translateX</span>(<span class="hljs-number" style="color: #d19a66;">52px</span>); <span class="hljs-attribute" style="color: #98c379;">transform</span>: <span class="hljs-built_in" style="color: #e6c07b;">translateX</span>(<span class="hljs-number" style="color: #d19a66;">52px</span>)}
&lt;/style&gt;</code>
   </pre>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">체크 박스의 상태가 좀더 이쁜 모양으로 표시 된다.</p>
<p style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-origin-width="602" data-origin-height="478" style="margin: 0px; max-width: 100%; clear: both; padding: 0px; display: table; position: relative; font-family: &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><span data-url="https://blog.kakaocdn.net/dn/ZWT9A/btrx8NIBfDk/throeYhYUNnEdkGy6b3ry0/img.png" data-lightbox="lightbox" style="cursor: pointer;"><img src="https://blog.kakaocdn.net/dn/ZWT9A/btrx8NIBfDk/throeYhYUNnEdkGy6b3ry0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZWT9A%2Fbtrx8NIBfDk%2FthroeYhYUNnEdkGy6b3ry0%2Fimg.png" data-origin-width="602" data-origin-height="478" style="border: none; vertical-align: top; max-width: 100%; display: inline-block; width: 602px; margin: 0px; height: auto;" /></span></figure>
<p style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">CCS 파일을 좀더 설정하면 다양한 형태의 웹페이지를 구현 할 수 있다. 물론 ESP32에서 구동되는 처리 함수는 동일하다.</p>
<p style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-origin-width="515" data-origin-height="537" style="margin: 0px; max-width: 100%; clear: both; padding: 0px; display: table; position: relative; font-family: &quot;Noto Sans KR&quot;, sans-serif; font-size: 16px;"><span data-url="https://blog.kakaocdn.net/dn/cUvZlt/btrydIMXpZL/S8wDfByg1jw7nmBKKwX6DK/img.png" data-lightbox="lightbox" style="cursor: pointer;"><img src="https://blog.kakaocdn.net/dn/cUvZlt/btrydIMXpZL/S8wDfByg1jw7nmBKKwX6DK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcUvZlt%2FbtrydIMXpZL%2FS8wDfByg1jw7nmBKKwX6DK%2Fimg.png" data-origin-width="515" data-origin-height="537" style="border: none; vertical-align: top; max-width: 100%; display: inline-block; width: 515px; margin: 0px; height: auto;" /></span></figure>
<p style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">&nbsp;</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;">ESP32 AsyncWebServer 테스트 동영상</p>
<p data-ke-size="size16" style="margin-bottom: 24px; padding: 0px; font-size: 0.9375em; line-height: 1.6; color: #666666; font-family: &quot;Noto Sans KR&quot;, sans-serif;"><a href="https://youtu.be/a-LHbHrdIHY" target="_blank" rel="noopener" style="color: #666666;">https://youtu.be/a-LHbHrdIHY</a></p>