as_always

from flask_restx import Api, Resource, reqparse from flask_cors import CORS from flask import Flask, render_template, request, jsonify, abort app = Flask(__name__) CORS(app) api = Api(app) @api.documentation def custom_ui(): return render_template( "swagger-ui.html", title=api.title, specs_url= '/static/swagger.json' ) @api.route("/upload_file") class Validate(Resource): def post(file): f = requ..

margin은 border를 기준으로 바깥 여백이고, padding은 border를 기준으로 안쪽 여백을 의미한다. top, right, bottom, left 순으로 작성 태그는 display 속성의 block 값을 가지고 있다. display:block -> block은 무조건 한 줄을 차지한다. display:inline -> width/height 적용불가 -> margin/padding-top/bottom 적용 불가 -> line-height 원하는대로 적용 불가 display:inline-block -> inline의 단점 모두 커버 내가 정하거나 필요한 크기만큼 설정 -> 동일 라인에 여러 태그 붙일 때 사용 display:flex ->주어진 공간 안에서 크기와 위치를 자동으로 조정 inli..

함수를 사용하면 1. 유지보수가 쉬워진다 2. 코드의 길이가 짧아진다 3. 적절한 이름을 붙여주면 코드가 어떤 일을 하는지 한눈에 알 수 있다. 함수의 입력과 출력 입력 : 매개변수(Parameter) 인자(Argument) 출력 : 리턴(Return) 이벤트 웹 브라우저에서 일어나는 여러가지 사건 function showDetail() { // '상세 설명 보기'를 클릭했을 때 상세 설명을 보여주는 함수 document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시 document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤 } function..

div { display:inline-block; padding:0 20px 30px 20px; margin:15px; border:1px solid #ccc; line-height:2; } div h3 { text-align:center; font-weight:bold; }

5. 구구단 CSS :: as_always (tistory.com) 5. 구구단 CSS div { display:inline-block; padding:0 20px 30px 20px; margin:15px; border:1px sol.. always-here.tistory.com DOCTYPE html> 구구단 - for문 구구단 for(var i=2;i

4. 세션 선택 CSS :: as_always (tistory.com) 4. 세션 선택 CSS body { background-color:#0c3268; color:rgb(243, 243, 243); } p { margin-top:80px; font-size:2em; font-weight:700; text-align: center; tex.. always-here.tistory.com DOCTYPE html> 세션 선택 var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인", "1"); switch(session){ case "1":document.write("마케팅 세션은 201호 에서 진행됩니다."); break; case "2":document.wri..

body { background-color:#0c3268; color:rgb(243, 243, 243); } p { margin-top:80px; font-size:2em; font-weight:700; text-align: center; text-shadow:1px 2px 1px #000; } p strong { font-size:2.2em; color:yellow; }

DOCTYPE html> 3의 배수인지 확인 var userNumber = prompt("숫자를 입력하세요."); var displayArea = document.querySelector('#result'); if(userNumber != null) { // '취소' 버튼을 클릭하지 않았다면 if (userNumber % 3 === 0) { displayArea.innerHTML = userNumber + "은 3의 배수입니다."; } else { displayArea.innerHTML = userNumber + "은 3의 배수가 아닙니다."; } } else { // '취소' 버튼을 클릭했다면 alert("입력이 취소됐습니다."); }

2. 나이계산하기 CSS :: as_always (tistory.com) 2. 나이계산하기 CSS body { text-align:center; } .btn { margin-top:50px; font-weight: 400; .. always-here.tistory.com DOCTYPE html> 나이 계산하기 나이 계산하기 (결과 값 표시) function calc() { var currentYear = 2019; var birthYear = prompt("태어난 연도를 입력하세요.","YYYY");; var age; age = currentYear - birthYear + 1; document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다..

body { text-align:center; } .btn { margin-top:50px; font-weight: 400; color:#fff; background-color:#007bff; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-color:#007bff; border-radius: 0.25rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-sh..