5주 차 ESP32를 활용한 간단한 웹 서버 구축 및 CSS를 활용한 폰트 변경 - park-02/2024-1_Smart-Devices GitHub Wiki

목차

  • 인터넷
  • 인터넷과 웹의 차이
  • 웹의 역사와 발전
  • 웹의 역사와 기본 구성 요소
  • HTML 소개
  • HTML의 본질과 마크업 언어
  • OSI 7계층
  • 실습[1] 내용
  • 과제 : CSS를 활용하여 웹 내 폰트 변경
  • 후기

1. 인터넷

1-1 인터넷의 개념

  • 유닉스 운영체제를 기반으로 하는 네트워크들의 집합체입니다.

1-2 주요 서비스

  • WWW(World Wide Web) : 하이퍼 텍스트 기반으로 되어 있는 HTTP 프로토콜을 사용하며 웹페이지는 서버에서 정보를 제공하여 주고 클라이언트에서는 웹 브라우저에 의해 정보를 검색하고 제공합니다.
  • FTP(File Transfer Protocol) : 파일을 송수신할 때 사용되는 서비스입니다.
  • 전자우편(E-Mail) : 컴퓨터 통신망을 이용하여 사용자 간에 편지나 여러 정보를 주고 받을 수 있는 서비스입니다.

인터넷과 웹의 차이

  • 인터넷과 웹은 다른 개념입니다.
  • 인터넷은 컴퓨터들이 서로 연결되어 있는 거대한 네트워크를 의미하고, 웹은 인터넷상에서 정보를 공유하고 접근할 수 있는 하나의 애플리케이션입니다.
  • 웹이 너무 중요하고 성공한 서비스이기 때문에 인터넷과 동의어처럼 사용하게 되었습니다.

웹의 역사와 발전

  • 웹은 1960년대에 등장한 인터넷을 기반으로 1990년대에 개발되었습니다.
  • 웹은 전 세계를 연결하는 거대한 네트워크이며, HTML이라는 프로그램을 통해 웹페이지를 만들고 볼 수 있습니다.
  • 웹의 발전은 캠브리지 대학교의 연구소에서 시작되었으며, 현재는 누구나 사용할 수 있는 공개 네트워크로 성장했습니다.

웹의 역사와 기본 구성 요소

  • 웹의 초기 형태는 간단했지만, 점점 더 복잡해졌습니다.
  • 웹을 이해하려면 역사적 맥락을 통해 공부하는 것이 중요합니다.
  • 웹 브라우저, 웹 서버, HTML, HTTP가 웹의 기본 구성 요소입니다.

팀 버너스 리

  • 팀 버너스 리는 월드 와이드 웹(WWW)의 창시자로, 하이퍼텍스트를 기반으로 정보를 공유하는 혁신적인 기술을 개발했습니다. 웹의 표준화와 발전을 위해 노력하며, 전 세계적으로 널리 사용되는 인터넷 플랫폼으로의 성장에 중요한 역할을 하였습니다. 팀 버너스 리의 업적은 현대 사회에서 필수적인 커뮤니케이션과 정보 공유의 수단으로 웹을 자리매김하게 되었습니다. 팀 버너스 리는 미래 웹의 발전과 혁신에 대한 비전을 계속해서 제시하고 있습니다.

HTML 소개

  • HTML은 웹에서 주인공과 같은 역할을 하는 아주 중요한 언어입니다.
  • HTML은 하이퍼텍스트 마크업 언어의 약자로, 하이퍼텍스트는 문서와 문서가 링크로 연결되어 있는 것을 말합니다.
  • HTML의 첫 번째 이름이 하이퍼텍스트라는 것을 통해서 알 수 있는 것은 HTML에 있어서 가장 중요한 것은 하이퍼텍스트라는 것을 의미합니다.

