게으른 &quot;소&quot;이야기

전체 글

주석/파일분리

코딩하는영도리 2022. 12. 7. 00:30

2022. 12. 7. 00:30

주석달기
Ctrl + /

1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때

2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용

주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요.

즉, 개발자 본인 또는 동료를 위해 붙여두는 것!

파일분리

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

배경화면 이미지넣기 (3콤보)

코딩하는영도리 2022. 12. 6. 23:53

2022. 12. 6. 23:53

로그인 페이지 만들기!!

먼저 HTML 뼈대 만들기 부터 시작!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
</head>
<body>

    <div>
         <h1> 로그인 페이지 </h1>
        <h5> 아이디, 비밀번호를 입력해주세요</h5>
    </div>

    <p>ID : <input type="text"/></p>
    <p>PW : <input type="text"/></p>
    <button> 로그인하기</button>
</div>

</body>
</html>

CSS꾸미기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <style>
        .mytitle{
            background-color: green;

            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
            background-position: center;
            background-size: cover;

            border-radius: 10px;
            padding-top: 40px;
        }
        .wrap{
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="mytitle">
         <h1> 로그인 페이지 </h1>
        <h5> 아이디, 비밀번호를 입력해주세요</h5>
    </div>

    <p>ID : <input type="text"/></p>
    <p>PW : <input type="text"/></p>
    <button> 로그인하기</button>
</div>

</body>
</html>

background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-position: center;
background-size: cover;

배경화면 URL넣고, 크기 맞추고, 위치는 가운데 정렬

3단콤보로 함께~~

border-radius: 10px;

배경 이미지 둥글게~

padding-top: 40px;

padding은 안쪽 여백/ margin은 바깔쪽 여백!

<div class="wrap">
    <div class="mytitle">
         <h1> 로그인 페이지 </h1>
        <h5> 아이디, 비밀번호를 입력해주세요</h5>
    </div>

.wrap{
    width: 300px;
    margin: auto;
}

왼쪽에 있는 것들을 가운데 정렬하기 위해 <div>로 묶은 후,

거기에 가운데 정렬을 해주기!

왕초보 코딩러 - 4주차

코딩하는영도리 2022. 11. 29. 02:16

2022. 11. 29. 02:16

4주차 강의는 오래걸렸다.

아는 동생권유로 보험 시험 준비 때문에 수업에 일주일간 아예 손을 뗏더니,,

먼가 더 어려워지고 수업 진도도 느슨해졌다..

역시,,나의 게으름이란,,,!!

그래도 너무 진도에 연연하지 않고,

잘 모르면 두번씩 강의듣고, 강의노트보면서 복습하며

최대한 이해하고 넘어가도록 했지만, 2주차에 너무 속도만 냈던게 독인건지..

점점 꼬여서 나에겐 너무 어렵다..코딩 이자슥!

4주차 숙제하다가 대한민국:가나전 축구를 보았는데,

우리 흥민이형 왤케 안쓰럽냐...ㅠㅠ

얼굴이 퉁퉁붓고 멍든것 같은,,

국내 팬들을 위해!

자기 한 몸 불사르는 모습에 감동

마스크를 써도 저 멋짐은 가라앉질 않네!

왜 항상 우리나라 축구는 불리하게 적용될까..

항의하다 레드카드 받은 벤투감독!!

그럼 다음 포루투갈전에 감독님은 못나오시는건가요??ㅠㅠㅠㅠ

(궁금한 축알못!!)

나비처럼 날아올라 날카롭게 쏘아올린 멀티골 주인공, 조규성 선수!!

와아.. 진짜 나비가 하늘 높이 날아오르는 느낌이였다.

진짜 두번째 볼 넣었을땐 가슴이 울컥했는데,

관중석에서도 다들 울고 있드라,,,(뭉클;;;;)

너무나도 잘 싸워줬는데, 3:2로 졌다...

축알못인 나에게도 보는내내 겨땀 흘릴만큼 흥미진진한 게임을 보여준 우리팀에게 박수!!

깊은 감동과 아쉬움을 남겨둔채,

이번 월드컵 16강은 힘들겠지~?

다시 맘잡고,, 4주차 숙제와 마무리나 하자!!(흐흑,,ㅠㅠ)

이번4주차 숙제는 기존에 만들었던 "김효주 팬명록"에

닉네임과 댓글을 달면(POST방식)

하단에 보여주는것(GET방식)을 이용한다.

김효주 팬명록에 축구이야기가,,, 아쉽다 아쉬워!!!

Flask 시작 코드

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
return 'This is Home!'

if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)

