23/10/11 wil(1)
2023. 10. 11. 20:04ㆍ카테고리 없음
///////////타이틀태그에 버튼태그 직접 지정변경 보더의 solid를 값은 잘모르겠다. 나중에 바꿔봐야지 마진탑은 위에만 박스바깥쪽 공간확보////////////
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 추억앨범</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
/////////// 부트스트랩을 라이브러리로 이용하기 위한 기본 link 값////////////
///////////제이쿼리를 이용하기 위한 기본설정 ////////////
<style>
.title {
height: 250px;
color: white;
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-size: cover;
background-position: center;
}
///////////div class를 title로 준 태그의 변경 div박스의 높이 글자색상 흰색////////////
//////////디스플레이,플렉스 디렉션, 얼라인 아이템, 저스티파이 컨텐트는 박스안 정렬방법 , 가로로 정렬 할려면 column 대신 row/////////////
///////////백그라운드는 이미지를 유알엘로 따오고 사이즈는 커버로 위치는 중앙 사이즈 커버는 아직 무슨의미인지 모르겠당.////////////
.title>button {
width: 150px;
height: 50px;
background-color: transparent;
color: white;
border: 1px solid white;
border-radius: 6px;
margin-top: 30px;
}
///////////타이틀태그에 버튼태그 직접 지정변경 보더의 solid를 값은 잘모르겠다. 나중에 바꿔봐야지 마진탑은 위에만 박스바깥쪽 공간확보////////////
.cards {
width: 1200px;
margin: 30px auto 0px auto;
}
///////////마진은 순서 위 오른쪽 아래 왼쪽 ////////////
.box {
width: 500px;
margin: 30px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px;
border-radius: 5px;
}
//////////// 패팅은 상자와 텍스트 사이 거리값 박스 쉐도우는 상자에 그림자넣기 순서대로 위 오른쪽 아래 왼쪽/////////////
.btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.btn>button {
margin-right: 5px;
}
</style>
<script>
$(document).ready(function () {
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
$('#msg').text(mise)
})
})
///////////패치 붙이기 유알엘 값을 지정 , mise를 유알엘의 data의 특정값과 연결 , id를 msg로 롤 한 태그에 해당 정보 텍스트를 넣음 ////////////
function openclose() {
$('#boxing').toggle();
}
//////////버튼태그에 온클릭값을 openclose로 주고 id를 boxing으로 설정한 곳을 껏다 켰다하게 함 /////////////
function makecard() {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').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-body-secondary">${date}</small>
</div>
</div>
</div>`;
$('#cards').append(temp_html);
}
////////////기록하기 버튼태그에 온클릭 메이크카드 값을 주고 , 인풋태그 각각에 id image title content date 을 준다. 카드의 div태그를 한개 복사해서 temp_html 을 정의하고 인풋에 넣는 내용에 따라 다른 내용이 붙어야하므로 ${image} ${title} ${content} ${date} 이렇게 붙인다.////////
</script>
</head>
<body>
<div class="title">
<h1>나만의 추억앨범</h1>
<p >현재 서울의 미세먼지 : <span id="msg">나쁨</span></p>
<button onclick="openclose()">추억 저장하기</button>
////////버튼에 온클릭 오픈클로즈주기 id를 msg로 줘서 나쁨 텍스트 패치로 바꾸기////////
</div>
<div class="box" id="boxing">
<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 mb-3">
<input type="email" class="form-control" id="date" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="btn">
<button onclick="makecard()" type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
////////id를 boxing으로 줘서 toggle 작동하게하기////////
<div class="cards">
<div id="cards" 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-body-secondary">앨범날짜</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-body-secondary">앨범날짜</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-body-secondary">앨범날짜</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-body-secondary">앨범날짜</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>