웹에서 데이터 입력
HTML FORM 태그 (1)
-
Form 태그
HTML 에서 사용자의 입력, 선택을 위한 태그
text, button, check box 등의 일반적인 GUI 포함 -
Form 태그의 매개변수 값 전달 방식 (매서드, METHOD)
사용자의 입력을 인코딩하여 전달 함 -
GET
입력 매개변수 값을 URL에 포함시켜 전달 -
POST
입력 매개변수 값을 HTML 몸체(body)에 포함하여 전달
큰 데이터 전송 시 사용
HTML FORM 태그 (2)
- 기본구조
< FORM > form의 시작
< INPUT >여러 가지 방법 중 하나의 정보를 질의
< INPUT > 원하는 만큼 사용
< /FORM > form 종료
< FORM method="..." action="..." >
< INPUT name="..." type = "..." .... >
....
< /FORM >
- action: 플라스크 파이썬에서 처리할 라우팅 경로
- name: 태그 이름을 지정
- type: 태그 모양을 지정
플라스크의 폼 데이터 접근
-
request 객체
-
브라우저에서 입력한 폼 데이터를 접근
-
GET 메서드 입력
request.args.get('태그 이름') -
POST 메서드 입력
request.form ['태그 이름'] -
사용 예
from flask import Flask, render_template, request
.....
@app.route('/surf', methods=['GET', 'POST'])
def surf():
.....
sc = request.args.get('score')
sc = request.form['score']
CSS
CSS 스타일 시트
-
CSS (Cascading Style Sheet)
HTML 웹 문서의 스타일을 정의
폰트의 크기나 모양, 색, 문단의 설정 등을 지정 -
HTML 문서에서 스타일 시트 설정 방법
외부 CSS 파일 참조
head 태그 사이에서 link 태그 사용하여 참조
< link rel = "stylesheet" type = "text/css" href = "mystyle.css" >
문서 내부의 head 태그 사이에서 style 태그로 정의
문서 내의 태그에서 스타일 지정
CSS 문법
-
CSS 문법 구성 요소
-
선택자 (selector)
HTML의 요소를 지정
HTML 요소(태그), class, id, 문맥(group) 선택자 -
속성 (property)
키워드, 크기 단위, 색상 표현 등의 속성명과 속성값을 지정
CSS 선택자
- 태그명 {스타일 속성:값; 스타일 속성:값;...}
해당 태그에 지정한 스타일이 적용
p {font-size:20pt; color:red;}
div {font-family:굴림; margin:5px;}
- 태그명 1, 태그명 2 {스타일 정의...}
지정한 모든 태그에 같은 스타일을 적용
p,div {font-size:50pt; color:red; font-family:궁서;}
- 태그명 1 태그명 2 {스타일 정의...}
태그명1에 포함된 태그명2에 스타일을 적용
p span { font-size: 30pt; color:#00ff00; font-family:궁서;}
=>
< p >
< span >이런 구조에서만 스타일 적용됨< /span >
< /p >
- 태그명.class 속성값 {스타일 정의...}
입력한 태그명 중에 class 속성의 속성값이 'class속성값'과 일치하면 스타일 적용
div.test { font-size: 30pt; color:#00ff00; font-family:궁서;}
- .class 속성값 {스타일 정의...}
태그와 관계없이 class 속성의 속성값이 'class속성값'과 일치하면 스타일 적용
.test { font-size: 30pt; color:#00ff00; font-family:궁서;}
- 태그명 #id 속성값 {스타일 정의...}
태그명 중에 id 속성의 속성값이 'id속성값'과 일치하면 스타일 적용
div#myId{ font-size: 30pt; color:#00ff00; font-family:궁서;}
- #id 속성값 {스타일 정의...}
태그와 관계 없이 id 속성의 속성값이 id의 속성값이 일치하면 스타일 적용
#myId{ font-size: 30pt; color:#00ff00; font-family:궁서;}
CSS 크기 단위와 색상 표현
- 크기 단위
px (pixel) 픽셀 단위, 해상도에 따라 상대적인 크기를 가짐
pt (point) 1포인트는 0.72인치
% 지정된 크기에 대한 백분율 단위의 상대적인 크기 지정
em 지정된크기의 배수 단위로 크기 지정
