ilsancityboy

이번 글에서는 JS (javascript) 에 대해서 알아볼 것이다. 앞에서 배운대로 HTML 과 CSS를 사용해서 로그인 페이지를 뼈대만 구현해냈다. 그럼 로그인 기능을 구현하기 위해 동작을 담당하는 JS를 사용한다. 기본 구조 JS의 기본 구조이다. head나 body에 스크립트를 정의하던가 JS 확장자로 파일을 만들어 HTML 에 연동시킬수 있다. C언어나 파이썬과 비슷하게 사용된다. 사용자가 웹 페이지에서 어떠한 행동을 해서 이벤트를 발생시켰을때 어떤 결과를 반환시킬지 만들수 있다. 지난글에서 HMTL 문서 내에서 어떠한 요소에 id를 주었었는데 이 id를 찾아와 행동을 줄 수 있다. document.getElementById('myButton') - id가 'myButton'인 요소를 찾아온다...

지난 글에서는 HTML 로 로그인 페이지 뼈대를 만들어 보았다. 이번 글에서는 HTML 메인 페이지와 CSS로 페이지를 조금 더 꾸며본다. 메모장을 열어 HTML 문서를 작성후에 .HTML 형태로 저장후 브라우저에서 열면 그대로 실행이 된다. 따라서 오늘은 해당 방법으로 진행 할 것이다. 메인 페이지를 만들고 로그인 버튼 이미지를 삽입 후 해당 이미지를 누르면 로그인 페이지로 이동시키기. 로그인 페이지에서 로고버튼을 누르면 다시 메인페이지로 이동시키기 먼저 웹 사이트에 띄워볼 이미지를 얻어와 test.jpg라는 이름으로 저장해두고 같은 경로에 test.txt로 텍스트 파일(메모장) 을 하나 만들었다. 그 후 test.txt에 html 문서를 작성할 것이다. 이미지 삽입 태그 이미지를 삽입하는 방법이다. ..

지난 글에서 HTML 기본 구조에 대해 알아보았다. 이번 글에서는 HTML 문서에 폼을 작성해 아이디를 받아내는 폼 , 비밀번호를 받아내는 폼 , 로그인 버튼을 만들어 간단하게 실제로 동작하진 않지만 뼈대만을 생성해 그럴싸한 로그인 페이지를 만들어보겠다. 여기서 폼(Form) 이란? 웹 페이지에서 사용자로부터 정보를 입력받아 서버로 보내 처리하거나 클라이언트에서 처리해주는 도구이다. HTML의 폼(form) 요소는 다음과 같은 구조를 가진다. action - 사용자로부터 입력받은 정보를 어떤 서버스크립트나 웹페이지로 전송할지 지정해주는 요소이다. method - HTTP 요청 메서드를 설정한다. 일반적으론 "GET" 이나 "POST"를 사용한다. GET은 데이터를 URL에 추가하여 전송하고 POST는 요..

지난 글에서 HTML , JS , CSS 에 대해서 간단하게 알아보았다. 이번 글에서는 HTML 문서를 간단하게 작성해보고 대략적인 구조를 알아볼 것이다. HMTL 문서의 기본적인 구성이다. 제목1 이것은 단락입니다. : html5 문서임을 정의한다. ( html5 - html 의 다섯번째 버전으로 최신버전) - HTML 문서의 시작과 끝을 알린다. 모든 HTML 요소는 태그 안에 있어야한다. 제목입니다. 안녕하세요 연습중입니다. HTML 삽입 미리보기할 수 없는 소스

웹 페이지는 크게 세가지 기본 구조로 이루어져 있다. 로그인 페이지를 예시로 들어보겠다. 1. HTML - 페이지의 기본 구조를 담당한다. 뼈대라고 생각하면 된다. 로그인 페이지에서 아이디와 비밀번호를 입력 받아주는 폼이나 로그인 버튼등 꼭 필요한 기본적인 기능들을 담당한다. 웹 페이지에서 로그인 버튼을 누르면 로그인 페이지로 이동시켜줄때 해당 로그인 페이지 링크를 제시를 해주고 js가 html에서 제시한 링크로 이동시켜준다. 2. JS (javascript) - 웹 페이지에서 이루어지는 동작들을 담당한다. 사용자가 아이디와 비밀번호를 입력하고 로그인 버튼을 눌렀을때 해당 정보를 서버의 데이터베이스와 대조해 일치한지 확인하고 맞으면 로그인 성공 페이지를 제시해주는 역할 등 기본적으로 동작을 필요로 할때 ..