GET/POST요청 API 코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

GET/POST요청 확인 Ajax코드

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
})

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
})

크롤링 기본코드

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=headers)

soup = BeautifulSoup(data.text, 'html.parser')

pymongo 기본코드

from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta # 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

2~3주차에 나왔던 내용들이 계속 나오니 어려움을 느낄수 밖에 없는것 같다.

그래도 꾸역꾸역 어렵사리 4주차 강의까지 마무리 짓고,

마지막 5주차 하나 남았다!!!

5주차는 게으름 피지 말고, 열심히 들어서

다시 처음부터 복습하며 수강해야겠다.

점점 코딩은 내 길이 아닌가 싶긴 한데,,

그래도 내가 선택한 이 강의는 포기하지말고 완강하도록!

임티보다가 갑자기 든생각...

오늘은 카카오주식아! 좀 올라가보자!!!

왕초보코딩러 - 3주차

코딩하는영도리 2022. 11. 17. 06:28

2022. 11. 17. 06:28

3주차 강의가 끝났다!

1~2주차 강의는 무조건 8강씩 끝낼 생각으로 마음만 너무 앞섰던것 같다.

1주차에 비해 2주차는 난이도도 더 어려워지고, 내용도 많아진것 같은데,

무조건 하루 8강이라는 내 오기(?)에 결국엔 머릿속에 남는것이 없이 2주차가 끝난것 같다.

3주차 강의는 속도보단 모르면 다시 듣고 하루 1~2강이라도 제대로! 라는 마음가짐으로 시작했다.

사실 조금 게으른 느낌도 들긴 했지만, 2주차 강의보단 3주차 강의가 내 머릿속에 많이 남는것 같아 만족이다!

3주차 강의 내용은

1. 파이썬 기초 / 2. 웹스크래핑(크롤링) /3. mongoDB

pip(python install package)사용하여

파일 >> 설정 >> 프로젝트:pythonprac >> Python 인터프리터

>> requests , bs4, pymongo, dnspython 패키지설치하기!

