Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

rabbit97 님의 블로그

6일 일지 본문

개발 일지

6일 일지

rabbit97 2024. 8. 6. 20:37

10시 조호영 튜터님의 git hup 강의가 있었다!

하라는대로 잘 했다! 쓰는 용도가 협업을 할때 유용하게 쓸 수 있는 프로그램인데 원리도 자세하게 알려 주셨으나 실전으로 들어가봐야 더 알 수 있을 것 같다.

 

그리고 html 2주차 강의를 들었는데 오늘 9시 출석체크 하자마자 한게 vs code 여러 플러그인 깔기.

 

여러가지를 추가 했는데 결과는 엄청 좋았다. 일단 강의를 들으면서 복붙 하면 카드가 이상하게 나오고 하는 상황이 있었는데 플러그인 중에 이 태그가 어디에 할당이 되어있는지 표시해주는 플러그인을 까니깐 복붙하면서 구역이 이상하게 잡힌 <div>가 어디에 할당이 잡혀있는지 나오니 오류가 없이 쭉쭉 나갔다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>스파르타 플릭스</title>
<link
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<style>

* {
font-family: "Gowun Dodum", sans-serif;
}

.main {
color: white;
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;
}
</style>
<script>
function a() {
$('#title').text('쥬라기월드');
}
</script>
</head>

<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div
class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
>
<a
href="/"
class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
>
<svg
class="bi me-2"
width="40"
height="32"
role="img"
aria-label="Bootstrap"
>
<use xlink:href="#bootstrap"></use>
</svg>
</a>

<ul
class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
>
<li>
<a href="#" class="nav-link px-2 text-danger">스파스타 플릭스</a>
</li>
<li><a href="#" class="nav-link px-2 text-white">홈</a></li>
<li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
<li><a href="#" class="nav-link px-2 text-white">영화</a></li>
<li>
<a href="#" class="nav-link px-2 text-white">내가 찜한 컨텐츠</a>
</li>
</ul>

<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input
type="search"
class="form-control form-control-dark text-bg-dark"
placeholder="Search..."
aria-label="Search"
/>
</form>

<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">
Login
</button>
<button type="button" class="btn btn-danger">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="main">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 id="title" class="display-5 fw-bold">킹덤</h1>
<p class="col-md-8 fs-4">
병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한
역병에 신음하는 산하. 정체모를 악에 맞서 백성을 구원할 희망은 오직
세자뿐이다.
</p>
<button type="button" class="btn btn-outline-light" onclick="a()">
영화 기록하기
</button>
<button type="button" class="btn btn-outline-light">상세정보</button>
</div>
</div>
</div>
<div class="mypostingbox">
<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 mb-3">
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="name@example.com"
/>
<label for="floatingInput">영화 제목</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupselect01">별점</label>
<select class="form-select" id="inputGroupselect01">
<option selected>별점 선택</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating mb-3">
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="name@example.com"
/>
<label for="floatingInput">추천 이유</label>
</div>
<button type="button" class="btn btn-danger">기록하기</button>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">영화 코멘트</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

그렇게 바로 끝! 중간에 제이쿼리로 바꾼 쥬라기 월드 다시 바꿔놔야할 것 같은데 그냥 뒀다. 여기까지 오는데 기본적인 문법 ' 랑 " 를 써야하는 상황 등 아직 공부할게 많긴 한데 4시에 조효영 튜터님 강의가 있었는데 아무런 문제 없이 이해할 수 있었다. 그래서 바로 3주차 강의!!

 

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

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

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>



<title>앨범</title>
<style>

* {
font-family: 'Gowun Dodum', sans-serif;
}

.mytitle {
background-color: green;
color: white;

height: 250px;

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

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 red;
}

.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

margin-top: 10px;
}

.mybtn>button {
margin-right: 10px;
 
}

.mybtn .btn-primary {
background-color: orangered;
}
</style>
<script>
function openclose() {
$('#postingbox').toggle()
}

function makeCard() {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let data = $('#data').val();

let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-muted">${data}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}
 
</script>
</head>

<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button onclick="openclose()"type="button" class="btn btn-outline-light">추억 저장하기</button>
</div>

<div class="mypostingbox" id="postingbox">

<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="name@example.com">
<label for="floatingInput">앨범 이미지</label>
</div>

<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="name@example.com">
<label for="floatingInput">앨범 제목</label>
</div>

<div class="form-floating mb-3">
<input type="email" class="form-control" id="content" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</div>

<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="data"></textarea>
<label for="floatingTextarea">앨범 내용</label>
</div>

<div class="mybtn">
<button type="button" class="btn btn-primary"
style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
기록하기
</button>
<button type="button" class="btn btn-secondary btn-sm">닫기</button>
</div>
</div>

<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-muted">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>


</body>

</html>

...

 

기록하기가 안된다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 일단 <div>로 구역을 잘못 정한건 아니고 이름도 하나씩 눌러보면서 다 있는거 확인 했는데 안된다.. 저기만 한시간 반째 어디가 잘못됐는지 고민중인데 이것 저것 꾸민다고 꼬인것 같진 않고 플러그인을 깔아도 역시 기본기가 중요한 거 같다.... 어차피 내일 까지 해결해야 할 내용이니 오늘 못한건 내일 일어나서 다시 생각해봐야겠다.

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

오늘의 학습 요약

 

확실히 어제보단 꼼꼼하게 오류 없이 코드를 작성하는 것 같다. 오늘 배운건 가장 큰게 부트스트랩이랑 제이쿼리가 어떤 방식으로 작동하는지 이해한게 크다.튜터님은 요새 자바 스크립트가 너무 잘되어서 쓸 이유가 딱히 없지만 이게 제이쿼리라는건 알아야한다고 한다. 어떤 방식으로 작동하는지 이해했다는 점에서 오늘도 만족스러운 결과였다. 마지막에는 구동에 실패했지만 내일은 알아내리라

'개발 일지' 카테고리의 다른 글

12일 일지  (0) 2024.08.12
9~11일 일지  (0) 2024.08.11
8일 일지  (0) 2024.08.08
7일 공부  (1) 2024.08.07
본 캠프 시작!  (1) 2024.08.05
'개발 일지' Related Articles more