[내일배움단 ai트랙 3기]미니 프로젝트(5)

[내일배움단 ai트랙 3기]미니 프로젝트(5)

2022. 8. 31. 00:56ㆍ스파르타코딩클럽[AI트랙 3기]/TIL

22.08.30

아, 좀 잘해볼라했는데, 오늘 공격받았다. 내가 제일 무서워하는게 보이지 않는 적인데 딱 그표현이 맞다고할까나... 대뜸 알약에서 렌섬웨어 공격을 받았다해서 놀래가지고 어떻게할까 시전하다가 갑자기 컴퓨터가 맛탱이가길래 올것이 온건가.. 하면서 장바구니에 넣어두었던 맥북을 다시 봤다. (가격보고 포기) 팀프로젝트를 빨리해야되는데 조원들에게 피해를 줄까봐 미칠노릇이었다. 안그래도 하는게 없고 맨날 물어보기만 하는데.... 여하튼 이런 거지같은 상황에서 한줄기의 빛같은 팀원분이 이것은 지금 알약이 원인이다! 라고 말해주셔서 알약을 지우고 다시하니 정상적으로 작동했다. 이와 유사하게 바이러스가 공격하면 어떻게 대처해야할까 막막했다. 개발자에게 있어 바이러스는 진짜 위험한 존재인듯... 다행히 서브로 맥북이 있긴한데 연식이 오래된 놈이라.. 내가 지금 하는 것을 해낼지는 미지수다. 빨리 취업하고 돈벌어서 장만해야지. 오늘 그래도 개인과제는 보내드렸고, 아쉬운것이 인강을 많이 못들은거? 내일이 마지막인데.. 완강을 못하면 어떻게하나~ 라고 고민할 시간에 인강을 들으러가겠음. 그럼 이만 ! 간만에 멘탈 탈탈털리는 경험. 다시는 하고 싶지 않다. 아, 그리고 팀프로젝트를 만드는데 내 기분을 적는 칸에 시행착오 오진다. 라고 적혀있었다. 진짜 이말 그 잡채였던 하루... '시행착오 오진다.'

ㅁ팀 소개 페이지 만들기

1)container2를 지우면 왜 item 2가 날아가지? 어떤 연관이 있나?
.container2 {
            display: flex;
            flex-flow: row wrap;

            #border: 1px solid black;

            height: 300px;
            #justify-content: space-around;

        }
2)부트스트랩 카드 3장붙은거를 4장 가로로 만들기
<div class="row row-cols-1 row-cols-md-3 g-4">에서 md를 4로 바꾸면 됨.(코딩이라기 보다는 부트스트랩 사용)
-틀은 내 자기소개 페이지 그대로 하고 글자랑 사진만 바꿈 + 부트스트랩 이용
3)카드에 버튼 넣어주기
부트스트랩 버튼 그대로 이용. class가 이미 먹여진 상태에서 그 class 사용하기
4)'팀원 추가하기' 카드 박스 추가
카드는 class =col 이라는 것에 묶여있음. id 값은 상위 div에 해줌. 그럼 ,col의 상위는 class="row row-cols-1 ......"이것인데 여기다가 class앞에 바로 id 먹여줌. 그럼 <div id="cards-box" class="row row-cols ...">
$('#cards-box').append(temp_html)해주면 됨
코드로 쓰면
ㄱ)버튼 onclick="함수이름(나는 plus로 함)"
ㄴ)<script>에서 함수 부르기
function plus() {
let temp_html = `추가하고 싶은 카드 전체 복사 붙여넣기`
$('#cards-box').append(temp_html)
}
해주면 카드가 붙음.

★해결해야 할 것 : 삭제버튼 누를 때 카드가 삭제되게 하기.

*code

