AI웹 개발자 과정 공부 (팀스파르타)/프로젝트
24.04.02_TIL ( 팀 프로젝트 : 스파르타 게시판 ) _ 1. 프론트앤드/백앤드
티아(tia)
2024. 4. 2. 16:07
728x90
[ 첫번째 프로젝트 ]
스파르타 게시판을 만들어 보자.
* 팀 스로젝트로 팀과의 협업이 중요하다.
0. 기획하기
24.04.01_TIL (ChatGPT 웹종 팀 프로젝트) _ 0. 기획하기
[ 첫번째 프로젝트 ] 스파르타 게시판을 만들어 보자. * 팀 스로젝트로 팀과의 협업이 중요하다. 팀명 : 해리포터 팀 소개 : 해리포터를 좋아하는 사람들의 프로젝트 - 취미 : 코딩 프로젝트 프로
tia13.tistory.com
다음 단계인 백앤드 / 프론트앤드 코드 디자인을 해보자.
각 팀원들과 나누어 나와 채연님은 프론트앤드 / 준서님과 진원님은 백앤드를 맡아 진행하였다.
프론트앤드에서 채연님이 중요한 1페이지를 만들어주셔서 2페이지와 3페이지의 작업이 괜찮았다.
나는 2페이지를 작업하여 게시글을 눌렀을 때에 게시글 제목과 내용 및 댓글창이 뜰 수 있도록 만들었다.
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>게시글</title>
<style>
</style>
</head>
<link rel="stylesheet" type="text/css" href="style2.css">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<nav class="navbar border-bottom border-body justify-content-space-between " data-bs-theme="white">
<div class="ms-3 d-flex align-items-center">
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"
alt="">
<nav class="navbar navbar-expand-lg ">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">스파르타임</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="ms-auto">
<div class="menu">
<a class="nav-link"
href="file:///C:/Users/%EC%95%88%EC%B1%84%EC%97%B0/project_MessageBoard/index.html/board">게시판</a>
</div>
<div class="menu">
<a class="nav-link"
href="file:///C:/Users/%EC%95%88%EC%B1%84%EC%97%B0/project_MessageBoard/index.html/wrtiing">글쓰기</a>
</div>
</div>
</nav>
<div class="post">
<h2 class="post-title">게시글 제목 <div class="links"><a href="#" class="edit-link">수정</a> <a href="#" class="delete-link">삭제</a></div></h2>
<p class="post-content">
게시글 내용이 여기에 들어갑니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et lacus
vitae nisi posuere dapibus vel vitae est. Integer vitae mauris et quam ullamcorper sodales. Vestibulum
tempor purus nec consectetur fermentum. Etiam id turpis sed tortor molestie pellentesque. Proin auctor,
justo quis vehicula fermentum, elit leo tristique urna, nec tincidunt nunc eros sit amet orci. Cras
interdum fringilla vestibulum. Nullam quis velit ultricies, viverra dolor et, interdum nisl.
</p>
</div>
<div class="comment-container">
<!-- 댓글 폼 -->
<div class="comment-form">
<form action="#">
<textarea name="comment" id="comment" rows="3" placeholder="댓글을 입력하세요"></textarea>
<button type="submit">댓글 작성</button>
</form>
</div>
<ul class="comment-list">
<!-- 댓글 아이템 -->
<li class="comment-item">
<div class="comment-header">
<span class="comment-author">작성자</span>
<span class="comment-date">2024-04-01</span>
</div>
<div class="comment-content">
댓글 내용 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et lacus vitae nisi posuere
dapibus vel vitae est. Integer vitae mauris et quam ullamcorper sodales.
</div>
<div class="comment-actions">
<a href="#" class="edit-link">수정</a>
<a href="#" class="delete-link">삭제</a>
</div>
</li>
<!-- 다른 댓글 아이템들... -->
</ul>
</div>
</body>
</html>
css 스타일 2의 코드블럭과 스타일 1의 코드블럭이 같이 필요하다.(나중에 페이지를 합칠 때 합치는 작업이 중요하다)
.nav-link{
margin-top: 50px;
}
/* 게시글 스타일 */
.post {
padding: 20px;
margin-bottom: 50px;
max-width: 1200px; /* 박스크기 고정 */
margin: 0 auto; /* 박스를 가운데에서 오토로 고정*/
}
.post-title {
color: #333;
font-size: 35px;
margin-bottom: 50px;
display: flex;
margin-left: 200px; /* 왼쪽 여백 추가 */
justify-content: space-between; /* 수정, 삭제 링크 사이의 공간을 균일하게 배분 */
}
.post-content {
color: #666;
font-size: 18px;
line-height: 2;
margin-left: 200px; /* 왼쪽 여백 추가 */
margin-right: 200px; /* 오른쪽 여백 추가 */
}
/* 수정 링크 스타일 */
.post-title .edit-link{
color: #777;
font-size: 20px;
text-decoration: none;
margin-right: 35px; /* 링크 사이의 간격 조절 */
}
/* 삭제 링크 스타일 */
.post-title .delete-link {
color: #777;
font-size: 20px;
text-decoration: none;
margin-right: 200px; /* 맨 오른쪽에서 앞으로 당겨옴 */
}
.edit-link:hover,
.delete-link:hover {
color: #333;
}
/* 댓글 스타일 */
.comment-container {
border-top: 1px solid #eaeaea; /* 위에 선 추가 */
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.comment-list {
margin-top: 80px;
list-style: none;
padding: 0;
}
.comment-item {
border-bottom: 1px solid #eaeaea;
margin-bottom: 20px;
padding-bottom: 20px;
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.comment-author {
font-weight: bold;
}
.comment-date {
color: #666;
}
.comment-content {
margin-top: 10px;
color: #333;
}
.comment-actions {
margin-top: 20px;
}
.comment-actions a {
margin-right: 10px;
text-decoration: none;
color: #666;
font-size: 14px;
}
.comment-actions a:hover {
color: #333;
}
.comment-form textarea {
width: 100%;
margin-bottom: 10px;
resize: none;
}
.comment-form button {
background-color: rgb(233, 7, 7);
color: white;
padding: 10px 20px; /* 버튼 안쪽 여백 */
border: none; /* 주변 테두리 없음*/
cursor: pointer; /*포인터 손모양으로 변경*/
border-radius: 5px; /* 모서리 둥글게*/
font-size: 16px;
float: right; /* 오른쪽으로 정렬 */
}
.comment-form button:hover {
background-color: rgb(233, 7, 7);
}
이렇게 진행하고 Git, Github 로 진행하였다.
조원분들과 회의를 하면서 모르는 부분도 서로 알려주고 수정해가면서 할 수 있었다.
특히 깃이 어려웠는데ㅜㅜ 화면공유를 해가며 잘 알려주셨다.
튜터님들에게 자주 찾아가서 merge 와 push, pull 을 해가면서 수정을 거듭...ㅎㅎ
프론트앤드 회의를 마무리하고 백앤드 화이팅..!
반응형