0. 시작 전 목표
- 자기소개 페이지에 기능 추가 (QnA)
- 세부 디자인 통일
- 메인페이지 화면 수정
1.html&css 상세 수정
회의 내용
원래 진행하기로 했던 메인페이지 사원증 사진이 너무 작게보여
1열로 배열했던걸 2열로 바꿔주기로 했습니다
폰트같은 자잘자잘한 css 내용도 통일시켜주기로 했습니다
그리고 팀원분께서 보내주신 개인페이지에 들어갈 QnA 기능도 완성되어 받아오기로 했습니다 !
a.세부 디자인 통일
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
* {
font-family: "Nanum Pen Script", serif;
font-weight: 400;
font-style: normal;
}
</style>우선 메인페이지 폰트를 받아와 글씨체를 맞춰주었습니다
그리고 메인페이지를 이런식으로 디자인 해주셨기때문에
<div class="aboutMe">
<span>⭐ ABOUT ME</span>
</div>
<div class="text">
<p><img src="https://cdn-icons-png.flaticon.com/512/8068/8068016.png" alt="number 1 icon" width="30">
<span class="thick"> MBTI </span><span class="thin">INFJ</span>
</div>
<div class="text">
<p><img src="https://cdn-icons-png.flaticon.com/512/8068/8068072.png" alt="number 2 icon" width="30">
<span class="thick">생년월일 </span><span class="thin">2000.07.29</span>
</div>
<div class="text">
<p><img src="https://cdn-icons-png.flaticon.com/512/8068/8068126.png" alt="number 3 icon" width="30">
<span class="thick">전공 유무 </span><span class="thin">비전공</span>
</div>
<div class="text">
<p><img src="https://cdn-icons-png.flaticon.com/512/8068/8068185.png" alt="number 4 icon" width="30">
<span class="thick">블로그 </span><a href="https://velog.io/@w0729/posts" class="blogLink"
target="_blank">https://velog.io/@w0729/posts</a>
</div>
<div class="text">
<p><img src="https://cdn-icons-png.flaticon.com/512/8068/8068239.png" alt="number 5 icon" width="30">
<span class="thick">목표 </span><span class="thin">개발력 좋은 개발자가 되기</span>
</div>해당 이미지를 가져와 비슷한 느낌을 줄 수 있도록 수정해줬습니다
요렇게하면 메인페이지와 비슷한 느낌을 줄 수 있는 페이지가 완성됩니다
b. QnA 기능 추가
해당 기능은 구현을 맡으신 팀원께서 코드를 보내주셨습니다
우선 QnA를 제 화면에 붙혀줬습니다
해당 기능을 넣어주면 쨔쟌
개인 페이지에 QnA 기능이 들어갔습니다
여기에 디자인에 통일성을 줄 수 있게끔 css를 추가해줍니다
폰트에 각각 thick thin 클래스를 할당해줘서 글씨체를 맞춰주었고
<style>
.form-container {
width: 80%;
padding: 10px;
margin: 10px 0 0 170px;
border-radius: 5px;
border: 0.5px solid #FFC0CB;
}
</style>해당 기능을 추가해 QnA를 상자처럼 묶어주어 보기 편안하게 수정해줬습니다
c. 메인페이지 화면 수정
우선적으로 문제가 있었던건 메인페이지에 들어가는 사원증 사진의 크기가 너무 작아 잘 보이지 않는다는 점이었습니다
이를 해결하기 위해 회의를 해본 결과 1 x 4 툴로 진행하기에는 무리가 있는듯 싶어
화면 구성을 2 x 2로 변경해주기로 했습니당
팀원분께서 보내주신 코드인데 2 x 2로 만들어주셔서 크기 조절만 해주면 되겠다 싶었는데
크기를 조절하고 위치 조정을 해주려는데 margin 값에 변경을 줘도 위치가 그대로길래 확인해보니
왜인지 해당 사진의 오른쪽 여백이 너무 많이 차지하고 있다 ..
정확한 이유는 알지 못했지만
개인적인 생각으로 부트스트랩에서 가져온 1x4 오픈코드를 2x2로 수정하려해서 그런가 ? 라는 생각이 들었습니다
<div class="q1">
<div class="background">
<div class="sub_box" id="clickimage2">
<img src="https://teamsparta.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F83c75a39-3aba-4ba4-a792-7aefe4b07895%2F0d5174cf-b043-41d6-b407-06fc17a82257%2FKakaoTalk_Photo_2025-01-17-16-45-33.jpeg?table=block&id=546419e6-f3d6-493d-8ec1-b052af7aa58c&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=1390&userId=&cache=v2"
alt="Foreground Image" class="foreground-image">
<div class="sub_text">
<p class="title">팀원</p>
<p class="name">김채원</p>
</div>
</div>
</div>
</div>묶여있던 코드를 div로 다시 하나씩 묶어 따로따로 관리되게끔 해줬습니다
이후에 다시 margin을 통해 위치를 조정해주니
빠밤하고 마음에 드는 배치가 되었습니다
위에 코드처럼 본 내용에는 사진을 넣어주었지만
다른 팀원들이 불쾌해할 수 있으니 배치 사진에선 얼굴을 잠깐 뺐습니다
<style>
.background {
width: 600px;
height: 500px;
background-image: url('https://img.freepik.com/premium-vector/identity-card-illustration_1297-417.jpg?w=360');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
position: relative;
}
.foreground-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -56%);
width: 195px;
height: 173px;
border-radius: 5%;
}
</style>코드는 이번에 배운 position: relative absolute 바로 써주기
공부하면서 가장 뿌듯한 순간은 바로 이럴때
2.마무리
하루회고
개인적으로 정말 뿌듯한 하루였다. 예전에 누군가 나한테 '충분히 도움주고 충분히 도움받자'라는 이야기를 해준적이 있다. 정말 그 말마따나 도울 수 있는 것이라면 충분히 돕고 도움받을 수 있는 것이라면 충분히 도움받는 것의 에너지를 느끼는 이번주다. 프로젝트 종료까지 몇 일 안남았지만 남은 기간도 서로 의지하며 으쌰으쌰 재밌게 진행했으면 좋겠다
다음 할 일
- 발표 전 최종 수정하기
- git에 업로드하기
- 발표자료 만들기
완성본이 궁금하다면 ?
여기로 가시면 됩니다 ~~
