웹 개발101 파이썬 플라스크(Flask)의 Jinja2(신사2)를 이용한 구구단 구현 이번 게시물에서는 파이썬 플라스크에서 jinja2 템플릿을 이용하여 구구단을 출력하는 웹페이지를 구현하겠습니다. 코드는 아래와 같습니다. app.py from flask import Flask from flask import render_template from flask import redirect from flask import request from flask import url_for app = Flask(__name__) @app.route('/') @app.route('/') def inputTest(num=None): return render_template('index.html', num=num) @app.route('/calculate',methods=['POST']) def calcul.. 2021. 11. 12. 웹 프레임워크 및 IDE(통합개발환경) 종류 프레임워크란??? -> 개발을 쉽게해주는 환경이다. 쉽게 비유하면 코드를 쉽게 혹은 대량으로 생성할 수 있게 해주는 공장이라고 할 수 있겠다. 디장고(Django) 파이썬의 대표적인 웹 개발 프레임워크 중 하나 템플릿 형태로 기능 제공 등 정해진 틀 존재 -> 비교적 자유도 낮음 플라스크(Flask) 파이썬의 대표적인 웹 개발 프레임워크 중 하나 마이크로 프레임워크 -> 가볍고 간단 지정한 라이브러리와 패키지만 설치됨 -> 효율성 자유도가 높음 디장고 플라스크 자유도 무거움 가벼움 패키지 구성 무거움 가벼움 적합 상황 프로젝트 서비스 제공 IDE(통합개발환경)이란?? -> 개발을 쉽게 할 수 있도록 도와주는 도구 -> 프로젝트 관라 -> 디버깅 -> 자동 완성 기능 -> 코드 하이라이트 -> 깃허브(Gi.. 2021. 11. 9. 부트스트랩을 이용한 사이트 만들기 부트스트랩 사이트에 들어가서 파일을 다운로드 받고 압축을 풀면 css와 js 파일을 찾아서 사용하면 된다. 부트스트랩 4.0 버전에서는 플렉스 박스를 이용하여 그리드 레이아웃을 만들 수 있습니다. 자세한 사용법은 사이트에 나와있습니다. 코드 설명 Fastest way to present your design Symu is an easy to use tool for web designers. With the help of our system you can present your projects in a browser for free. It is all very easy! Drop your project anywhere Symu will prepare a mockup of your website for yo.. 2021. 11. 9. 플렉스 박스 사이트 만들기 이번 게시물에서는 캐러셀과 플렉스 박스를 이용하여 간단한 사이트를 구현하겠습니다. 결과물은 아래와 같습니다. 전체 코드는 밑으로 내려가면 볼 수 있습니다. 코드를 하나씩 살펴보겠습니다. index.html 처음으로 코딩이란 왜 코딩 교육인가 교육 프로그램 MENU 메뉴를 구성하는 부분이다. 캐러셀 부분이다. 나중에 자바스크립트를 통해 위 이미지 세 개를 캐러셀로 만들어준다. 왜 코딩 교육인가 코딩교육은 앞으로 미래 사회를 살아가는데 있어서 IT 분야에서 일하는 사람들 뿐만 아니라 일반인에게도 꼭 필요한 공부입니다.프로그램을 다룰 수 있는 코딩 언어를 알고 있다면 평소 자신이 생각했던 프로그램을 스스로 개발해서 실생활에 활용할 수 있습니다. 플렉스로 구성한다. style.css에서 column을 3개로 나.. 2021. 11. 9. 구글 웹 폰트 구글 웹 폰트를 사용하는 방법에 대해서 알아보겠습니다. 구글 웹 폰트를 검색하면 사이트에 들어가서 원하는 폰트를 클릭하고 link 부분을 복사해서 아래와 같이 코드에 삽입해서 사용할 수 있습니다. doctype html> 구글 웹 폰트 h1 { font-size:3em; font-family: 'Bree Serif', serif; } p { font-size:1.5em; font-family: 'Nanum Pen Script', cursive; } Web Fonts 웹 폰트를 테스트하고 있습니다. 예시로 링크를 구글 웹 폰트 사이트에서 복사하여 코드에 붙여넣은 뒤 h1은 Bree Serif 폰트를 p는 Nanum Pen Script 폰트를 적용하였습니다. 결과는 아래와 같습니다. 2021. 11. 8. 캐러셀 이번 게시물에서는 캐러셀에 대해서 알아보겠습니다. 캐러셀이란 아래 동영상을 보면 알 수 있습니다. 글보다는 눈으로 보는 것이 훨씬 빠른 것 같습니다. 예시 코드 doctype html> Carousel using bxSlider.js #wrapper{ width: 600px; margin:0 auto; } $(function(){ $('.bxslider').bxSlider({ slideWidth:600, captions:true, auto:true, autoControls:true, stopAutoOnClick:true }); }) html에서 wrapper의 bxslider안에 이미지들을 나열했습니다. html 헤더에서 wrapper에 대한 width, margin 값을 조율하여 이미지 위치를 페이지 .. 2021. 11. 8. 유튜브 동영상 풀 스크린 배경으로 사용하기 결과물은 아래와 같습니다. 재생, 일시정지, 소리 키우기, 소리 줄이기, 소리 끄기 등의 기능을 추가했습니다. doctype html> Tubular 플러그인 연습 *{ margin:0; padding:0; } a, a:visited{ text-decoration: none; margin: 5px 15px; color:black ; } 재생 일시정지 소리 키우기 소리 줄이기 소리 끄기 $(function(){ var options={ videoId:'nX9JzvAw3rM', start:0 // 0초 부터 시작 } $('#wrapper').tubular(options); }); 자바스크립트에 tubular 플러그인을 추가하고 videoId에 유튜브 영상 아이디를 입력하여 html영역의 wrapper가 실행.. 2021. 11. 8. 풀 스크린 배경 이번 글에서는 풀 스크린 배경을 설정하는 법에 대해서 알아보겠습니다. 결과물은 아래와 같습니다. 예시 코드 doctype html> Vegas.js 플러그인 Fullscreen Background Image Veagas.js 플러그인을 이용한풀스크린 배경 이미지. $(function(){ $('body').vegas({ slides:[ {src:'images/nature-1.jpg'}, {src:'images/nature-2.jpg'}, {src:'images/nature-3.jpg'}, {src:'images/swans.jpg', video:{ src:['videos/Swans.mp4'], loop:false, // 반복 x mute:true // 소리 끄기 } } ], delay:3500 }); }).. 2021. 11. 8. CSS 그리드 레이아웃 CSS 그리드 레이아웃은 플렉스 박스가 조금 더 발전한 형태로 플렉스 박스가 1차원적으로 블록을 구성할 수 있었다면 CSS 그리드 레이아웃은 2차원적으로 블록을 구성하여 더 다양한 결과를 만들어 낼 수 있다. 웹 사이트의 형태는 아래와 같다. 예시 코드 DOCTYPE html> CSS Grid Layout .wrapper{ width:700px; display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:minmax(100px, auto); } .box{ padding:15px; color:#fff; font-weight:bold; text-align:center; } .box1 { background-color:#3689ff; grid-col.. 2021. 11. 8. 이전 1 ··· 8 9 10 11 12 다음
