오늘은 어제 미처 다 못끝낸 팀 프로젝트를 진행했다.
그리고 다 드디어 다 완성된 과제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>우리 팀 멤버들</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<!-- -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
</div>
</li>
</ul>
</li>
<li class="nav-item">
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- -->
<main>
<div class="card" style="width: 18rem;">
<div class="card-body">
<img src="https://ca.slack-edge.com/T06B9PCLY1E-U078S7Z9U9W-e1cfe09eb194-512" width=286px, height=128px
class="card-img-top" alt="...">
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">이름: 정성원님</li>
</ul>
<div class="card-body">
<p><a href="team-members/member1.html" class="card-link">자기소개 페이지</a></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<img src="https://ca.slack-edge.com/T06B9PCLY1E-U0773J9BU3Z-3e392d86b08c-512" width=286px, height=128px
class="card-img-top" alt="...">
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">이름: 배민석님 </li>
</ul>
<div class="card-body">
<p><a href="team-members/member2.html" class="card-link">자기소개 페이지</a></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<img src="https://ca.slack-edge.com/T06B9PCLY1E-U071G5R4NQ2-3dd8a1213719-512" width=286px, height=128px
class="card-img-top" alt="...">
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">이름: 서재일님 </li>
</ul>
<div class="card-body">
<p><a href="team-members/member3.html" class="card-link">자기소개 페이지</a></p>
</div>
</div>
<!-- 멤버.html 파일 만들었습니다. 그리고 페이지는 각자 수정하는걸로 하고 인덱스 컨텐츠 정렬등 다음작업으로 갑시다 -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<!-- 각자 사진넣기 -->
<img src="https://ca.slack-edge.com/T06B9PCLY1E-U0770GCR9U2-0234f2e6baa4-512" width=286px, height=128px
class="card-img-top" alt="...">
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">이름: 김경민B님 </li>
</ul>
<div class="card-body">
<p><a href="team-members/member4.html" class="card-link">자기소개 페이지</a></p>
</div>
</div>
<p>
</main>
<ul> <!-- 다른 팀원들도 동일한 방식으로 추가 -->
<div class="goals">
<br>
이번 과제의 목표<br><br>
1. 친해지기<br>
2. 협업을 이해 하기<br>
3. 기초 다지기
</div>
<section id="commentsSection">
<div class="comment_title">코멘트 작성</div>
<div class="mb-3">
<textarea class="comment_box" id="commentInput" rows="3" placeholder="여기에 코멘트를 입력하세요."></textarea>
</div>
<button class="btn btn-primary" onclick="addComment()">작성</button>
<div class="list-area mt-4" id="commentsContainer">
<!-- 작성한 코멘트가 입력될 공간 -->
</div>
</section>
</ul>
</p>
<footer>
<p>© 2024 우리 팀</p>
</footer>
<script>
function addComment() {
let commentInput = document.getElementById('commentInput');
let commentsContainer = document.getElementById('commentsContainer');
if (commentInput.value.trim() === '') {
alert('코멘트를 입력하세요.');
return;
}
let newComment = document.createElement('div');
newComment.classList.add('comment', 'mt-2');
newComment.innerHTML = `<div class="comment-body">${commentInput.value}</div>`;
commentsContainer.appendChild(newComment);
commentInput.value = '';
}
</script>
</body>
</html>
/* 전체 body 스타일 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
.navbar {
display: flex;
font-weight: bold;
}
.nav-link{
color: black;
font-weight: bold;
}
.d-flex{
display: flex;
justify-content: center;
}
.nav-items{
display: flex;
align-items: flex-end;
}
/* header 스타일 */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
}
.teamname{
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 10vh;
margin-bottom: 0;
height: 10vh;
}
/* main 요소 스타일 */
main {
padding: 1em;
display: flex;
align-items: center;
min-height: 50vh;
margin-bottom: 0;
margin-top: 1px;
padding-top: 1px;
justify-content: center;
}
/* 팀원 목록 스타일 */
.team-members {
display: flex;
grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
justify-content: center;
gap: 30px;
}
/* 각 팀원 카드 스타일 */
.member {
border: 1px solid #ccc;
padding: 1em;
text-align: center;
}
.member img {
max-width: 100%;
border-radius: 50%;
}
.mamber{
display: flex;
justify-content: center
}
.card {
display: flex;
margin: 1px;
align-items: center;
}
.reply-form__info{
display: flex;
justify-content: center;
}
.reply-form-textarea-wrapper{
display: flex;
justify-content: center;
}
.reply-form__submit-button-wrapper{
display: flex;
align-items: 0;
}
/* 목표단락 */
.goals{
display: flex;
justify-content: center;
네얼간이가 만든 블로그이다.
어떻게 보면 되게 조잡하고 단순한 블로그 같지만 이 블로그 속엔 네얼간이 팀의 노력과 정성이 들어있는 최고의 블로그이다. 다음에는 실력을 더 키워서 팀원들과 더 좋은 작품을 만들도록 해야겠다.