2023.12.22 TIL

오늘은 어제에 이어 만들던 페이지를 마저 만들었다. 하지만 <ul>태그로 묶여있는 녀석들을 어떻게 옮겨야할지 도대체 답이 안나와서 고민 끝에 아예 다른 페이지를 만들었다.

내가 오늘 한 작업

1. 부트스트랩을 이용하여 헤더를 새롭게 달아 주었고 헤더의 첫부분의 컬러를 바꾸고, 위치를 오른쪽으로 옮겼다.
2. 사진에 border 속성과 box-shdow 속성을 사용하여 사진의 모서리 부분을 꾸며주었다.
3. 부트스트랩을 이용하여 박스를 넣어준 후, 사진을 삽입하고, 글씨 부분을 letter-spacing을 사용하여 글자 사이에 간격을 주었다.
4. 대문 사진과 박스 사이에 버튼을 삽입 후 토글 기능을 부여했다.
5. 부스스트랩을 이용하여 정보를 입력할 수 있는 박스를 넣어주었다.
6. 박스 아래의 버튼의 위치를 조정하였고 페이지를 완성하였다.

오늘 겪은 문제와 해결

1. 메인 페이지의 헤더 부분을 좌측으로 옮겨야하는데 옮기지 못하였다. 문제는 <div>에만 너무 정신이 팔려있어 태그 안에 margin 값을 넣어줬었는데 <div>태그가 구역을 설정하는 태그라는 것을 재인지하고 헤더의 <ul>태그 자체에 배경색을 설정하여 구역을 확인 후 margin-left를 사용하여 원하는 위치에 배치를 하는 것을 성공하였다.

2. 버튼에 토글 기능을 넣었는데 토글 기능의 반대로 작동 시키고 싶었다.
(아무것도 없는 상태에서 버튼을 누르면 짜잔~ 하고 나오게...) 
 할 줄도 모르는 <script>부분에서 영상과 구글링을 하면서 이것저것 시도해보았으나 당연히 실패했다..... 될리가 없지....
하지만 끝끝내 정답을 찾아냈다! 정답은 바로 

display: none;

이녀석이었다. 카드 부분을 <div>로 잡아준 후 display:none을 사용하니 카드는 사라지도 버튼만 덩그러니 있는 것이다. 설마 하고 눌러보았을 때 정말 허탈했다... 저 녀석 하나로 문제가 해결되어 버린 것이다...

처리 전의 모습

---

처리 후의 모습

display:none.... 정말 소중한 친구였다.... 이 친구는 잘 기억해 뒀다가 많이 써먹어야겠다!

오늘 완성한 두번째 페이지

어려움은 있었으나 큰 문제는 없었던 것 같다. 스스로 문제를 하나씩 찾아가면서 수정하면서 만들었다.... 나중에 또 까먹고 방황할 때 그때에 내 TIL에 추가를 해야겠다.

3. 오늘의 회고
 -  팀플편: 오늘도 참 다사다난하고 머리가 지끈지끈 아파오는 하루였다. 하지만 팀원들과 함께 작업을 하면서 작업내용도 공유하고, 질문도 하고, 화목한 분위기에서 작업을 했다. 소통이 잘되는 것 같아서 너무 즐겁게 오늘도 작업을 했다.
 하지만 원래 정해진 S.A를 벗어나서 고생해서 만들어주신 분께 너무 죄송할 따름이었다... 앞으로는 미리 상의를 하고 일을 해야겠다.

 - 작업편: 오늘 작업은 재미 60% 난감, 분노, 부정적인 etc 한 감정들이 40%였다. 무언가 한 가지 주제가 정해진 상태에서 작품을 만들어가는 데에 너무 즐겁고, 스스로 작업을 하면서 막히는 부분을 검색과 팀원 간의 소통으로 해결할 수 있었고 긴가민가 하지만 문제를 하나씩 해결해 나갈수록 뭔가 내가 성장하고 있는게 맞긴 하구나 싶은 느낌을 받은 하루였다. 너무 즐겁다.