Comparing sensitive data, confidential files or internal emails?

Most legal and privacy policies prohibit uploading sensitive data online. Diffchecker Desktop ensures your confidential information never leaves your computer. Work offline and compare documents securely.

2주차에 더해진 코드 비교

Created Diff never expires
5 removals
111 lines
20 additions
127 lines
<!doctype html>
<!doctype html>
<html lang="en">
<html lang="en">


<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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"
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
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://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"
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
crossorigin="anonymous"></script>


<title>팬명록</title>
<title>팬명록</title>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">


<style>
<style>
* {
* {
font-family: 'Do Hyeon', sans-serif;
font-family: 'Do Hyeon', sans-serif;
}
}
.mytitle {
.mytitle {
width: 100%;
width: 100%;
height: 250px;
height: 250px;


/* 배경화면 이미지 삼형제 */
/* 배경화면 이미지 삼형제 */
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://image.genie.co.kr/Y/IMAGE/IMG_MUZICAT/IV2/Genie_Magazine/10378/Mgz_Sub_EVT_20210623163827.jpg);
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://image.genie.co.kr/Y/IMAGE/IMG_MUZICAT/IV2/Genie_Magazine/10378/Mgz_Sub_EVT_20210623163827.jpg);
background-size: cover;
background-size: cover;
background-position: center 40%;
background-position: center 40%;


color: white;
color: white;


/* 상자(나) 안 내용물 가운데 정렬하기 4형제 */
/* 상자(나) 안 내용물 가운데 정렬하기 4형제 */
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
justify-content: center;
justify-content: center;
align-items: center;
align-items: center;
}
}
.mypost {
.mypost {
box-shadow: 0px 0px 5px 0px gray;
box-shadow: 0px 0px 5px 0px gray;
max-width: 500px;
max-width: 500px;
width: 95%;
width: 95%;


margin: 20px auto 20px auto;
margin: 20px auto 20px auto;
padding: 20px;
padding: 20px;
}
}
.post-buttons {
.post-buttons {
margin-top: 15px;
margin-top: 15px;
}
}
.fan-comment {
.comment-cards {
max-width: 500px;
max-width: 500px;
width: 95%;
width: 95%;


margin: 10px auto;
margin: 10px auto;
}
}
.card {
.card {
margin: 10px auto 10px auto;
margin: 10px auto 10px auto;
}
}
</style>
</style>
<script>
// 페이지 로딩이 완료되면 Ajax가 GET방식으로 서울시 현재 기온을 읽어오고 표시한다.
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {

let temp = response['temp'];

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


<body>
<body>
<div class="mytitle">
<div class="mytitle">
<h3>LA POEM</h3>
<h3>LA POEM</h3>
<h1>라포엠 팬명록</h1>
<h1>라포엠 팬명록</h1>
<!-- <p>라포엠</p>-->
<p>현재 기온: <span id="temperature">00.0</span>도</p>
</div>
</div>
<div class="mypost">
<div class="mypost">
<div class="form-floating mb-3">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
<label for="floatingInput">닉네임</label>
</div>
</div>
<div class="form-floating">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
<label for="floatingTextarea2">응원댓글</label>
</div>
</div>
<div class="post-buttons">
<div class="post-buttons">
<button type="button" class="btn btn-dark">응원 남기기</button>
<button type="button" class="btn btn-dark">응원 남기기</button>
</div>
</div>
</div>
</div>
<div class="fan-comment">
<div class="comment-cards">
<div class="card">
<div class="card">
<div class="card-body">
<div class="card-body">
<blockquote class="blockquote mb-0">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</blockquote>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card">
<div class="card-body">
<div class="card-body">
<blockquote class="blockquote mb-0">
<blockquote class="blockquote mb-0">
<p>내가 성악을 찾아 듣게 되다니...</p>
<p>내가 성악을 찾아 듣게 되다니...</p>
<footer class="blockquote-footer">책임져</footer>
<footer class="blockquote-footer">책임져</footer>
</blockquote>
</blockquote>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card">
<div class="card-body">
<div class="card-body">
<blockquote class="blockquote mb-0">
<blockquote class="blockquote mb-0">
<p>날이 갈수록 귀티가 흐르는군요</p>
<p>날이 갈수록 귀티가 흐르는군요</p>
<footer class="blockquote-footer">오래가자</footer>
<footer class="blockquote-footer">오래가자🫶</footer>
</blockquote>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>


</body>
</body>


</html>
</html>