HTML의 본질과 마크업 언어

  • HTML의 본질은 링크이며, 웹의 중심입니다.
  • HTML은 하이퍼텍스트 마크업 언어로, 사람과 웹 브라우저가 모두 이해할 수 있는 언어입니다.
  • 태그는 HTML의 기본 단위이며, 태그를 사용하여 문서의 구조와 내용을 정의합니다.

OSI 7계층

osi-layers

  • 1 계층 - 물리(Physical) 계층
    ㆍ 기계적. 전기적, 절차적 특성을 정의한 계층으로, 실제 장비들을 연결하기 위한 연결 장치이다. (비트)
  • 2 계층 - 데이터 링크(Data Link) 계층
    ㆍ 물리적 연결을 이용해 신뢰성 있는 정보를 전송하기 위해 동기화, 오류 제어, 흐름 제어, 접근 제어 등의 전송 에러를 제어하는 계층이다. (프레임)
  • 3 계층 - 네트워크(Network) 계층
    ㆍ 통신망을 통하여 패킷을 목적지까지 전달하는 것을 담당하는 계층이다. (패킷)
  • 4 계층 - 전송(Transport) 계층
    ㆍ 종단 간 신뢰성 있고 효율적인 데이터 전송을 다루는 계층이다. (세그먼트)
  • 5 계층 - 세션(Session) 계층
    ㆍ 프로세스 간의 대화 제어 및 동기점을 이용한 효율적인 데이터 복구 제공을 위 한 계층이다. (메시지)
  • 6 계층 - 표현(Presentation) 계층
    ㆍ 정보의 형식 설정과 코드의 변환, 암호화, 압축 등의 기능을 주로 수행하는 계층이다.
  • 7 계층 - 응용(Application) 계층
    ㆍ 사용자에게 서비스를 제공하는 계층으로, 사용자 입출력 정의, 응용 프로세스 관리 등을 수행한다.

실습[1] 내용

이번 실습에서는 ESP32를 사용하여 간단한 웹 서버를 구축하여 "Hello from ESP32!"라는 메시지를 반환하는 방법을 배웠습니다.

준비물

  • ESP32, ESP32 확장 실드, WI-Fi 네트워크

소스코드

#include         // WiFi 라이브러리를 포함합니다.
#include    // WebServer 라이브러리를 포함합니다.

const char* ssid = "U+NetC8B4";             // 연결할 Wi-Fi의 SSID를 입력합니다.
const char* password = "1157004727";     // Wi-Fi의 비밀번호를 입력합니다.

WebServer server(80);                          // 포트 번호 80을 사용하여 WebServer 객체를 생성합니다.

void handleRoot() {
  server.send(200, "text/plain", "Hello from ESP32!");   // "/" 경로에 대한 요청을 처리하는 핸들러 함수입니다.
}

void setup() {
  Serial.begin(115200);                         // 시리얼 통신을 초기화합니다.

  WiFi.begin(ssid, password);                    // Wi-Fi에 연결합니다.
  Serial.println("Connected to WiFi");           
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }

  server.on("/", handleRoot);                    // "/" 경로에 대한 요청을 handleRoot() 함수로 처리합니다.

  while (WiFi.status() != WL_CONNECTED) {        // Wi-Fi 연결이 완료될 때까지 대기합니다.
      delay(500);
      Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());                // Wi-Fi의 로컬 IP 주소를 출력합니다.

  server.begin();                                // 서버를 시작합니다.
}

void loop() {
  server.handleClient();                         // 클라이언트의 요청을 처리합니다.
}
  • WiFi 및 WebServer 라이브러리를 포함합니다.
  • 연결할 Wi-Fi의 SSID와 비밀번호를 설정합니다.
  • WebServer 객체 생성: 포트 번호 80을 사용하여 WebServer 객체를 생성합니다.
  • handleRoot() 함수: "/" 경로에 대한 요청을 처리하는 핸들러 함수로, "Hello from ESP32!"라는 텍스트를 반환합니다.
  • setup() 함수: 시리얼 통신 초기화, Wi-Fi 연결, 서버 시작과 같은 초기 설정을 수행합니다.
  • loop() 함수: 클라이언트 요청을 지속적으로 처리합니다.

