[WiFi]esp12의 WebServer에서 간단한 HTML 출력

개요

esp-12를 WebServer로 사용할 수 있습니다

이 동작을 하기 위해서는 Browser 또는 App에 화면을 전송하여야 하는데

JSON같은 형태를 사용할 수도 있으나, 저는 간단한 화면임으로 HTML을 사용하였습니다.

HTML Table 태그

<table>    <- 테이블 구성임을 선언한다

    <th>SSID이름</th>  <- 테이블 헤더를 선언한다(각 열의 제목을 선언)

    <th>수신감도</th>

    <tr>      <- 데이터가 들어가는 첫번째 행을 선언

        <td>검색된 SSID이름</td>  <- 첫번째 행의 데이터를 입력

        <td>수신감도</td>

    </tr>   <- 첫번째 행 종료

   <tr>     <- 두번째 행 시작

        <td>검색된 SSID이름</td>

        <td>수신감도</td>

    </tr>     <- 두번째 행 종료

</table>   <- 테이블 종료

 

HTML  Table에 Style 적용

<style>     <- 스타일 적용을 선언한다

    table{    <- table에 적용한다

        margin:auto   <- 테이블 외부의 공백을 자동으로 맞춘다(화면의 좌우에서 중앙에 위치한다)

    }

    table, th, td{    <- table, th, td 태그에 전부 적용한다

        border: 1px, solid black;  <- 경계선은 1px 두께의 검정색 실선으로 한다

        border-collapse: collapse;  <- border-collapse: 표의 테두리와 안에 있는 셀의 테두리 처리방식

                                                   <- collapse: 표의 테두리와 셀의 테두리 겹치는 부분을 한 선으로 처리

    }

    th, td{    <- th와 td 테그에만 적용

        padding-top: 5px;   <- 셀 내부에 padding을 5px로 설정한다

        padding-bottom: 5px; 

        padding-left: 5px;

        padding-right: 5px;

    }

</style>

Esp-8266에서 HTML 출력

esp-12 주변에 검색되는 AP의 SSID와 RSSI를 출력하겠습니다.

위의 내용을 적용한 프로그램입니다.

 

즐거운 시간되시기 바랍니다.