여는 글
내일배움캠프(이하 '내배캠')에서 본캠프가 시작된 지 2일차이다. 이전에 한 달 정도 진행되었던 사전캠프는 하루에 4시간 정도였는데 본 캠프는 12시간이다. 점심저녁 빼도 10시간...후덜덜하다. 이틀밖에 안지났는데 벌써 컨디션 난조의 기운이 보임.
그래도 팀원들도 다들 친절하고 좋은 사람들 같아서 의욕은 난다. 언제나 사람을 가장 힘들게 하는 건 일이 어려워서가 아니라 사람때문인 경우가 많다. 그래서 지금은 아주 행복하다.
<오늘 노력한 흔적>
어제의 기록.
팀 프로젝트는 어제 시작했지만, 어제는 TIL를 작성하지 않았기에 어제의 기록 역시 조금 돌아보자.
우리에게 주어진 팀 프로젝트의 목표는 "팀 소개 페이지"를 만드는 것이었다.
그래도 팀 단위로 하는 작업이기에, 나 혼자 할 때처럼 디자인 만들어보다가 HTML 코드로 짜보다가 다시 레퍼런스 찾아보다가...처럼 주먹구구식으로 하고 싶지는 않았다.
팀 작업이 처음이라서 최대한 순서나 형식을 갖추고 진행하려고 노력했다.
-
주제 정하기
-
웹사이트 레퍼런스 찾아보기
레퍼런스는 디자인, 기능 등 개인의 기호 고려 -
조사한 자료를 바탕으로 주요 구현 기능과 컨셉을 초점화
-
초점화한 컨셉과 기능을 반영하여 디자인 스케치 구상.
위와 같은 순서로 진행했는데, 어제 진행 당시에는 6명의 조원 모두가 1단계부터 4단계까지 같은 과정을 함께 준비했다. 2명씩 3팀으로 쪼개어 준비했으면 더 효율적이었을 것 같지만 각 단계가 모두 그 전단계에 의존하는 부분이 있어서 조금 어렵지 않았을까 싶다.
오늘의 목표
오늘의 목표는 GITHUB 원격 레파지토리에 팀원들이 모두 접속하여 협업할 수 있는 환경을 만드는 것이 첫 번째이고, 팀원들과 디자인 시안을 확인하고 각자 역할을 분배해서 UI 작업에 착수하는 것이 두 번째였다.
제작해둔 디자인 시안을 다 같이 본 뒤에 어떤 스타일로 UI를 구성할지까지는 모두 정했는데, 사실 꽤 고민이 되었던 부분은 팀원들간의 역할 분배였다. 우리 디자인 컨셉은 단일 페이지 내에서 네비바 형태의 탭을 통해 여러 탭을 옮겨다니며 사용하는 구조라서 여러페이지를 나눠 작업하는 것은 어렵다고 생각했다.
그렇다고 난이도에 따라서 페이지 HTML 구조 작업 / CSS 스타일링 작업 / JS 동적 오브젝트 작업 등으로 나누기에는 팀원분들이 어느정도의 실력을 가지고 있는지 정확히 몰라서 내 임의대로 일을 분배하는 건 문제가 될 수 있을 것 같았다. 그래서 페이지에서 공유되는 영역, 모든 탭에서 공통적으로 적용되는 영역을 제외하고 팀원 각각을 소개하는 개인 페이지를 각자 만들기로 했다.
첫 번째 문제
첫 번째 문제는 TAB 영역의 구현이었다. 이 안에서도 두 가지로 문제가 나뉘었다.
첫 번째, TAB을 클릭했을 때 해당탭을 제외한 탭은 비활성화되고 해당 탭만 활성화되어야 한다는 것.
두 번째, TAB과 본 컨텐츠 영역의 접합부에 선 없이 이어져야 한다는 것.
(사실 두 번째가 더 빡셌다.)
첫 번째 문제는 자바스크립트를 통해 해결했다.
각각의 TAB은 nav-item이라는 class를 가진 li 태그로 감싸져있고, 클릭 영역은 nav-link라는 class를 가지고 있다.
let btns = document.querySelectorAll(".nav-link"); btns.forEach((selectedBtn) => { selectedBtn.addEventListener("click", (e) => { btns.forEach((btn) => { btn.classList.remove("active"); }); selectedBtn.classList.add("active"); }); });btns에 nav-link라는 class를 가진 태그를 모두 array의 형태로 저장.
array내의 요소들을 selectedBtn으로 받아서 event listener 등록.
만약 임의의 탭을 클릭하면,
btns 내의 btn들을 순회하면서 모든 TAB에서 active라는 class 속성을 제거하고 (어떤 TAB이 active class를 가지고 있는지 파악하는 것 보다, 모든 버튼에서 active class를 제거하는 것이 더 쉽기 때문)
방금 클릭된 버튼에 active 클래스를 추가하는 식으로 진행했다.
두 번째로 탭과 본 컨텐츠 사이의 접합부를 보이지 않게 처리하는 문제가 있었는데, 이건 좀 어려웠다.
우리가 원하는 탭의 모습
실제 탭의 꼬라지
???: 엥? 그거 그냥 TAB 밑에 border 지우면 되지 않음?
border-bottom: none; 하면 되잖아~
는 나도 처음에 그렇게 생각했음. 근데 그렇게 해도 그대로인 거임.
파란색 영역처럼 TAB에서 border-bottom: none;을 통해서 아랫쪽의 외곽선을 지워도, 본 컨텐츠에서 초록색 영역에 해당하는 부분만 지우는 것이 불가능하기 때문.
최소한 지금의 내 지식으로는 불가능했다.
처음에 생각한 방법은 div를 height 4px 정도로 얇게 만들어서 position: absolute; 등으로 띄우고 top:0 / right:0 등으로 붙여서 외곽선의 역할을 대신하게 하면 원하는 부분만 외곽선을 지울 수 있을 것 같다고 생각했는데, 탭을 바꿀 때마다 그걸 다 작업해야한다고 생각하면 비효율적인 것 같아서 기각했다.
첫 번째 생각의 구성.
응 절대 안해.
두 번째 생각의 구성.
왼쪽은 앞에서 본 모양, 오른쪽은 옆에서 본 모양이다.
이게 기본적인 탭의 구성인데, 각각의 탭 버튼은 border-bottom을 지울 수 있다. 다만 밑에 들어가는 본 컨텐츠는 외곽선을 모두 감싼 형태만 가능하다.
위와 같이 딱 붙였을 때 사이에 외곽선이 생기는 게 문제.
그래서 position: relative; 와 z-index를 활용하기로 함.
z-index를 통해 본 컨텐츠를 뒤로 밀어버리고
position: relative; 랑 top: 10px; 을 통해서 아래로 내려줌.
지금 보면 TAB의 오른쪽 외곽선이 본 컨텐츠 안으로 튀어나오는 것이 보이는데,
이렇게 옆에 다른 탭으로 덮어주면 안보이니까 괜찮다.
이외에도 다른 문제가 조금 있기는 했는데, 대부분 css 속성이나 구글링을 통해 해결 가능한 문제였다.
오늘 완성한 부분
그런 과정을 통해서 오늘 완성한 부분!
생각 정리
내일이나 내일 모레에는 팀원들간의 branch를 합쳐야 할텐데 초기 작업한 상태의 html파일을 보니 html과 css와 js가 모두 main.html 파일 안에 있는 상태이다.
모든 게 html 파일에 들어있는데 모든 팀원이 main.html로 같이 작업하고 있는 중이라서 내일은 팀원들과 html, css, js파일을 각각 분리하고 폴더별로 정리해서 충돌을 최소화하도록 조정해 볼 생각이다.