requests 기본코드
import requests # requests 라이브러리 설치 필요
r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()
크롤링 기본코드
import requests
from bs4 import BeautifulSoup # 타겟 URL을 읽어서 HTML를 받아오고,
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('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)
# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦 # soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨 # 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')
BeautifulSoup 사용방법
1. 원하는 부분에서 마우스 오른쪽 클릭 → 검사
2. 원하는 태그에서 마우스 오른쪽 클릭
3. Copy → Copy selector로 선택자를 복사할 수 있음
pymongo 기본코드
from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta
pymongo로 DB조작하기
# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

import requests
from bs4 import BeautifulSoup

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('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

songs = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for song in songs:
   rank = song.select_one('td.number').text[0:2].strip()
   title = song.select_one('td.info > a.title.ellipsis').text.strip()
   artist = song.select_one('td.info > a.artist.ellipsis').text
   print(rank,title,artist)

#순위, 곡, 가수 스크래핑
#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.number
#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.title.ellipsis
#body-content > div.newest-list > div > table > tbody > tr:nth-child(1) > td.info > a.artist.ellipsis

∇ 웹스크래핑 결과

1 바라만 본다 MSG워너비 (M.O.M)
2 Next Level aespa
3 신호등 이무진
4 Weekend 태연 (TAEYEON)
5 치맛바람 (Chi Mat Ba Ram) 브레이브걸스 (Brave girls)
6 Butter 방탄소년단
7 나를 아는 사람 MSG워너비 (정상동기)
8 Permission to Dance 방탄소년단
9 비 오는 날 듣기 좋은 노래 (Feat. Colde) 에픽하이 (EPIK HIGH)
10 헤픈 우연 헤이즈 (Heize)
11 하루만 더 빅마마 (Big Mama)
12 비와 당신 이무진
13 Alcohol-Free TWICE (트와이스)
14 롤린 (Rollin') 브레이브걸스 (Brave girls)
15 19금 Peaches (Feat. Daniel Caesar & Giveon) Justin Bieber
16 Dun Dun Dance 오마이걸 (OH MY GIRL)
17 Dynamite 방탄소년단
18 라일락 아이유 (IU)
19 안녕 (Hello) 조이 (JOY)
20 추적이는 여름 비가 되어 장범준
21 운전만해 (We Ride) 브레이브걸스 (Brave girls)
22 Celebrity 아이유 (IU)
23 러브 (Prod. by 로코베리) 로꼬 & 이성경
24 Bad Habits Ed Sheeran
25 상상더하기 MSG워너비
26 ASAP STAYC (스테이씨)
27 상상더하기 라붐 (LABOUM)
28 밤이 되니까 원슈타인
29 Timeless SG워너비
30 좋아좋아 조정석
31 Savage Love (Laxed - Siren Beat) (BTS Remix) Jawsh 685 & Jason Derulo & 방탄소년단
32 다정히 내 이름을 부르면 경서예지 & 전건호
33 내 손을 잡아 아이유 (IU)
34 사이렌 Remix (Feat. UNEDUCATED KID & Paul Blanco) 호미들
35 At My Worst Pink Sweat$
36 작은 것들을 위한 시 (Boy With Luv) (Feat. Halsey) 방탄소년단
37 OHAYO MY NIGHT 디핵 (D-Hack) & PATEKO
38 가을 우체국 앞에서 김대명
39 나는 너 좋아 장범준
40 멜로디 ASH ISLAND
41 Blueming 아이유 (IU)
42 밝게 빛나는 별이 되어 비춰줄게 송이한
43 에잇 (Prod. & Feat. SUGA of BTS) 아이유 (IU)
44 2002 Anne-Marie
45 LOVE DAY (2021) (바른연애 길잡이 X 양요섭, 정은지) 양요섭 & 정은지
46 아로하 조정석
47 흔들리는 꽃들 속에서 네 샴푸향이 느껴진거야 장범준
48 이제 나만 믿어요 임영웅
49 낙하 (With 아이유) AKMU (악뮤)
50 Off My Face Justin Bieber

종료 코드 0(으)로 완료된 프로세스

3주차, 진짜 반이 지나갔다..
남은 강의도 게으름 피지말고 열심히!

왕초보 코딩러 - 2주차

코딩하는영도리 2022. 11. 13. 23:59

2022. 11. 13. 23:59

완전 찐찐찐~ 왕초보 코딩러 2주차 강의 완료!!!

일 쉬고있을 때, 호다닥 하고 싶어서 하루 최대강의 8강씩 듣자 맘먹었더니,,

벌써 2주차 강의를 완료 하였다.

아 근데,, 2주차 강의는 1주차 강의보다 너무 어렵고, 따라가기 너무 버거웠다..

사실 강사님 따라하기 정도지,,(사실 똑같이 따라하는데도 오류 투성이가..!!)

혼자 처음부터 해봐! 라고 한다면 아무것도 하지 못할것 같다...

2주차는 JQuery와 Ajax을 배웠는데,

아직까지도 정확히 먼지는 모르고,

아마 한 두번은 들어야 내것이 될것 같은 느낌!

2주차 배운내용 정리 시작!!

크롬 개발자도구 콘솔창에 쳐보기
id 값이 post-box인 곳을 가리키고,
hide()로 안보이게 한다.
>> $('#post-box').hide();
show()로 보이게 한다.
>> $('#post-box').show();
Ajax 기본골격

$.ajax({

type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

이미지바꾸기
>> $('#아이디값').attr('src',바꾸고자할URL)
텍스트바꾸기
>> $('#아이디값').text(바꾸고자할MSG)

2주차 숙제는 1주차 숙제에 실시간 온도 나타내기!

날씨 API를 이용하여

http://spartacodingclub.shop/sparta_api/weather/seoul

<script>
    $(document).ready(function () {
            $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
        data: {},
        success: function (response) {
          let temp = response['temp']

          $('#temp').text(temp)
        }
      })
    });
</script>

이렇게 사용하니 바로 똭!!! 너무너무 신기하다..

벌써 9도라니..

올겨울은 건강하게 코딩하며 보내보자!!

왕초보코딩러-1주차

코딩하는영도리 2022. 11. 11. 00:22

2022. 11. 11. 00:22

#1 [왕초보] 비개발자를 위한, 웹개발 종합반 in 팀스파르타!

코딩에 코자도 모르는 찐찐찐 왕초보 코딩러..

코딩은 커녕 노트북 컴퓨터 단축키 하나 제대로 모르고,

70대 할머니처럼 마우스도 꾹꾹 누르는 내가!!!

40대가 되기전에 뭔가 배워보겠다며 도전하게 되었다.

벌써 1주차가 끝나고 숙제로..

좋아하는 가수 팬명록을 만들라는데,,

좋아하는 가수를 아무리 떠올려도 생각이 나질 않는거지..ㅠㅠㅠ

내가 제일 좋아하는 김효주 선수!

먼가 만들어 놓으니 진짜 팬심 한가득 생긴것 같은 이 기분..

#2 왕초보도 복붙만 잘하면...!!

난 이강의 진짜 잘 들은것 같다..

내 수준에 좀 버겁고, 아직 손에 익지도 않고,

할머니처럼 노트북 가까이 가서 뭣이 틀렸는지 꼼꼼히 보지만,

몇십분동안 찾지도 못하고, 쩔쩔매다가...

딱 찾아서 정상적으로 출력될 땐 기분이 짜릿..!!

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

  <style>

    *{
      font-family: 'Single Day', cursive;
    }
     .mytitle {

            color: white;
            height: 250px;
            width: 100%;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https:%2F%2Fblog.kakaocdn.net%2Fdn%2FlVRTW%2Fbtq2cmgjOBs%2FuxwLkA4ZFDkk9gCICz8Mu1%2Fimg.jpg");
            background-size: cover;
            background-position: top;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
      .mypost{
          max-width: 500px;
          width: 95%;
          margin: 20px auto 0px auto;
          box-shadow: 0px 0px 3px 0px gray;
          padding: 20px;
      }

      .card{
          max-width: 500px;
          width: 95%;
          margin: 20px auto 0px auto;
          box-shadow: 0px 0px 3px 0px gray;
          padding: 20px;
      }
      .twobutton{
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;

            margin-top: 20px;
        }

      .mypost>form-floating{
        height: 600px;

      }


  </style>
</head>

<body>
    <div class="mytitle">
      <h1>김효주 팬명록</h1>
    </div>

    <div class="mypost">
        <div class="form-floating mb-3">
      <input type="URL" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">닉네임</label>
    </div>

    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
        <label for="floatingTextarea">응원댓글</label>
    </div>

    <div class="twobutton">
        <button type="button" class="btn btn-dark">응원남기기</button>
    </div>

    </div>

    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>우승 멋져요!</p>
          <footer class="blockquote-footer">윤영선 <cite title="Source Title"></cite></footer>
        </blockquote>
      </div>
    </div>

      <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>우승 멋져요!</p>
          <footer class="blockquote-footer">윤영선 <cite title="Source Title"></cite></footer>
        </blockquote>
      </div>
    </div>

      <div class="card">
          <div class="card-body">
            <blockquote class="blockquote mb-0">
              <p>우승 멋져요!</p>
              <footer class="blockquote-footer">윤영선 <cite title="Source Title"></cite></footer>
            </blockquote>
          </div>
        </div>
</body>

</html>

#3 오늘도 화이팅!

내일은 더 멋지게!!

1주차 강의도 열심히 했으니 남은 5주차 강의도 열심히 들어서

무언가 멋진 결과물이 나왔으면 좋겠다.

PREV 이전 1 2 NEXT 다음

게으른 "소"이야기