앞서 글에서 설명한대로 웹 프레임워크인 플라스크 (Flask) 를 사용하여 웹 사이트를 띄워주는 코드를 해석해보자. pip install flask 먼저 플라스크를 사용하기 위해 별도로 설치를 해준다. # 코드 완성본 from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello, World!' if __name__ == '__main__': app.run(host='0.0.0.0', port=8080) 그후에 메인 코드에서 플라스크를 import 시켜주고 플라스크 (flask) 클래스의 인스터를 생성하여 app 변수에 저장한다. 그후에 라우트를 설정한다. 즉 , 클라이언트에서 / 경로로 요청을 보내면 hel..

Flask (플라스크) 는 앞서 배웠던 random이나 datetime처럼 라이브러리 형태이다. 알아야 할 것은 Flask 는 웹 프레임워크로, 라이브러리 형태로 제공된다는 점이다. 웹 프레임워크? 웹 프레임 워크는 웹 애플리케이션 개발을 위해 사용되는 소프트웨어 도구 모음이다. 웹 프레임 워크는 개발자들이 웹 애플리케이션을 더 쉽고 효율적으로 구축할 수 있도록 도와준다. 주로 다음과 같은 기능들을 제공한다. ● 라우팅(Routing) 라우팅은 URL 경로를 함수 또는 핸들러와 연결시켜주는 것. 즉 , 클라이언트에게서 특정 URL 요청이 들어왔을때 해당 경로를 처리하는 기능 EX : http://0.0.0.0:8080/homepage http://0.0.0.0:8080 / homepage /homepag..

오늘은 Do it! 파이썬 코드 책을 읽다가 행맨 게임을 만드는 페이지를 정독했다. 생각보다 단순한 코드들로만 이루어져있었지만 아직 초보인 나로써는 매우어려웠다. 덕분에 하루종일 코드를 붙잡고 씨름을 한 결과, 책에 의존하는건 자존심이 상하니 나만의 방식대로 행맨 게임코드를 작성했다. 먼저 필기노트에 머리를 쥐어짜 내가 할수있는 선에서 짜본 비트결과이다. 실행이 되고 안되고는 중요하지 않았고 "어떻게 만들어야 행맨게임을 구현할 수 있을까?" 가 주된 목적이었다. 책에 나와있는 것 처럼 실제 코더들은 코드를 작성해 프로그램을 만들기 전에 구성 틀을 생각해 놓는다고 써있었다. 나도 따라서 행맨 게임을 만들기 전에 어떤 기능들을 필요로 할까? 생각해낸게 다음과 같은 결과로 나왔다. 코드 작성 전 생각해둔 것들..

이번 강의영상의 문제는 식당에서의 최종금액을 입력하고 팁 금액까지 추가해 먹은사람들의 인원수만큼 나눠 n빵하면 인당 얼마씩내면 되는지 출력시켜주는 코드를 작성하는 문제다. 문제에 나와있는 예시는 Welcome to the tip calculator! What was the total bill? $124.56 How much tip would you like to give? 10, 12, or 15? 12 How many people to split the bill? 7 Each person should pay: $19.93 ▼해석 팁 계산기에 오신 것을 환영합니다! 총 청구액은 얼마인가요? $124.56 팁으로 얼마를 주시겠습니까? 10, 12, 15 중에서 선택해주세요: 12 청구서를 몇 명과 나누시겠..

여태 우리는 print()함수를 써서 글을 출력시켰다. 하지만 줄이 길어지고 중간중간에 변수를 넣거나 계산을 해서 출력시키는 여러개의 인자들을 쉼표로 구분해서 출력시키는것은 생각보다 힘들 수 있다. 이럴때 f-string을 사용하면 문자열안에 직접 변수를 삽입시킬 수 있다. 예를들어 설명하겠다. name = "Alice" age = 25 print("My name is", name, "and I'm", age, "years old.") ▲print()함수를 사용할 때 name = "Alice" age = 25 message = f"My name is {name} and I'm {age} years old." print(message) ▲f-string을 사용할 때 두개의 차이점을 알겠는가? 먼저 prin..