팀소개 페이지 만들기
-필요한 것 공부 (부트스트랩, 자바스크립트 이용 버튼 만들기, 동작형 버튼 동작시키기, api 받아서 출력하기 등)
<html lang="en">
<head>
<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=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.item1 {
#background-color: #73F1E8;
border-radius: 20px;
flex-grow: 2;
letter-spacing: 1px;
line-height: 40px;
font-style: normal;
font-weight: bold;
box-shadow: 10px 10px 10px 1px #d8d8d8;
margin-right: 50px;
padding-left: 30px;
width: 600px;
}
.item2 {
text-align: center;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBJTJ57QsNc7E-7XK9eoQYPDb0DATZD_3KRw&usqp=CAU");
background-size: cover;
background-position: center;
border-radius: 20px;
flex-grow: 1;
width: 260px;
box-shadow: 10px 10px 10px 1px #d8d8d8;
}
.container1 {
display: flex;
flex-flow: row wrap;
#border: 1px solid black;
height: 500px;
}
.container2 {
display: flex;
flex-flow: row wrap;
#border: 1px solid black;
height: 400px;
#justify-content: space-around;
}
.footer {
grid-area: footer;
font-size: small;
font-weight: 100;
text-align: center;
margin-top: 15px;
color: #c6c6c6;
}
.card-img-top {
height: 350px;
}
.btn-outline-dark {
margin-left: 260px;
}
.btn-outline-secondary {
margin-left: 1600px
}
</style>
<script>
function plus() {
let temp_html = ` <div class="col">
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFVM0f5Lnx8tlxe9HuRR0N70QxGHjMcgOg6A&usqp=CAU"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름</h5>
<p class="card-text">내용블라블라</p>
<button type="button" class="btn btn-outline-dark">수정</button>
<button type="button" class="btn btn-dark">삭제</button>
</div>
</div>
</div> `
$('#cards-box').append(temp_html)
}
function del() {
$('#co1').empty()
}
</script>
<body link="#ff0000" alink="#00ff00" vlink="#0000ff">
<div class="container1">
<div class="item1">
<h1>팀 소개 페이지</h1>
팀 소개 블라블라<br>
1.우리팀만의 특징과 추구하는 궁극적인 목표<br>
2.우리팀의 약속<br>
3.연비가 좋다<br><br><br>
팀장 : 이태은<br>
팀원 : 이현재, 조지현, 정진엽
</div>
<div class="item2">
</div>
</div>
<br>
<div id="cards-box" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col" id="co1">
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFVM0f5Lnx8tlxe9HuRR0N70QxGHjMcgOg6A&usqp=CAU"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름1</h5>
<p class="card-text">내용블라블라</p>
<button type="button" class="btn btn-outline-dark">수정</button>
<button type="button" class="btn btn-dark" onclick="del()">삭제</button>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFVM0f5Lnx8tlxe9HuRR0N70QxGHjMcgOg6A&usqp=CAU"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름2</h5>
<p class="card-text">내용블라블라</p>
<button type="button" class="btn btn-outline-dark">수정</button>
<button type="button" class="btn btn-dark" onclick="delete()">삭제</button>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFVM0f5Lnx8tlxe9HuRR0N70QxGHjMcgOg6A&usqp=CAU"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름3</h5>
<p class="card-text">내용블라블라</p>
<button type="button" class="btn btn-outline-dark">수정</button>
<button type="button" class="btn btn-dark" onclick="del()">삭제</button>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFVM0f5Lnx8tlxe9HuRR0N70QxGHjMcgOg6A&usqp=CAU"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">이름4</h5>
<p class="card-text">내용블라블라</p>
<button type="button" class="btn btn-outline-dark">수정</button>
<button type="button" class="btn btn-dark" onclick="del()">삭제</button>
</div>
</div>
</div>
</div>
<br><br>
<button type="button" class="btn btn-outline-secondary" onclick="plus()">팀원 추가하기</button>
<br><br>
<div class="footer">copyright 2022. team_auid All rights Reserved.</div>
</body>
</html>
I love pocachip.