카테고리 없음
AI 4일차 1주차 팀 프로젝트
rlarudals
2024. 6. 27. 20:32
오늘은 팀프로젝트를 발표하는 날이다.
조는 총 4개조, 우리조는 4조 이다.
(깜빡하고 저희 조 발표하는거 스크린샷을 못찍어서 죄송합니다.)
그렇게 발표를 마치고 우리팀은 추가적으로 자습을 진행하였다.
나는 자바스크립트에 대한 이해를 위해 자바스크립트를 위주로 공부를 하였다.
<!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">
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</head>
<body>
<!-- -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Blog</a>
<!-- 드톱다운 페이지 member 이름 누르면 자기소개 홈페이지로 가짐 -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Member
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="file:///C:/Users/%EA%B9%80%EA%B2%BD%EB%AF%BC/Desktop/%ED%8C%80%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/templates/team-members/member1.html">정성원님</a>
</li>
<li><a class="dropdown-item"
href="file:///C:/Users/%EA%B9%80%EA%B2%BD%EB%AF%BC/Desktop/%ED%8C%80%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/templates/team-members/member2.html">배민석님</a>
</li>
<li><a class="dropdown-item"
href="file:///C:/Users/%EA%B9%80%EA%B2%BD%EB%AF%BC/Desktop/%ED%8C%80%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/templates/team-members/member3.html">서재일님</a>
</li>
<li><a class="dropdown-item"
href="file:///C:/Users/%EA%B9%80%EA%B2%BD%EB%AF%BC/Desktop/%ED%8C%80%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/templates/team-members/member4.html">김경민B님</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
팀원 추가
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">추가</a></li>
</div>
<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 id="searchInput" class="form-control me-2" type="text" placeholder="Search" aria-label="Search">
<button onclick="searchTeamMember()" class="btn btn-outline-success" type="button" value = "button">Search</button>
</form>
</div>
</div>
</nav>
<div class="teamname">Four Idiots</div>
<!-- -->
<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_title">이번 과제의 목표</div>
<div class="goals">
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>
<!-- 코멘트 자바스크립트 javascri.js 파일에 있습니다 -->
<script src="javascri.js"></script>
</body>
</html>
어제와는 다르게 index.html 에 있는 자바스크립트 코드를 따로 자바스크립트 파일을 만들어서 거기에 넣었다.
자바스크립트의 양이 많아져 이런 선택을 했다.
그리고 어제 못한 드롭다운 기능을 구현을 완료했다.
어제 안되었던 이유는
<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">
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<head>에 부트스트랩 자바스크립트CDN 을 안 넣은게 패착이였다.
그래도 오늘은 구동하는데 성공했으니 기뻤다.
그리고 두번째로는 Search에 이름을 검색하면 검색한 사람의 자기소개페이지가 나오게 코드를 작성했다.
자바스크립트에 대해 아직도 이해가 안가는게 많아서 이거는 chatgpt의 힘을 빌려 만들었다.
오늘 하루도 열심히 했다고 생각한다.
느리지만 천천히 앞으로 간다는 느낌이 들었고 이 느낌을 살려 더 열심히 해야겠다.
오늘 발표 고생한 팀원들, 좋은 피드백해주신 튜터님들,매니저님들 고생하셨습니다.