실행

  • 코드에서 "YourNetworkSSID"와 "YourNetworkPassword"를 사용 중인 Wi-Fi 네트워크의 이름("U+NetC8B4")과 암호("1157004727")로 대체합니다.
  • ESP32를 컴퓨터에 연결하고 업로드합니다.
  • 시리얼 모니터에서 할당된 IP 주소를 확인합니다.
  • 웹 브라우저를 열고 해당 IP 주소로 이동하여 "Hello from ESP32!" 메시지를 확인합니다.

과제 : CSS를 활용하여 웹 내 폰트 변경

CSS란?

웹 페이지의 디자인과 레이아웃을 꾸미는 스타일 시트 언어입니다. HTML과 함께 사용되며, 웹 페이지의 색상, 글꼴, 간격 등을 지정하여 시각적인 효과를 부여합니다.

ahahaga

과제 내용

웹 페이지에서 폰트 크기와 색상을 변경하기 위해서는 "text/plain"을 "text/html"로 변경하여 HTML 스타일을 사용할 수 있도록 응답 유형을 수정해야 합니다.

handleRoot() 함수를 업데이트하여 폰트 크기와 색상을 포함하도록 수정한 예: gagaga
이 코드에서는 응답 유형을 "text/html"로 변경하여 HTML 내용을 지원하고, HTML 내용에는 color를 파란색으로, 폰트 크기를 24px로 설정하는 인라인 CSS 스타일이 적용된 h1 태그를 포함하고 있다. 웹 브라우저에서 접근할 때 "Hello, World!"가 24px의 크기와 파란색으로 폰트를 표시해야함.

소스코드

asfazx

  • 폰트 크기와 색상을 변경하려면, "text/plain"을 "text/html"로 변경해 HTML 스타일을 사용할 수 있도록 해야 합니다.
  • <title> : HTML 문서의 제목을 정의하는 태그입니다. 이 태그 안에 들어가는 텍스트는 브라우저의 제목 표시줄이나 페이지의 탭에 표시됩니다.
  • <style> : 이 태그 안에 CSS 스타일을 작성하여 HTML 요소들의 모양, 레이아웃, 색상 등을 변경할 수 있습니다. CSS 코드는 HTML 문서의 태그 안에 위치하며, 해당 * 코드는 HTML 요소들에 적용됩니다.
  • font : 텍스트의 글꼴(font-family), 굵기(font-weight), 스타일(font-style), 크기(font-size), 줄 간격(line-height) 등을 설정하는 데 사용됩니다
  • color : 이 속성을 사용하여 HTML 요소의 텍스트를 원하는 색으로 변경할 수 있습니다.
  • font-size : CSS 속성 중 하나로, 텍스트의 글꼴 크기를 지정하는 데 사용됩니다.

결과

  • CSS를 사용하여 h1태크에 스타일을 적용하여 "Hello, World!"의 글꼴 크기가 24PX로, 색깔은 파란색으로 나타납니다.

후기

인터넷과 웹의 차이를 이해하고, 웹의 역사와 발전에 대한 기본 지식을 습득했습니다. HTML의 중요성과 기본적인 구성 요소를 숙지했으며, 이번 실습을 통해 ESP32를 사용하여 간단한 웹 서버를 구축하는 방법을 배웠습니다. 이를 통해 "Hello from ESP32!"라는 메시지를 반환하는 간단한 웹 페이지를 만들어보고 CSS를 활용하여 글꼴의 크기와 색깔을 변경해 보았습니다. 이를 통해 인터넷과 웹의 동작 방식에 대한 이해도가 높아졌습니다. 이러한 학습을 통해 웹 기술에 대한 이해와 EPS32를 활용한 응용 능력을 발전시킬 수 있을 것입니다.

⚠️ **GitHub.com Fallback** ⚠️