👩🏫 오늘의 출석
❓두 번째, 9 to 9을 해 본 소감❓
오늘도 어제에 이어서 팀 프로젝트를 진행하는 시간을 가졌다. 어제는 전반적인 프로젝트의 틀을 잡는 것에 초점이 맞춰져 있었다면 오늘은 어제 각자가 맡은 파트를 구현하는 것에 초점을 맞춰 진행했다. 내가 맡게 된 파트는 가장 첫 번째에 보이는 파트로, 6개의 원형 이미지를 어떻게 별 모양으로 예쁘게 배치할지가 오늘의 KYE-POINT였다. 시작하기 전의 걱정은 저 이미지들을 내가 잘 배치할 수 있을까 걱정이 되었는데 막상 시작을 하고 보니 그렇게 오래 걸리거나, 크게 어렵지는 않아서 재미있게 시간을 보낸 것 같다. 틈틈이 팀원들과 진행 상황을 공유하고 마지막에는 다 함께 git&github 사용법을 가지고 이야기하느라 퇴실 시간이 지난 지도 모르고 20분 넘게 이야기를 하며 시간을 보냈다. 역시 혼자서 하는 것보다는 여러 명이서 함께 하게 되면 서로 모른 부분들을 알려주기도 하고, 피드백도 주고받으며 시간을 보낼 수 있어 그 부분은 팀 프로젝트의 확실한 장점이라고 생각한다.
📑오늘 학습한 내용
9시부터 1시까지는 개인 파트 코드를 작성하는 시간을 보냈다.
1. 가장 아래에 들어갈 푸터 코드를 작성하였다. 코드는 지난 사전 캠프 때 만들었던 코드를 가져와 몇 가지만 수정하여 완성하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>footer</title>
<style>
.footer {
background-color: #282828;
padding: 40px;
text-align: left;
color: white;
}
.footer span {
display: block;
margin-bottom: 10px;
}
.footer a {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="footer">
<span style="font-size: larger; font-weight: bold"
> Copyright @2024 SixSense. All rights reserved</span
><br />
<span>소속 : 내일배움캠프 spring 트랙 B6조 </span>
<span>팀 멤버 :이--,김--, 이--, 김--, 김-- </span>
<span>이메일 : SixthSense6@gmail.com </span>
</div>
</body>
</html>
푸터 완성 이미지
- 가장 처음에는 원 도형 6개를 가지고 가장 위의 컬럼에 원 1개, 그 아래에 3개의 원, 마지막에는 3개의 원 사이에 2개의 원을 배치하는 코드를 먼저 작성하였다.
- 이후 원에 내가 준비해둔 6개의 이미지를 원 대신에 집어넣어서 코드를 수정하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>6TINGLE Web Page</title>
<style>
html {
scroll-behavior: smooth;
}
.background-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;
opacity: 0.7;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.circle-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 150px;
}
.circle-row {
display: flex;
justify-content: center;
}
.circle {
margin: 50px;
}
.project-logo {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: auto;
}
.footer {
background-color: #282828;
padding: 40px;
text-align: left;
color: white;
width: 100%;
}
.footer span {
display: block;
margin-bottom: 10px;
}
.footer a {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body> <!--이미지 경로는 내 컴퓨터에 지정된 경로이기 때문에 아래에서는 임의로 지정해둠-->
<img
class="background-image"
src="배경.png"
alt="Background Image"
/>
<img
class="project-logo"
src="projectlogo.png"
alt="Project Logo"
/>
<div class="content">
<div class="circle-container">
<div class="circle">
<a href="#section2"> <!--타겟으로 이동-->
<img
src="Image 1.png"
alt="Image 1"
width="200"
height="200"
/>
</a>
</div>
<div class="circle-row">
<div class="circle">
<img
src="Image 2.png"
alt="Image 2"
width="200"
height="200"
/>
</div>
<div class="circle">
<img
src="logo.png"
alt="Image 3"
width="200"
height="200"
/>
</div>
<div class="circle">
<img
src="Image 4.png"
alt="Image 4"
width="200"
height="200"
/>
</div>
</div>
<div class="circle-row">
<div class="circle">
<img
src="Image 5.png"
alt="Image 5"
width="200"
height="200"
/>
</div>
<div class="circle">
<img
src="Image 6.png"
alt="Image 6"
width="200"
height="200"
/>
</div>
</div>
</div>
</div>
<div id="section2"> <!-- 여기에 팀, 팀원 소개 아이디 지정하기-->
<div class="footer">
<!--푸터 코드-->
</div>
</body>
</html>3-1. 위의 코드는 6개의 이미지가 모두 같은 크기일 때의 코드이기 때문에 웹 프레임워크처럼 가운에의 팀명 로고만 크게 보이도록 코드를 수정해야 함.
🚨해결해야 하는 문제 : 로고 이미지를 키우면 로고 양옆의 사진의 위치를 새로 배치해야 함.🚨
<!--첫 번째 / 두 번째 시도-->
.circle:nth-child(1) img,
.circle:nth-child(3) img {
margin-top: 100px;
}일단은 로고 이미지의 양 옆에 있는 이미지들에 margin-top, padding-top을 지정해서 이미지 위의 공백을 만들어 주려고 생각을 하고 시도를 했다. 그렇게 여러 실패를 하다 알게 된 nth-child(n)를 사용해서 문제를 해결해보려고 했으나 실패했다. 마냥 낯설지는 않은 게 예전에 배웠었던 것 같은데 기억이 잘 나지 않아 열심히 찾아보았으나 nth-child(n)을 사용해서 하는 방식은 내가 요소 선택을 제대로 할 수가 없어서 이 방법은 5차례의 시도 끝에 과감히 포기했다. 그리고 튜터님을 찾아갔다.
🗝️여기서 잠깐! "nth-child(n)란?"
:nth-child(odd)는 모든 홀수 번호 요소 선택
:nth-child(even)는 모든 짝수 번호 요소 선택
:nth-child(3)는 세 번째 자식 요소 선택
:nth-child(2n)는 모든 두 번째 자식 요소 선택
<!--튜터님께 도움을 받아 완성한 코드-->
<style>
.circle {
margin: 50px;
display: flex; /* 이미지들을 수평으로 정렬하기 위해 추가 */
align-items: center; /* 이미지들의 세로 중심을 맞추기 위해 추가 */
justify-content: center; /* 이미지들의 가로 중심을 맞추기 위해 추가 */
}
</style>
<body>
<div class="circle">
<img
src="logo.png"
alt="Image 3"
width="300"
height="300"
/>
</div>
</body>❗왜 저 간단한 건 그렇게 어렵게 돌아간 건지.. 어려울 거라고 어제부터 팀원들과 얘기하고 다른 튜터님께도 시간이 조금 필요할 수도 있다는 피드백을 받고 나서 계속 걱정하던 부분이어서 당연히 어려울 거라 생각했던 것 같다. 그래서 튜터님께서 알려주신 코드를 받고서는 부끄러울 지경이었다. 왜 저렇게 간단하게 할 수 있는 걸 빙빙 돌아가려 했는지.. 부족한 나는 오늘도 이렇게 배워나간다😉
2시부터 2시 30분까지는 TIL 작성법 실시간 강의들 들었다.
📒TIL 블로그 작성 이유
신입이 가장 빠르게 경험과 실력을 증명하는 법이기 때문. (+성실성도 보여줄 수 있음)
→ TIL 작성법에는 완벽, 정답은 없다.
→ 오늘 배우고 느낀 것을 작성하면 된다.
1. 초기에는 강의 내용을 정리하며 블로그를 꾸준히 쓴다는 것에 의의를 둘 것
2. 개발 단계 정리, 하루 회고, 문제 해결 과정을 블로그에 작성하면 좋다.
❗VELOG를 사용해서 글을 작성할 때면 어떻게 작성을 하고 구성을 하는 것을 좋은지 너무 고민이 된다. 특히 어제부터 본 캠프를 시작하고서 어떻게 효과적이고 깔끔하게 나의 블로그를 구성하고 작성할 수 있을지 많은 고민과 생각들이 들었다. 다른 사람들이 적은 블로그들을 여러 개 찾아보고 참고하는 것이 지금의 나에게는 가장 좋은 방식이 될 것이라고 생각이 되었다. 오늘은 강의를 들었으니 내일부터는 아마 여러 사람들의 블로그를 찾아보며 나도 나만의 개성과 노력한 시간들을 잘 보여줄 수 있도록 노력해야겠다.
2시 30분부터 6시까지는 또다시 각자 코드 작성과 수정 및 GITHUB에 PUSH 하는 시간을 가졌다.
→ 변경사항 : 배경 이미지를 색상으로 지정하기로 함.
7시부터 9시 20분까지는 팀원들과 함께 서로의 코드를 index.html 파일로 합치고, GIT을 이용하여 GITHUB에 PUSH 하고 배포하는 등의 작업을 진행했다.
→ git clone (git url) . / {github에 올라와있는 코드 가져오기}
→ git pull origin (브랜치명) / {수정된 파일 받아오기}
→ git remove remote origin (브랜치명) / {브랜치 연결 끊기}
→ git checkout -b (브랜치명) / {새로운 브랜치로 이동}
→ git checkout (브랜치명) / {기존에 있던 다른 브랜치로 이동}