<!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>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .item1 {
            #background-color: #73F1E8;
            border-radius: 20px;

            flex-grow: 2;

            letter-spacing: 1px;
            line-height: 40px;

            font-style: normal;
            font-weight: bold;

            box-shadow: 10px 10px 10px 1px #d8d8d8;
            margin-right: 50px;

            padding-left: 30px;

            width: 600px;


        }

        .item2 {

            text-align: center;

            background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBJTJ57QsNc7E-7XK9eoQYPDb0DATZD_3KRw&usqp=CAU");
            background-size: cover;
            background-position: center;
            border-radius: 20px;

            flex-grow: 1;

            width: 260px;

            box-shadow: 10px 10px 10px 1px #d8d8d8;

        }

        .container1 {
            display: flex;
            flex-flow: row wrap;


            #border: 1px solid black;

            height: 500px;

        }

        .container2 {
            display: flex;
            flex-flow: row wrap;

            #border: 1px solid black;

            height: 400px;
            #justify-content: space-around;

        }

        .footer {
            grid-area: footer;
            font-size: small;
            font-weight: 100;
            text-align: center;
            margin-top: 15px;
            color: #c6c6c6;
        }

        .card-img-top {

            height: 350px;

        }

        .btn-outline-dark {
            margin-left: 260px;
        }

        .btn-outline-secondary {
            margin-left: 1600px
        }
    </style>
    <script>
        function plus() {
            let temp_html = ` <div class="col">
        <div class="card">
            
                 class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">이름</h5>
                <p class="card-text">내용블라블라</p>
                <button type="button" class="btn btn-outline-dark">수정</button>
                <button type="button" class="btn btn-dark">삭제</button>
            </div>
        </div>
    </div> `
            $('#cards-box').append(temp_html)
        }

        function del() {
            $('#co1').empty()
        }

    </script>

<body link="#ff0000" alink="#00ff00" vlink="#0000ff">

<div class="container1">
    <div class="item1">
        <h1>팀 소개 페이지</h1>
        팀 소개 블라블라<br>
        1.우리팀만의 특징과 추구하는 궁극적인 목표<br>
        2.우리팀의 약속<br>
        3.연비가 좋다<br><br><br>

        팀장 : 이태은<br>
        팀원 : 이현재, 조지현, 정진엽
    </div>
    <div class="item2">
    </div>
</div>
<br>
<div id="cards-box" class="row row-cols-1 row-cols-md-4 g-4">
    <div class="col" id="co1">
        <div class="card">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFVM0f5Lnx8tlxe9HuRR0N70QxGHjMcgOg6A&usqp=CAU"
                 class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">이름1</h5>
                <p class="card-text">내용블라블라</p>
                <button type="button" class="btn btn-outline-dark">수정</button>
                <button type="button" class="btn btn-dark" onclick="del()">삭제</button>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFVM0f5Lnx8tlxe9HuRR0N70QxGHjMcgOg6A&usqp=CAU"
                 class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">이름2</h5>
                <p class="card-text">내용블라블라</p>
                <button type="button" class="btn btn-outline-dark">수정</button>
                <button type="button" class="btn btn-dark" onclick="delete()">삭제</button>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFVM0f5Lnx8tlxe9HuRR0N70QxGHjMcgOg6A&usqp=CAU"
                 class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">이름3</h5>
                <p class="card-text">내용블라블라</p>
                <button type="button" class="btn btn-outline-dark">수정</button>
                <button type="button" class="btn btn-dark" onclick="del()">삭제</button>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFVM0f5Lnx8tlxe9HuRR0N70QxGHjMcgOg6A&usqp=CAU"
                 class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">이름4</h5>
                <p class="card-text">내용블라블라</p>
                <button type="button" class="btn btn-outline-dark">수정</button>
                <button type="button" class="btn btn-dark" onclick="del()">삭제</button>
            </div>
        </div>
    </div>
</div>
<br><br>
<button type="button" class="btn btn-outline-secondary" onclick="plus()">팀원 추가하기</button>
<br><br>

<div class="footer">copyright 2022. team_auid All rights Reserved.</div>
</body>
</html>

ㅁ웹개발 종합반 복습(2주차 8강 ~ 3주차 7강)

*2-8
ㅇ목록불러오는데 계속 쌓이지 않고 처음부터 비워서 나오게하는 법
-functiopn q1() {
$('#id').empty()
}
ㅇ조건별로 색 다르게 나오게하는 법
1)let temp_html = `<li class="bad">${값1}:${값2}</li>`
지정해주고 css가서 .bad{color : red}하면 해당되는 값은 색이 바뀜.
2)여기에서 조건문을넣어줌
if (gu_mise > 120){
temp_html = `<li class="bad">${값1}:${값2}</li>`
ㅇ2주차 과제
팬명록 밑에 기온 넣기
-우선 프론트 부분 추가 <p>현재기온: 00.0도</p>한 후 숫자 부분만 <span>으로 묶어준다.
<p>현재기온: <span id="temp">00.0<span>도</p>
마지막으로 <script>만들어주기.
-로딩 후 호출하기(코드스니펫)를 script에 넣어줌.
$(document).ready(function(){
alert('다 로딩됐다!')
});
alert대신에 온도가 나오게 하면 됨.
<script>
        $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
          data: {},
          success: function(response){
              $('#temp').text(response['temp'])
            }
          })
