728x90 𝐀𝐥𝐥343 No Image 📷 [HTML & CSS] 폰트, 주석, 파일분리 폰트적용하기 폰트 적용은 간단하다. https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 해당 사이트에서 원하는 폰트 들어가서 해당 부분을 복사해서 안에 타이틀 아래에 넣어준다. 그리고 스타일 안에 * { 아래에 있는 CSS rules to specify families 코드를 넣어준다. } 넣어주고 로컬파일을 크롬창에서 보면 글꼴이 바뀐 모습이다. 주석 주석은 컨트롤 / 만 같이 눌러주면 된다. 이하 생략 CSS 파일분리 CSS 코드창이 너무 길어졌을 때! 간단하게 할 수 있는 방법이 있다. 같은 프로젝트 .. 2023. 1. 10. No Image 📷 [HTML & CSS] 자주 쓰이는 CSS 연습하기 위와 같은 화면을 만들어보자 우선 로그인페이지 아이디, 비밀번호를 입력해주세요 라는 애둘을 묶어줘야겠다 묶어주는건 로그인 페이지 아이디, 비밀번호를 입력하세요 ID: PW: 로그인하기 아 mytitle 저 묶음이 보여지게 style에서 background-color : green; 을 줬다. 출력하면 이렇게 나온다. 그럼 이제 저 칸길이를 조절해주자. 됐다. 그럼 이제 글씨 색은 하얀색으로 해보자 color : white; 이제 저 글씨 친구들을 가운데 오게 해야한다. 가운데 정렬!? text-align : center; 넣어줬다. 이제 남은건 저 글씨를 가운데로 내려주고 배경을 깔아준 뒤 둥글게 처리해야한다. background-image : url("https://www.ancient-origins... 2023. 1. 10. No Image 📷 [HTML & CSS] CSS 기초 이런식으로 안에 넣어주자 그 스타일안에 .mytitle 이라는 class의 색깔을 빨갛게 해주세요 라는 명령어를 넣어주자 그렇게 되면 바디에있는 mytitle 이라는 class를 가지고 있는 글자가 빨간색으로 나타나게 될거다. 로그인 페이지 ID: PW: 로그인하기 2023. 1. 10. No Image 📷 [HTML & CSS] 간단한 로그인 페이지 만들어보기 기본 로그인 뼈대를 만들어보자 우선 타이틀 로그인 페이지로 넣어주자 페이지의 타이틀을 작성해줬다. 그리고 큰 글씨의 로그인페이지라는 글을 띄워보자 로그인 페이지 로그인 페이지라는 큰 제목정도의 글씨가 나왔다. 아래와 같은 아이디와 패스워드 입력칸을 넣어보자 id: 빈칸 pw: 빈칸 로그인 페이지 ID: PW: 마지막으로 로그인하기 버튼을 넣어보자 로그인 페이지 ID: PW: 로그인하기 로그인 페이지 ID: PW: 로그인하기 이런 코드로 간단한 로그인 페이지를 완성해 보았다. 2023. 1. 10. No Image 📷 [HTML & CSS] 기본 내용 HTML은 뼈대 CSS는 꾸미기 HTML과 CSS에서 쓰이는 구역을 나누는 태그 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 구역 내 콘텐츠 태그 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요? 해당 코드들을 로컬파일로 열어보면 이런 화면이 출력된다. 2023. 1. 10. No Image 📷 [스파르타 코딩클럽]_웹개발 종합반 5주차 마무리 그리고 OT 오늘로 웹종반 5주차는 끝이났다. 금일 부터 OT 주차가 시작되어 나와 같은 초보 코더들을 많이 만나보는 시간이었다. 오늘은 TIL/WIL 블로그 개발일지 작성해나가는 것에 있어서의 중요성을 더 자세하게 배웠다. 왜 써야하며, 어떤식으로 써 나아가야하는지, 누가 보게 될것이며, 나중에 어떤 좋은 효과를 볼 수 있는지에 대해서도 알게되었다. 제일 중요한건 꾸준함이라 한다. 물론 내가 생각하기에도 그렇다. (앞으로도 그러자) OT주차에 내가 할 계획은 여태까지 배운 것들을 최대한 반복 숙달하여 13일날에 진행 예정인 입학시험에 통과 해 보는것이다. 1/9 (월) 15:00 : OT 주차 발제 @Zoom 17:00 : TIL/WIL(회고) 특강- 강민철 튜터 **@Zoom** 1/10 (화) 16:00 : 주.. 2023. 1. 9. No Image 📷 [Flask] 버킷리스트 (3) 완료 POST 연습 (기록 하기) 그림에서 설명하듯이 번호를 매겨줘야 해당 글귀 오른쪽에 있는 완료! 버튼을 누르면 해당 번호의 버킷리스트를 완료할 수 있는 매커니즘을 만들 수 있다. 적, post 방식으로 보낼 데이터는 bucket 빈칸에 있는 이루고싶은것을 입력하세요 칸에 있는 글귀다. 근데 그 글귀를 클라이언트 서버로 보내면서 번호도 같이 매겨서 보내야한다는 뜻이다. 2023. 1. 3. No Image 📷 [Flask] 버킷리스트 (2) 뼈대준비하기 1. 버킷리스트 - app.py 코드 더보기 from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def home(): return render_template('index.html') @app.route("/bucket", methods=["POST"]) def bucket_post(): sample_receive = request.form['sample_give'] print(sample_receive) return jsonify({'msg': 'POST(기록) 연결 완료!'}) @app.route("/bucket/done", methods=["POST"]) def bucket_do.. 2023. 1. 3. No Image 📷 [Flask] 버킷리스트 (1) 프로젝트 세팅 늘상 하던대로 프로젝트 세팅을 해주자 새 프로젝트에서 bucket 파일에 생성해주자 생성하고 templates, static 디렉터리 파일을 생성하고 app.py 파이썬 파일도 생성해주자 그리고 templates 파일에 index.html 파일도 만들어주자 다음으로 상단 좌측에 파일 누른다음 설정 -> python 인터프리티 + 버튼을 누르고 bs4, dnspython, Flask, pymongo, requests 를 다운받아주자. 그러면 세팅은 끝이다. 2023. 1. 3. No Image 📷 [스파르타 코딩클럽]_웹개발 종합반 4주차 마무리 진짜로 여태까지 배운것들의 총합체였다. HTML, CSS, Javascript, JQuery, Ajax, MongoDB, 크롤링, Flask 등등 1주차부터 현재까지 배운것들을 한꺼번에 쓰면서 유기적으로 연결시켜보는 주차였던 것 같다. 더 하고싶은 말은 없다. 뿌듯했다. 3주차까지는 4회독을 완료하고 기본기를 탄탄하게 만들면서 올라왔기 때문이었을까 하나씩 하나씩 눈에 익기 시작했다. 점점 하나하나 차근하게 풀어가면서 코드들을 해석해보는 능력도 키워봤다. 다른 코더들에게는 쉬운 코딩일지는 모르지만, 오랜만에 새로운 분야를 도전해보는 나에게 있어서는 매우 자신감을 얻는 계기가 되었던 것 같다. 이제 마지막 주차 5주차만 남겨놓고 있다. 해당 주차가 끝이나면 거의 동시에 웹개발 종합반은 끝이나고 동시에 정규 .. 2023. 1. 1. No Image 📷 [Flask] 스파르타피디아 (5) GET 연습하기 POST 연습하기 (포스팅 하기) GET 하기 이 과정도 우선 서버부터 건들자 DB -> MongoDB에 업로드 되어있는 데이터를 가져와야한다. 그럼 pymongo 언어를 써야한다. from pymongo import MongoClient client = MongoClient('mongodb+srv://sparta:0000@cluster0.5fhqjdx.mongodb.net/?retryWrites=true&w=majority') db = client.dbsparta # 저장 - 예시 doc = {'name':'bobby','age':21} db.users.insert_one(doc) # 한 개 찾기 - 예시 user = db.users.find_one({'name':'bobby'}) # 여러개 찾기 - .. 2023. 1. 1. No Image 📷 [Flask] 스파르타피디아 (4) POST 연습하기 (포스팅 하기) POST 연습하기 (포스팅 하기) POSTING 하기 원래 순서대로 서버부터 건들자 POST 형식의 /movie 창구를 건들자 print(sample_receive) 프린트는 이제 필요없으니까 지워버리고 우리가 받아와야하는 데이터는 뭐다? 그렇다. url, star, comment 이다. html 에서 빈간에 입력된 값을 주는 give 형식을 우리가 여기 파이썬에서 recieve 형식으로 받아올거다. 그러면 아래의 코드가 만들어진다. ▼ @app.route("/movie", methods=["POST"]) def movie_post(): url_receive = request.form['url_give'] star_receive = request.form['star_give'] comment_receiv.. 2023. 1. 1. No Image 📷 [Flask] 스파르타피디아 (3) 뼈대 만들기 뼈대 만들기 스파르타피디아 app.py 더보기 from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def home(): return render_template('index.html') @app.route("/movie", methods=["POST"]) def movie_post(): sample_receive = request.form['sample_give'] print(sample_receive) return jsonify({'msg':'POST 연결 완료!'}) @app.route("/movie", methods=["GET"]) def movie_get(): return js.. 2023. 1. 1. No Image 📷 [Flask] 스파르타피디아 (2) 조각 기능 구현해보기 조각 기능 구현해보기 조각 기능이란? 내가 카톡창에 공유했을때 자동으로 연관되어서 공유되는 사진같은거를 구현해주는 기능이라고 생각하면 되겠다. 이걸 메타태그라 한다고 한다. 크롤링 기본 코드 ▼ import requests from bs4 import BeautifulSoup url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597' headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get(url,headers=.. 2023. 1. 1. No Image 📷 [Flask] 스파르타피디아 (1) 프로젝트 세팅 프로젝트 세팅 프로젝트 파일 새로 만들자 이미 만들어놓은 movie 파일을 이용하자 만들고 디렉토리 파일 staic, templates.파일 만들고, app.py 파이썬 파일 만들어주자 templates에는 index.html HTML파일 먼저 만들어주고 파일 설정에서 패키지 5개 설치해주자 flask pymongo dnspython bs4 requests 마지막 두개는 크롤링 때문에 넣는 패키지다. 완성~! 2022. 12. 31. No Image 📷 [Flask] 화성땅 공동구매 (4) GET 연습(주문 보여주기) GET 연습(주문 보여주기) 앞의 게시글에서 주문 넣기(주문하기)(POST)를 완료했다면 그 포스트를 해당 창에 띄워주는 것 까지 해야한다. 우선 HTML파일(index.html) 부터 살펴보자 여기서 확인되는 것은 $(document).ready(function () { show_order(); }); 아 로딩이 되자마자 show_order()를 부르는 구나 를 알 수가 있다. function show_order() { $.ajax({ type: 'GET', url: '/mars', data: {}, success: function (response) { alert(response['msg']) } }); } 그 show_order()은 GET 방식인데 /mars 로 한다. 불러오는 창구를 mars 로.. 2022. 12. 31. 이전 1 ··· 17 18 19 20 21 22 다음 728x90
