FE/Web

Web 기초 지식

이번 포스팅에서는 HTML, CSS, JavaScript 등등 Web을 구성하는 요소에 대해 정리해보았습니다. 기본적으로 웹 페이지는 HTML로 구현된다. HTML은 "Hyper Text Markup Language"의 약자로 웹 사이트의 페이지의 제목, 문단 등의 웹의 모습을 기술하기 위한 마크업 언어이다. Web의 구조등 정적인 컨텐츠 밖에 표현할 수가 없다. 마우스 포인터가 하이퍼링크 위로 이동하면 하이퍼링크 텍스트 색상이 바뀌거나, 서브메뉴가 열리는 등의 효과는 HTML 과 함께 사용되는 PHP나 JavaScript 같은 스크립트를 함께 사용해야 가능하다. CSS는 (Cascading Style Sheets)는 마크업 언어 등의 보조적인 역할을 수행한다. 실제 화면에 표기되는 색상, 크기, 폰트 ..

챗 GPT로 웹 페이지 만들기

이번 포스팅에서는 이전 포스팅인 "챗 GPT 사용하기"에 이어서 챗 GPT를 사용하면서 직접 HTML/CSS/JavaScript를 다뤄보는 포스팅입니다. https://serin99.tistory.com/33 챗 GPT 사용하기 🤔 ChatGPT란? ChatGPT는 OpenAI에서 개발한 인공지능 서비스입니다. GPT는 ‘Generative Pre-trained Transformer’의 약자로 머신러닝을 통해 방대한 데이터를 생성하는 AI입니다. 위와 같은 GPT의 3.5, 4 버전의 A serin99.tistory.com 챗 GPT에 질문을 할 때 자신이 원하는 결과물에 대해 상세하게 질문을 하는 것이 좋습니다. (한 구역의 폰트의 색상, 크기, 여백 등의 정보들을 상세히 기제) 또한 챗 GPT를 이용..

Flask 사용해보기 2

간단하게 웹 서버를 구축하기 위해 환경 구성을 위하여 세부 폴더와 소스코드를 작성한다. from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/header') def header(): return render_template('header.html') @app.route('/link') def link(): return render_template('link.html') @app.route('/text') def text(): return render_template('text.html') @app.route..

Flask 사용해보기

플라스크는 파이썬으로 작성된 웹 프레임워크이다. 파이썬을 이용해서 간단하게 웹 서버를 구축할 수 있는 장점을 가진 프레임워크이다. 환경 구축하기 플라스크 패키지 설치를 위해 pip을 이용하여 pip install flask 위와 같은 코드를 입력한다. (Python 버전에 따라 Python 3.5 이상일 경우 pip -> pip3으로 작성해야 한다.) from flask import Flask app = Flask(__name__) @app.route('/') def home(): return "Hello World!" @app.route('/mypaage') def mypage(): return 'Hello, MY Page!' if__name__ == '__main__': app.run(debug = ..

DB 데이터 웹 페이지로 출력하기(라즈베리파이, PHP)

이전 포스팅에서 진행한 아두이노 온습도 센서를 이용하여 측정한 값을 Wifi 모듈로 데이터베이스에 전달하였다. 이번 포스팅은 간단한 웹페이지를 만들어서 라즈베리파이 LCD 모니터를 통해 웹을 확인하는 것이 목표이다. 우선 현재 구축된 데이터 베이스를 수정한다. 이전에 포스팅에서 데이터베이스를 생성하였을 때에는 그 안에 필드로 temp와 humidity값만 저장하였다. 이번 포스팅에서는 웹페이지로 측정값을 출력하기 위해 Primary key(기본키)를 포함시킨다. (측정값을 판단하고 구분하기 위해 ID를 Primary key로 지정) 우선 라즈베리파이 터미널창에서 자신의 데이터베이스에 접속하기 위해 -> mysql -u (ID) -p (PW) -> use (데이터베이스명) 테이블을 확인하기 위해 -> se..