</script>
여기서 .text해줘야 글자가 출력됨.

ㅇ2주차 과제 code

<!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>
        .mytitle {
            background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fpost.phinf.naver.net%2FMjAyMTExMTJfMjU3%2FMDAxNjM2Njg2ODM1MzI0.MhsU7fa4VEZ6RNsKoi_pShwVCqBaGmGiCrR48EzV-9Mg.ymdvMxVwChByHAYxs7z9wsHWkdrlUtbAv9ls2_H7eMkg.JPEG%2FIYY5YQYGYObdjEowjv2RahaMlvh4.jpg&type=sc960_832");
            background-position: center;
            background-size: cover;

            width: 100%;
            height: 250px;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .card {
            margin: 10px auto 0px auto;
            padding: 10px;
            width: 500px;

            align-text: center;
        }

        .mypost {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0px auto;

            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;
        }

        .mybtn {
            margin-top: 20px;
        }

        .cards {
            margin-top: 50px;
        }
    </style>
    <script>
         $.ajax({
              type: "GET",
              url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
              data: {},
              success: function(response){
                $('#temp').text(response['temp'])
                  }
            })
    </script>
</head>

<body>
<div class="mytitle">
    <h1>창모 팬명록</h1>
    <p>현재기온 : <span id="temp">00.0</span>도</p>
</div>

<div class="mypost">
    <div class="form-floating mb-3">
        <input type="email" 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">Comments</label>
    </div>

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

<div class="cards">
    <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>
</div>

</body>

</html>

*3주차
ㅇ${제목} 을 사용하는 방법(for문에서 주로 사용)
ajax 콜에서
type / rul / data / success 네개를 불러오는데 그 중에 success를 우리가 손댐.
success : funtion (response) {
let rows = response['movies']
for (let i = 0; i < row.length; i ++) {
let title = row[i]['title']

let temp_html = `<div>바꾸고 싶은 것`
해줌. 그리고 카드를 붙이고 싶으면 밑에 $('#cards-box').append(temp_html)해주면 카드가 데이터대로 붙어서 올라감.
ㅇ파이썬 문법은 직관적인 것
-패키지 사용
requests 사용 해보기 : request는 print(rjson)해주면 나옴
날씨 api사용해서 출력 해보기
rows = rjson['realtimecityair']['row'] 하면 출력 됨.

for row in rows:
print(row)하면 row 전체 값이 나옴.

for row in rows:
gu _name =row['이름']
gu-mise=row['미먼']
print(gu_name, gu_mise) 해주면 이름이랑 미먼 출력
+)미먼이 60보다 작을 경우
if 'gu_mise' < 60: *여기서는 위에 gu_mise를 지정했으니 gu_mise
print(gu_name)
하면 60미만인 곳의 이름만 나옴.
ㅇ크롤링하기
-두가지 일을 해야함: 요청해서 html을 가져오기. (requests로 이미함),제목을 쉽게 찾아야함(beautifulsoup)를 설치해야함.
ㅇ파이선에서 글자만 출력하기
print(a.text)
-순위, 제목, 평점 크롤링(인터넷에 있는 데이터를 가져오는 것)
제목 :
순위 : alt="01" 에서 alt 값을 가져온다. alt는 <> 안에 있음 ->['alt']로 잡음
평점 : 9.64 <>밖에 있음. -> text로 잡음
title = a.text
rank= movie.select_one(중복안되는 곳)['alt']
star= movie.select_one(중복안되는 곳).text
+)중복되는 부분 찾는 것은 카피해서 카피셀렉터로 찾아내면 된다.

'스파르타코딩클럽[AI트랙 3기] > TIL' 카테고리의 다른 글

[내일배움단 ai트랙 3기]파이썬 문법 뽀개기(1) (0)	2022.09.01
[내일배움단 ai트랙 3기]미니 프로젝트(6+발표) (0)	2022.09.01
[내일배움단 ai트랙 3기] TIL 220829 (2)	2022.08.30
[내일배움단 ai트랙 3기]미니 프로젝트(3) (2)	2022.08.29
[내일배움단 ai트랙 3기]미니 프로젝트(2) (0)	2022.08.27

포카칩의 개발일지

포카칩의 개발일지

태그

최근글

댓글

공지사항

아카이브

'스파르타코딩클럽[AI트랙 3기] > TIL' 카테고리의 다른 글

관련글

티스토리툴바