<!doctype html>
<html lang="en">
<head>
<title>상세 페이지</title>
<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=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
.title {
text-align: center;
padding: 20px;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* 이미지 및 설명을 가로로 중앙에 위치시키는 방법 추가 */
}
.image {
max-width: 30%;
margin-left: 10px;
/* 좌측 마진을 조정합니다. */
margin-right: 10px;
/* 우측 마진을 조정합니다. */
}
.image img {
max-width: 100%;
height: auto;
}
.description {
max-width: 70%;
padding-left: 20px;
}
.pr1 {
background-color: green;
}
.hide {
display: none;
}
.mytext {
border-color: black;
background-color: white;
border-radius: 10px;
font-size: 20px;
transition: all 0.4s;
}
</style>
<script>
$(document).ready(function(){
setting();
})
function setting(){
let a = $('#name').text();
console.log(a);
}
function edit_box() {
popupWindow = window.open("/edit.html", "title", "resizeable");
popupWindow.resizeTo(430, 1050);
popupWindow.onresize = (_ => {
popupWindow.resizeTo(430, 1050);
})
}
</script>
</head>
<body>
<div class="title">
<a href="/"><img src="https://blog.kakaocdn.net/dn/C9tc8/btsgfqWbd5E/JHJCNdq1kiBtlM7MgxwfT0/img.png" width="120"
height="150"></a> <a href="/"><img
src="https://blog.kakaocdn.net/dn/rGKiN/btsf6FOokeB/yn0up2kIAvfC7E0TGkDlxK/img.jpg" width="360"
height="80"></a>
</div>
<div class="container">
<div class="image">
<img src="{{myself['photo']}}" class="card-img-top" style="max-width: 300px; height: auto;">
</div>
<div class="description">
<h1 class="mytitle" >이름 : {{ myself['name'] }}</h1>
<textarea id="name" class="hide">{{ myself['name'] }}</textarea>
<p class="mytime">MBTI : {{ myself['mbti'] }}</p>
<p class="mytime">자기 소개: {{myself['introduce']}}</p>
<p class="mytime">장점 : {{ myself['merits_demerits'] }}</p>
<p class="mytime">협업 스타일 : {{ myself['style'] }}</p>
<p class="mytime">blog_url : {{ myself['blog'] }}</p></a>
<p class="mytime">github_url : {{ myself['github'] }}</p>
<button class="mytext" type="button" onclick=edit_box()>수정하기</button>
<button class="mytext" type="button" onclick="location.href='/'">목록</button>
</div>
<div></div>
</div>
</body>
</html>20230518 사진 슬라이드 기능 및 자막넣기
2023. 5. 18. 20:49