팀원 소개 페이지 만들기 1일차
와이어 프레임
따로 입출력 기능이 없기 때문에 get,post 구현이 당장은 필요가 없어 각자 메인 페이지를 만들고 비교해보기로 했다.
구현할 것
기본 틀, 버튼 클릭 시 다른 팀원들의 소개로 바꾸는 슬라이드 기능
슬라이드 기능을 부트스트랩에서 가져옴
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
가시성 및 편의를 위한 기본 css코드 추가
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.logo {
margin: 20px;
width: auto;
height: 100px;
color: black;
font-size: 40px;
font-weight: bold;
font-family: 'Gowun Dodum', sans-serif;
text-decoration: none;
}
.team-desc {
font-family: 'Gowun Dodum', sans-serif;
font-size: 40px;
text-decoration: none;
width: auto;
height: 200px;
padding: 30px;
}
.carousel {
width: 800px;
height: 400px;
margin: auto;
}
.carousel-inner {
height: 400px;
}
.img-thumbnail {
width: 400px;
height: 400px;
}
.private-desc {
font-size: 40px;
padding: 20px;
background-color: #c0f8d7; # 가시성을 위해 색 추가
width: 50%;
height: 400px;
}
</style>
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000"> <!--자동으로 넘어가는 시간 추가-->
<div class="d-flex align-items-center"> <!--가운데 정렬을 위해 스타일 추가-->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail"> <!--원활한 이미지 크기 수정을 위해 img-thumbnail로 변경-->
<div class="private-desc">이름 : 김희열<br>mbti : ISTJ<br>나이 : 24</div>
</div>
</div>
<div class="carousel-item active" data-bs-interval="10000"> <!--팀원 5명을 보이기 위해 5회 반복-->
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 고은비<br>mbti : ISTJ<br>나이 : 24</div>
</div>
</div>
<div class="carousel-item active" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 한지훈<br>mbti : ESTJ<br>나이 : 24</div>
</div>
</div>
<div class="carousel-item active" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 송어진<br>mbti : ENTJ<br>나이 : 24</div>
</div>
</div>
<div class="carousel-item active" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 송이삭<br>mbti : INTP<br>나이 : 24</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
완성코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>올T</title>
<!--bootstarp-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.logo {
margin: 20px;
width: auto;
height: 100px;
color: black;
font-size: 40px;
font-weight: bold;
font-family: 'Gowun Dodum', sans-serif;
text-decoration: none;
}
.team-desc {
font-family: 'Gowun Dodum', sans-serif;
font-size: 40px;
text-decoration: none;
width: auto;
height: 200px;
padding: 30px;
}
.carousel {
width: 800px;
height: 400px;
margin: auto;
}
.carousel-inner {
height: 400px;
}
.img-thumbnail {
width: 400px;
height: 400px;
}
.private-desc {
font-size: 40px;
padding: 20px;
background-color: #c0f8d7;
width: 50%;
height: 400px;
}
</style>
</head>
<body>
<div class="logo">올T</div>
<div class="team-desc">팀 소개 : 모두의 mbti에 t가 있다</div>
<!--Autoplaying carousels-->
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 김희열<br>mbti : ISTJ<br>나이 : 24</div>
</div>
</div>
<div class="carousel-item active" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 고은비<br>mbti : ISTJ<br>나이 : 24</div>
</div>
</div>
<div class="carousel-item active" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 한지훈<br>mbti : ESTJ<br>나이 : 24</div>
</div>
</div>
<div class="carousel-item active" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 송어진<br>mbti : ENTJ<br>나이 : 24</div>
</div>
</div>
<div class="carousel-item active" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 송이삭<br>mbti : INTP<br>나이 : 24</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
새로고침시 슬라이드 기능이 제대로 작동하지 않아 carousel-item에서 active를 하나로 줄였더니 정상 작동했다.
그리고 각 팀원의 정보를 업데이트했다.
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 김희열<br>mbti : ISTJ<br>장점 : 사람들의 필요와 요구에 따라 자신을 맞출 수 있습니다.<br>자신의 스타일 : 다른 사람이 원하지 않는다면 리더의 자리를 맡고, 잘못한 건 피드백 수용<br>블로그 주소 : https://ogig0818.tistory.com/</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 고은비<br>mbti : ISTJ<br>장점 : 고집이 세지 않고 다른 사람의 의견수용을 우선시합니다.<br>자신의 스타일 : 민폐는 되지 않기 위해 1인분 이상은 하자. 팀플은 세분화된 계획을 차근차근 진행하는 것을 선호<br>블로그 주소 : https://ggomcoding.tistory.com/</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 한지훈<br>mbti : ESTJ<br>장점 : 나이가 깡패다.<br>자신의 스타일 : 작업은 깔끔하고 보기 좋게 구성하는 것을 좋아합니다. 협업은 서로 좋은게 좋은것이라는 마인드<br>블로그 주소 : https://ggomcoding.tistory.com/</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 송어진<br>mbti : ENTJ<br>장점 : 대화 가능한 사람이다. 힘든 일을 즐길 줄 안다.<br>자신의 스타일 : 팀플에 언제나 진심인 !열!쪙! 토론형 스타일<br>노션 주소 : https://lapis-holly-92a.notion.site/PROGRAMMING-7069dd8d9cff42a9bfa713aceb634adc 블로그 주소 : https://meitner.tistory.com/</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="10000">
<div class="d-flex align-items-center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLhitiwa91IGPgyJ9164vI7LGbq4TPUckthg&usqp=CAU" class="img-thumbnail">
<div class="private-desc">이름 : 송이삭<br>mbti : INTP<br>장점 : 화가 안남, 목표한 바가 있으면 집중력이 높음.<br>자신의 스타일 : 원하는 바가 있으면 주장하는 편이나 방향이 같은 팀원들의 좋은 의견이 있다면 그에 따라감<br>블로그 주소 : https://sisaac.tistory.com/</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>