7일 공부

개발 일지

7일 공부

rabbit97 2024. 8. 7. 21:07

3주차 강의 시작!! 어제 못찾았던 오류도 바로 수정하고 진도 쭉쭉 나가기

<!DOCTYPE html>

<head>

<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"

<style>

.mytitle {

color: white;

height: 250px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background-image: url("https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80");

background-position: center;

background-size: cover;

}

.mytitle > button {

width: 150px;

height: 50px;

background-color: transparent;

border: none;

color: white;

font-size: 18px;

font-weight: bold;

border-radius: 5px;

border: 1px solid white;

margin-top: 20px;

}

.mycards {

margin: 20px auto 20px auto;

width: 1200px;

}

.mypostingbox {

width: 500px;

margin: 20px auto 20px auto;

padding: 20px 20px 20px 20px;

border-radius: 5px;

box-shadow: 0px 0px 3px 0px orangered;

}

.mybtn {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

margin-top: 10px;

}

.mybtn > button {

margin-right: 10px;

}

</style>

$(document).ready(function () {

let url = "http://spartacodingclub.shop/sparta_api/seoulair";

fetch(url)

.then((res) => res.json())

.then((data) => {

let mise = data["RealtimeCityAir"]["row"][0]["IDEX_NM"];

$("#msg").text(mise);

});

function openclose() {

$("#postingbox").toggle();

}

function makeCard() {

let image = $("#image").val();

let title = $("#title").val();

let content = $("#content").val();

let date = $("#date").val();

let temp_html = `

<img src="${image}"

class="card-img-top" alt="...">

<h5 class="card-title">${title}</h5>

<p class="card-text">${content}</p>

</div>

</div>

</div>`;

$("#card").append(temp_html);

}

</script>

</head>

<body>

</div>

<input

type="email"

class="form-control"

id="image"

placeholder="name@example.com"

</div>

<input

type="email"

class="form-control"

id="title"

placeholder="name@example.com"

</div>

<input

type="email"

class="form-control"

id="content"

placeholder="name@example.com"

</div>

<input

type="email"

class="form-control"

id="date"

placeholder="name@example.com"

</div>

기록하기

</button>

</div>

<img

src="https://cdn.pixabay.com/photo/2024/07/17/08/53/sunrise-8901014_1280.jpg"

class="card-img-top"

alt="..."

</div>

</div>

<img

src="https://cdn.pixabay.com/photo/2023/11/02/16/47/dawn-8361032_1280.jpg"

class="card-img-top"

alt="..."

</div>

</div>

<img

src="https://cdn.pixabay.com/photo/2018/03/08/09/10/dawn-3208158_1280.jpg"

class="card-img-top"

alt="..."

</div>

</div>

<img

src="https://cdn.pixabay.com/photo/2024/07/24/12/59/bird-8918121_1280.jpg"

class="card-img-top"

alt="..."

</div>

</div>

</body>

</html>

오류 찾느라고 서의 새로 만든거같다 ㅠㅠㅠㅠ

뭔가 이상하지만 최종 목표는 fetch를 이용해서 미세먼지 수치를 나만의 추억 앨범 밑에다가 적용시키는게 목표였기 때문에 오늘 갈길이 먼 나는 빠르게 다음으로..

<!DOCTYPE html>

<head>

<title>스파르타플릭스</title>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>

@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

* {

font-family: "Gowun Dodum", sans-serif;

}

.main {

background-color: green;

color: white;

background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');

background-position: center;

background-size: cover;

}

body {

background-color: black;

}

.mycards {

width: 1200px;

margin: 20px auto 20px auto;

}

.mypostingbox {

width: 500px;

margin: 20px auto 20px auto;

border: 1px solid white;

padding: 20px;

border-radius: 5px;

}

.form-floating>input {

background-color: transparent;

color: white;

}

.form-floating>label {

color: white;

}

.input-group>label {

background-color: transparent;

color: white;

}

.mypostingbox>button {

width: 100%;

}

</style>

$(document).ready(function () {

let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";

fetch(url)

.then((res) => res.json())

.then((data) => {

let temp = data ['temp'];

$('#tem').text(temp);

})

function openclose() {

$('#postingbox').toggle();

}

function makeCard() {

let image = $('#image').val();

let title = $('#title').val();

let comment = $('#comment').val();

let star = $('#star').val();

let temp_html = `

<img src="${image}"

class="card-img-top" alt="...">

<h5 class="card-title">${title}</h5>

<p class="card-text">${comment}</p>

</div>

</div>`;

$('#card').append(temp_html);

}

</script>

</head>

<body>

</svg>

</a>

<li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>

</ul>

<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."

aria-label="Search">

</form>

<button type="button" class="btn btn-outline-light me-2">Login</button>

</div>

</header>

<p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직

세자뿐이다.</p>

</div>

</div>

</div>

</select>

</div>

</div>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

</div>

</body>

</html>

여기는 수월하게 넘어갔다!!

그리고 최종으로 강의 없이 주어진 화면을 만드는 숙제가 있었는데

<!doctype html>

<head>

<title>푸드파이터</title>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"></script>

<style>

@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");

* {

font-family: "Gowun Dodum", sans-serif;

}

body {

background-color: white;

color: black;

}

.header {

background-size: cover;

background-image:

url('https://images.unsplash.com/photo-1531697218799-ed0ae884c6c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80');

background-position: right;

height: 700px;

display: flex;

flex-direction: column;

margin-top: 15px;

}

.header>h1 {

margin: 0;

font-size: 40px;

}

.header>div {

font-size: 16px;

margin-top: 4px;

}

.form-button {

width: 150px;

height: 40px;

background-color: transparent;

border: 1px solid tr;

color: black;

font-size: 15px;

margin: 20px 10px 0px 0px;

}

.form-button:hover {

border: 2px solid black;

}

.info-button {

margin: 20px 0 0 15px;

height: 40px;

font-size: 14px;

}

.post {

width: 500px;

margin: 20px 0px 1px 20px;

padding: 20px;

box-shadow: 0px 0px 3px 0px transparent;

background-color: wheat;

}

.form-floating input,

.form-floating textarea {

color: black;

background-color: white;

}

.button2 {

display: flex;

justify-content: flex-end;

margin-top: 15px;

}

.button2>button {

margin-right: 10px;

}

.mycards {

width: 1600px;

margin: 30px auto;

flex-direction: row;

align-items: center;

}

.card {

border-radius: 30px;

background-color: white;

border: none;

color: black;

margin-left: 50px;

}

.card-img-top {

object-fit: cover;

height: 250px;

border-radius: 20px;

}

.card-title {

margin-top: 10px;

font-size: 18px;

}

.card-body {

border: blanchedalmond 2px solid;

border-radius: 20px;

}

.card-text {

color: black;

}

.comment {

color: black;

}

.play-button {

display: flex;

justify-content: flex-start;

margin-top: 20px;

}

a.nav-link {

color: #F17228;

font-size: large;

}

.icon {

height: 50px;

}

.card-button {

background-color: orange;

color: white;

text-align: center;

padding: 10px 15px;

border: none;

border-radius: 6px;

cursor: pointer;

}

.card-title {

font-weight: bold;

}

.card-button> :hover {

background-color: darkorange;

}

#input-card {

width: 500px;

margin: 0px 0px 0px 135px;

padding: 20px;

background-color: #f9f9f9;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

float: left;

margin-left: 0px;

}

.form-floating input,

.form-floating textarea {

color: black;

background-color: #f9f9f9;

border: 1px solid #ccc;

border-radius: 5px;

margin-bottom: 10px;

padding: 10px;

width: 100%;

}

.form-floating label {

color: #333;

}

.input-group button,

.input-group select {

background-color: rgb(168, 161, 161);

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

margin-top: 10px;

margin: 20px auto 0px auto;

}

.input-group button:hover,

.input-group select:hover {

background-color: gray;

}

.button2 {

text-align: right;

}

.button2 button {

background-color: #F17228;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

.button2 button:hover {

background-color: #f3620f;

}

.jumbotron-message {

margin-left: 150px;

font-size: 1500px;

}

</style>

</head>

<body>

</svg>

</a>

<li><a href="#" class="nav-link px-2 text-danger">Foodcourt</a></li>

</ul>

<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."

aria-label="Search">

</form>

<button type="button" class="btn btn-warning me-2">Login</button>

</div>

<h1 class="display-5 fw-bold">스파르타 푸드파이터</h1>

<p class="col-md-8 fs-4">본인만의 맛집을 소개하는 사이트입니다.<br>맛집을 소개해 주세요!</p>

</div>

</div>

</div>

</select>

</div>

</div>

</div>

</header>

</div>

</div>

</div>

</div>

</a>

</div>

</div>

<h5>Section</h5>

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>

</ul>

</div>

<h5>Section</h5>

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>

</ul>

</div>

<h5>Section</h5>

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>

<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>

</ul>

</div>

</footer>

</div>

</body>

</html>

이정도면 숙제에서 요구하는건 다 한거같아서 여기까지만 하고.. 바로 4주차로 넘어가기!!

3주차는 새로운 내용도 많았는데 본 캠프 들어오면서 기본기랑 오류없이 만들어내는 자세를 신경쓰면서 하다보니 막힘 없이 쭉쭉 나갔다.

강의 없이도 잘 만들었으니 충분히 이해했다고 생각한다!!

4주차 강의 시작!!

파이어베이스 설정 조금하고 시간이 다 되어 마무리!

----------------------------------------------------------------------------------------------------------------------

오늘의 학습 요약

오늘도 문제 없이 스무스하게 넘어갔다. 난이도가 쉬운편이라서 금방 적응한 것 같다. 여자친구가 옆에서 보면서 자기도 홈페이지 만들고 싶다고 해서 옆에서 이거 작성해라 저거 작성해라 하는데 술술 나와서 생각보다 놀랐다. 오늘은 아침에 알고리즘 조금 하고 강의를 시작했는데 내일부터는 아침에 한시간 정도는 알고리즘에 시간을 투자해도 될 것 같다. 스무스하게 진행 되어서 기분이 좋다. 매일 이런 진행 속도가 나왔으면 좋겠다.