🌊고민 풀장🌊
1️⃣ 온도계의 위치가 고민이였다.
이미지 자체를 왼쪽에 두자니 전체적으로 모양새가 깨지는 느낌이였다. 이미지 사이즈도 너무 큰건 알겠는데 얼마나 줄여야 할지 감도 안왔다.
생각하다가 사이즈를 확 줄여버리고 header밑에 넣었다. 존재감도 덜 하면서 보기 쉬운 위치를 찾은 것 같아 마음에 들었다.
2️⃣ 사이즈가 안 맞다 싶으면 header에 세로 스크롤바가 생겼다. 이 부분은 overflow: hidden으로 지정된 요소 밖을 벗어나는건 잘리게 해버렸다.
.header-wrapper {
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-left: calc(-50vw + 50%);
overflow: hidden;
}
.header {
width: 100%;
height: 100px;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.header-content {
width: 100%;
max-width: 1200px;
min-width: auto;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
box-sizing: border-box;
overflow: hidden;
}
3️⃣ ejs파일에 header를 include할때 어디에 위치한지에 따라 header가 index-container-wrap의 영향을 안 받는지 잘 확인했다.
<body>
<div class="header-full-width"><%- include('./include/header') %></div>
<div class="index-container-wrap">
<div class="index-container">처음엔 header를 index-container-wrap안에 넣어놓곤 '왜 index-container-wrap이 header 위에 있지...?' 했었다🤦🏻♀️
페이지마다 header위치를 수정했다.
더보기
우선 대강 화면을 만들어 놓고 js코드를 짜자고 생각했었는데 생각보다 더 더 시간이 걸렸다.
조장으로써 팀원 의견 조율하는게 역시 어려웠다. 소통이 안되는 팀원과 소통을 하는것도 어려웠다... 분명 같은 이야기를 하고있는데 왜 전달이 되지 않는가🥲 프로젝트를 한국와서 처음 해보는데 역시나 프로젝트는 프로젝트다. 쉽지 않다.
'🌱SeSAC x CodingOn 웹 취업 부트캠프' 카테고리의 다른 글
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 11주차 (1): React (0) | 2025.01.07 |
|---|---|
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 10주차: 프로젝트 회고 (3) (0) | 2025.01.07 |
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 8주차: 프로젝트 회고 (1) (0) | 2025.01.06 |
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 7주차 (2): JWT, 비밀번호 암호화 (1) | 2025.01.05 |
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 7주차 (1): Cookie & Session (0) | 2025.01.04 |