스파르타 원정

title 태그 안 title 부분을 수정하면 페이지 제목이 바뀐다.html은 문서 형태가 기반이다head와 body로 구성head에 들어가는것 : body에 들어갈 내용외에 필요한 태그들(탭에 있는 타이틀,아이콘,구글 검색엔진이 내 사이트를 퍼가기 좋게 만드는것들,C

로그인하기h1태그로 제목 만들어주기p태그안에 input태그를 복붙 왼쪽에 아이디 패스워드 넣어주기버튼태그로 로그인하기 만들기

HTML 부모-자식 구조 CloudScape 용어정리 초록색 div는 button나는 버튼1/button의 부모다 button나는 버튼1/button은 초록색div의 자식이다 👉부모태그에 글씨를 초록색으로 바꿔라하면 나는 버튼1 의 글씨가 초록색으로 바뀐다. 뭔

아래에 있는 로그인 페이지 똑같이 만들어보기 로그인 페이지 아이디,비번 어쩌고 문구를 div안에 넣어야될 것으로 보인다. div안에 꾸며줄것이 보이므로 명찰(class="mytitle"로)을 달아준다 style안에

여백의 개념실험버튼에 "mybtn"으로 명찰 달아주기style안에서 지칭해서 padding(내 안쪽으로): 20px; 두기이번에는 margin(내 바깥쪽으로): 20px; 두기여기서 margin-top(위쪽에서 바깥쪽으로): 20px; margin-left(왼쪽에서

로그인 페이지 가운데로 옮기기글자,아이디,비번 따로따로 옮겨야 할까?nope!div로 묶어주자!이미 mytitle명찰을 달기 전 div로 묶어준것이 있지만전체를 옮길거기 때문에 상관없이 body안에 새로 div태그를 생성해주고전체를 기존 body안의 코딩들은 ctrl+

폰트 먹이기https://fonts.google.com/?subset=korean에서 맘에드는 폰트를 하나 고른다.오른쪽 +select this style을 누른다.오른쪽 상단 아이콘을 누른다.아래 CSS폰트가 기존게 포함돼있어서 복잡하면 Review 항목에서

너무 긴 style안 내용물을 파일 분리를 해볼것이다 지금 있는 파일 (frontend)에 new>stylesheet에 mystyle이라는 파일(CSS)을 만든다. /* 부터 아래 }까지 드래그를 한다. ctrl+x로 잘라내기 해서 mystyle안에 붙인다. 남아있던

CSS를 잘하는것과 별개로 미적인 영역으로 들어가야 할때는 남이 만들어 놓은 CSS를 활용하는것도 좋다.그 중에서도 유명한 게 "부트스트랩"\~~frontend>html file>(index.html)file생성 \~~부트스트랩 시작 템플릿 붙여넣기.https&#x3A

부트스트랩 사용법 아래 링크처럼 만들어보기 https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/06.+%EB%82%98%ED%99%80%EB%A1%9C%EB%A9%94%E

🎈아래 링크처럼 만들기 >https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/08.+%EB%82%98%ED%99%80%EB%A1%9C%EB%A9%94%EB%AA%A8%EC%9E%A5%ED%8B%80.html 🎈글씨부터 복붙으로 바꿔준다. >card-col...

🎈아래처럼 완성을 할것이다. >https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/10.+%ED%8F%AC%EC%8A%A4%ED%8C%85%EB%B0%95%EC%8A%A4%EA%B9%8C%EC%A7%80.html 조금 더 커스텀 css들이 많이 필요하다. h...

자바스크립트는 처음 배우는 프로그래밍 언어가 될것이다.브라우저가 알아들을 수 있는 프로그래밍 언어이다.명령을 내리면 언어를 알아듣고 수행 요청을 한다.이렇게 소통할 수 있는게 프로그래밍 언어이다.자바스크립트는 유일하게 브라우저가 알아들을 수 있는 언어이다.자바스크립트가

파이참에서 새로고침해가면서 자바스크립트를 배우는건 너무 복잡하기 때문에개발자 도구 console창에서 자바스크립트 기초문법을 배워본다.

수학에서의 함수는 값을 넣으면 값이 나오는 것이다.프로그래밍에서의 함수는 부르면 정해진 동작을 하는 것이다.function sum(num1,num2){ return num1+num2 }undefined👉shift+enter하면 줄이 바뀐다.👉sum은 임의로

HTML을 잘 제어한는 방법자바스크립트로 브라우저로 엔터를 치지않고 (페이지 리로딩 되지않고)자바스크립트에서 서버쪽에다가 뒷단에서 데이터를 요청할 수 있는 방법자바스크립트로 만들어볼것한번 클릭하면 홀수, 두번째 클릭하면 짝수,세번째는 홀수...왠지 지난번에 배운 %를

자바스크립트는 HTML에서 움직이게 하는게 목표였다.2004년쯤에는 여러가지 브라우저가 산재되어 있던 시절이었다.그리고 브라우저마다 호환성 문제가 있었다.그래서 JQeury 재단에서 브라우저마다 코드 다르게 쓰고 길게 쓰는 불편함을모아서 라이브러리로 만들어준다는 제안을

준비 첫번째로 해야할것은 임포트를 써야한다. https://www.w3schools.com/jquery/jquerygetstarted.asp 전에 언급한 w3schools이다. 여기에서 JQuery CDN 코드를 가져온다. 이것을 head안 아무곳이나 쓰면되는데 이미

전에 CSS값 가져와보기에서 display값을 가져와봤던'none'과 'block'에서 를 해볼것이다.일단 전에 했던 onclick="hey()"랑 함수를 지우고onclick="openclose()"를 넣는다function openclose() { alert('잘된다!

https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week02/06.+Jquery+%EC%97%B0%EC%8A%B5%EB%AC%B8%EC%A0%9C+%EC%99%84%EC%84%B1

자바스크립트로 페이지 전환없이 서버에서 값을 받아올 수 있는 방법이다.서버에서 클라이언트한테 여기로 요청하라고 열어놓은 창구API클라이언트가 서버한테 요청(데이터 요구)👉그러면 서버가 클라이언트한테 데이터를 줌이걸 내려줄 때 포맷이 JSON이라고 한다.JSON을 보기

💡Ajax는 JQuery를 임포트한 페이지에서만 작동한다. 그래서,미세먼지 OpenAPI에서 Ajax를 연습하는게 아니라, 전에 만들어논 나홀로메모장에서 Ajax연습을 한다. 나홀로메모장 console창에 Ajax 기본골격을 복붙(대부분 골격을 가져온다.외우는거X)여

ajax연습 뼈대를 가져오고, 링크텍스트 업데이트를 누르면 for문이 돌면서 실시간 미세먼지 정보가 나오게 할것이다. q1()은 onclick쪽에 붙어있다. ajax 기본 골격을 코드 입력할곳에 넣어준다. q1을 누르면 ajax콜을 하는거다. 미세먼지API url을

혼자 해냈는데 삐긋했다. 뭐냐면기본뼈대에서response를 console에 찍어보면object가 하나 찍혔다.getStationList 안에 여러가지 있고 우리가 필요한건 row이다.let rows = response''안에 뭘 넣어줘야 하냐면getStationList

고양이 openAPI https://api.thecatapi.com/v1/images/search 리스트 형태이다. 0번째의 url 값이 이미지 주소가 된다. 우리가 만들것 http://spartacodingclub.shop/ajaxquiz/03 이번 만들기의 관건

파이썬으로 웹에 있는 데이터들을 긁어올 수 있는 크롤링그리고 그것을 저장할 수 있도록 mongoDB

나홀로 메모장을 아래처럼 만들어 볼것이다http://spartacodingclub.shop/카드들을 붙여줄 수 있도록 api를 만들어 놨는데만들어논거에 위에 본문을 붙일것이다.나홀로메모장 api(get)이다http://spartacodingclub.s

파이썬을 설치한다는 의미기본적으로 컴퓨터는 1010이라는 전기신호만 인식을 한다.하지만 인간은 그런 명령을 내리기 어렵다.그래서 사람의 언어와 가장 가깝게 고안된 것들이프로그래밍 언어라는 것들이다.(자바,파이썬,c...)어떻게보면 파이썬 번역팩을 설치했다 말할 수 있겠

자바스크립트에 비해서 훨씬 직관적이다.변수,자료형,함수,조건문,반복문자바스크립트에서는 let a=2같은 문법을 썼다면,파이썬에서는a = 2b = 3print(a+b)직관적이다.first_name = 'bini'last_name = 'park'print(first_nam

함수👉마찬가지로 반드시 sum일 필요가 없다.💡파이썬에서 중요한 점:이게 등장하면 하면 함수의 내용물이 다음에 나온다는 뜻이다.중괄호가 파이썬에서는 없다.👉어차피 중괄호 써도 코드 깔끔하게 쓰려고 써도,tab으로 줄을 맞추니까그러면 차라리 그 줄 맞춘 걸 가지고

리스트 안에 딕셔너리가 들어있는 유형을 가장 많이 쓴다.어떻게 여러 방식으로 쓰는지 보자.딕셔너리가 5개 들어간 리스트 형태이다.▶run{'name': 'bob', 'age': 20}{'name': 'carry', 'age': 38}{'name': 'john', 'ag

파이썬은 라이브러리가 방대한걸로 유명하다.사람들이 만들어놓은 라이브러리(패키지라고도 부름)가 많다.그거를 import(갖다 쓴다)를 하면만든 사람이 정해둔 방식대로 우리가 쓴다고 한두줄 입력하면 어려운 기능들도 한 두줄로 작동시킬 수가 있다.그 때,"가상환경"이라는 개

어떻게 써먹는지에 대한 것requests 패키지의 documentation을 보면 써있다.python requests package 구글링이렇게 보면 읽기 어려우니 python requests 패키지 구글링하면한국사람들이 올린것들이 많다.파이썬 ??? 패키지라고 구글링

저번에 이어서 이번엔 크롤링 패키지를 이용해보겠다.https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303여기서 순위나 영화제목,평점 이런것들을 내가 갖고오는 것크롤링이라는 단어 자체는 구

네이버 영화 평점에서랭킹,영화제목,평점 가져오기내가 한것알게된 점위에서 순서 엉망으로 해도print 할때,순서대로 적으면 순서대로 출력된다.선생님이 하는 방법순위에서 검사하면alt값 가져올 것이고copy selector한다rank를 한번 찍어본다.<img alt=

db설치 됐는지 확인하는법브라우저 검색 localhost:27017robo3t에 conntect를 하면 데이터베이스에 접속 하는거다.MongoDB는 데이터베이스다.기본적으로 데이터를 쌓아둔다.내 눈에 보이지 않게 켜진다.Robo3T를 가지고 MongoDB의 데이터를 우

데이터 베이스는 왜 쓸까?데이터를 잘 쌓으려기보단 데이터를 잘 갖다 쓰려고 쓰는게 목적이 더 강하다.예를 들면 책장이라고 하면 책을 보관하는게 목적이면 아무대나 쌓아두면 그만인데 책장을 쓰는 이유는 나중에 잘 찾아서 뽑으려고다.잘 정돈됀 책장은순서에 맞게 정리되어 있다

pymongo라는 라이브러리로 조작을할 것이다.만약에 파이썬으로 엑셀을 조작하려면파이썬으로 엑셀을 조작할 수 있는 남이 만들어놓은 라이브러리를 이용하면 편할거 같다.똑같이 파이썬으로 MongoDB를 조작하려고 하면 남이 만들어놓은 pymongo라는 라이브러리를 쓸거다.

그 전 크롤링 코드를 db에 저장 시켜보자.db 기본코드를 넣고 시작 한다.print를 지워주고 insert 기본코드를 넣고 데이터를 바꿔 끼운다. doc = {'title': title, 'star': star, 'r

서버를 만들어 볼것이다.이 전에는 html,css,자바스크립으로 뭔가를 했다.서버를 만들어서 서버에 갖다줄 파일을 미리 만들어뒀다.이제는 서버를 만들어서 요청을 받고 파일을 갖다주든지DB에다 작업을 하든지이런 서버를 만들어야 한다.서버는 이 컴퓨터에 돌아가고 있는 하나

코드스닛펫에서 만둘어둔 예제코드를 가져온다. JQuery import를 써뒀다. API란 은행이 고객을 받기 위해서 만들어 놓은 창구처럼 서버도 클라이언트 요청을 받기 위해서 만들어놓는 창구이다. 은행도 창구에 어떤 규칙이 있다. 민증 지참,입금을 하려면 입출금 창구

File>New project>bookreview생성>app.py/static/templates>index.htmlFile setting>flask/pymongo코드스니펫에서 app.py뼈대와 index.html 뼈대 복붙app.py에서 ▶run>브라우저에 localh

클라이언트와 서버 확인하기서버부터 만들기클라이언트 만들기완성 확인하기서버쪽 형태 /review, getsample_give라는 이름으로 데이터를 받는다.클라이언트 get type에 /review에 sample_give 이름으로 샘플데이터를 가져간다.success되면 r

New project>alonememoapp.py/templates/staticsetting>flask/pymongo/(url넣었을때 자동으로 정보가 가져와졌다 크롤링이 필요 크롤링을 위한)requests/bs4모든 프로젝트를 하기 전에는 API를 설계하는 일이 가장

이미지,제목,요약 등을 어디서 가져올까API 설계를 했는데 어떤 기술이 필요한데 그 기술을 먼저 검증을 해봐야 한다.프로젝트 시작하기 전에 테스트를 해본다.개인적으로 조각 기능이라 부른다한다.이미지,제목,요약들을 어떻게 url만 갖고 크롤링을 해올까meta태그를 이용해

나홀로메모장 app.py뼈대나홀로메모장 index.html 복붙app.py runlocalhost:5000API 만들고 사용하기 - 포스팅API (Create → POST)

22) API 만들고 사용하기 - 리스팅 API (Read → GET)

무비스타똑같이 만들기좋아요 순대로 나열된다.위로!버튼을 누르면 좋아요가 하나 올라가고인물을 삭제 할 수도 있다.File>New Project>moviestar>createNew>Python File>app.pyNew>Directory>static/templates(>h

클라이언트와 서버 연결 확인하기서버부터 만들기클라이언트 만들기완성 확인하기클라이언트와 서버 연결 확인하기서버에서 '/api/list'에'GET'sample_give로 받고msg로는 'list 연결되었습니다!'라고 내려주고있다.클라이언트에서는 showStar라는 함수로

좋아요를 높여주는 기능을 만들면 된다.어떤 의미인지 생각하자면일단 이름을 받아서 그 이름의 좋아요 값을 찾은 다음에 그 좋아요 값에다 1을 더해서 그거를 덮어 씌워 주면 되겠다.다시 말해서 업데이트를 해주면 된다.1) 클라이언트와 서버 연결 확인하기2) 서버부터 만들기

1) 클라이언트와 서버 연결 확인하기2) 서버부터 만들기3) 클라이언트 만들기4) 완성 확인하기1) 클라이언트와 서버 연결 확인하기서버에서 '/api/delete'에 'POST'에'sample_give'로 받고 있고 msg로는 'delete 연결되었습니다!'를 주고 있

어떤 컴퓨터도 서버가 될 수 있다고 했다.서버의 역할은 기본적으로 클라이언트(주로 브라우저)가 요청을 하면 그릴 것을 주거나,아니면 뒤에서 Ajax로 요청을 하면 Ajax에 대한 답변으로 데이터를 주거나 이러한 어떤 뭔가를 주는 행위 이 가운데서 클라이언트들의 요청을