Wings on PC

다른 사람들이 만든 부트스트랩을 이용해 봅시다. 우리는 회원가입의 폼을 변경할 것이기 때문에 (필요에 따라 로그인 페이지까지) signup bootstrap template 구글에 검색 해봅니다. 많은 사람들이 만든 소스를 보기 위해 프로그래밍 코드는 세계 공통어 이기 때문에 영어로 검색 합니다. Registration 도 회원가입이 될 수 있겠네요. 저 둘중에 적당하게 찾아 들어 가면 되겠습니다. 둘중에 Registration에 조금더 소스가 많아서 저는 아래 Registration 에 들어 가봤습니다.https://bootsnipp.com/tags/registration 오른쪽에 버전을 선택할 수 가 있네요. 우리는 부트스트랩4로 만들었기 때문에 4로 선택 합니다.여러 샘플중에 아무거나 선택 합니다...

Jinja2 템플릿을 이용하면 html을 나누어서 페이지를 표시할 수 있습니다. 이전 글에서 부트스트랩으로 Navbar를 만들었습니다. Navbar를 페이지 마다 붙여야 하는 번거러움이 있었죠. 다른 웹언어(PHP, JSP 등)를 경험 해본 사람들은 include를 사용해서 하면 되겠다라고 생각할 겁니다. Jinja에서도 include를 사용할 수 있는데 extends로 템플릿 상속을 해서 사용 할겁니다. extends를 사용하면 사이트의 공통부분을 포함하는 레이아웃을 만들 수 있습니다. Jinja 문법이 들어 가기 때문에 복잡해 보일 수 있지만 간단한 예제로 틀을 만든다 생각하고 그 규칙만 알면 충분히 사용할 수 있습니다. 먼저 layout.html 파일을 만들고 이전 글에서 만들었던 main.html..

회원가입 폼이나 로그인 폼을 조금 더 이쁘게 만들어 봅시다. 디자인을 하기 위해서는 CSS를 잘다뤄야 합니다. 디자인에 관심이 많고 포토샵도 다룰줄 알고 디자인 센스가 있다면 CSS를 제대로 배워서 웹 퍼블리셔 또는 프론트엔드 개발자에 도전해도 괜찮습니다.디자인이 힘들다면 CSS 웹프레임워크의 힘을 빌리면 디자인을 못해도 잘 한거 처럼 보이게 할 수 있습니다.첫 시간에 웹 페이지를 만들 때 참고한 사이트로 가봅시다.https://www.w3schools.com/ HTML Tutorial This is a heading This is a paragraph. Try it Yourself » CSS Example: body {   background-color: lightblue; } h1 {   co..

이 전 글에서 마지막 부분에 html 폼을 만들어 GET POST 테스트를 해봤습니다.2020/05/01 - [KIT] - [웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 기본 구조와 HTTP Request [웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 기본 구조와 HTTP Request지난 글에서 파이썬 플라스크로 설치 하고 웹브라우저에 hello world 접속 까지 했었습니다. 2020/04/24 - [KIT] - [웹 앱프로그래밍] 파이썬 플라스크(Python Flask) 설치 및 웹 애플리케이션(Web Application)..wings2pc.tistory.com근데 그냥 외부에서 html 파일을 만들고 브라우저로 실행을 시켰는데 이제 이 HTML 파일을 Flask 앱..

요즘 대세 개발 툴인 Visual studio code 를 설치 합니다.code 설치 후에 이전 포스트에서 W3schools 에서 만든 소스를 복사해서 붙여 넣을게요.이전 글 참조 - [SW] - [웹 앱프로그래밍] HTML 기본 - 기초 웹 개발 하기 검색창에 vscode 검색다운로드 링크로 들어 가서 각자 OS에 맞는 vs code 를 다운로드 합니다.저는 윈도우에서 진행가기 때문에 윈도우 버전을 다운 받아요.다운로드 후 설치첫번째 빨간 박스에 체크를 하고 설치를 진행 합니다. vscode를 열 때 편합니다.cmd 창을 열고 어디에서나 code 를 실행을 시키기 위해서는 2번째 빨간 박스(PATH) 체크를 해줍니다.설치를 눌러 설치를 진행 합니다. 설치 완료 후 실행 화면 입니다.창을 닫고 이제 co..

Form 테그를 활용 하여 위와 같은 페이지를 만들어 봅시다.구글에서 w3schools 를 검색 해서  저기 위 링크로 들어 갑니다. w3schools.com 페이지가 나오면 위 빨간 박스 부분을 클릭 하여 HTML Forms 찾아요.  Try it Yourself 버튼을 눌러 줍니다. 그러면 소스가 나와요~아래 그림에서 왼쪽 부분이 HTML 소스이고 오른쪽은 결과 화면 입니다. 왼쪽에서 소스 수정도 가능하고 Run버튼을 눌러 실행도 해볼수 있어요~소스 수정후 Run 버튼을 누르면 오른쪽 결과 화면에 결과가 바뀌는것을 확인 할 수 있어요!! 자 그러면 처음에 우리가 만들려고 했던 Form을 만들어 봐요  w3schools에서 제공하는 샘플 소스를 활용하여 위 빨간 박스에 있는 내용만 수정 하고 Run 버..

웹과 서버 / 클라이언트에 대해 알아 봅시다.위 와 같이 스테이크를 주문(요청) 하는 사람은 고객(클라이언트)가 되고 그 주문(요청)을 받아 음식을 제공 하는 사람을요리사(서버) 라고 이해 합시다. 이 그림을 그대로 온라인으로 바꾸게 되면 아래와 같은 그림으로 바꿀 수가 있습니다.웹 브라우저(클라이언트)에서 어떤 정보를 보여줘 라는 요청을 보내면 서버에서는 그 요청에 맞는 답을 하게 됩니다.예를 들어 네이버에 오늘 날씨를 검색 하면 날씨 정보를 보여 주는거죠. 자 그러면 우리는 네이버와 같은 이런 서비스를 만들고 싶어요. 어떻게 시작 하고 뭐를 배우는지 시작 합니다. 우리가 배우는 언어 입니다. 웹페이지를 구성 하는 기본 언어 입니다. HTML은 컴퓨터 프로그래밍 언어이냐 아니냐 하는 논쟁은 항상 따라 ..