블로그 만들어놓고 안 쓰게 될 줄 알았다.
하지만 오늘 새삼 느꼈다. 나는 참 기억력이 좋지 않구나 ㅋㅋㅋㅋㅋ.
우선 평소에도 꼼꼼한편은 아니기도 했으며 어제 알았던 것을 내일 새로 배워야 될 수도 있겠다는 생각이 들었다, 이는 곧 일의 효율을 중요시 생각하는 내가 다시 티스토리에 접속하게 만들었고 글을 남기게 되었다.
오늘 지원했던 국비지원 부트캠프에 떨어지기도 했고 앞으로 나의 자기 주도적 학습을 어떻게 해야 되는지 생각하느라 실제로 배운 내용은 거의 없었고 내가 이틀 전에 약 3일 정도 걸려서 완성했던 programmmers.com 클론 코딩을 다시 복기해봤다.
해결 못했던 문제가 있었는데 그것은 바로 아래사진이다.
겉으로 보기엔 아무 문제가 없어 보이지만 강의 가격 중에 파란색 가격의 위치가 오른쪽 하단에 있어야 했지만 내가 아는 모든 정렬법을 해도 오른쪽을 가지 않았다.
사실 웹을 나 스스로 만들어본 것은 두 번째였고 첫 번째 만든 웹 또한 비교적 간단한 정적인 웹사이트라 이런 문제가 발생하지 않았다.
하지만 내가 처음 만들었던 웹에 비해서 많이 복잡한 programmers.com에서 결국 이러한 문제가 발생하였고 가장 큰 원인은 부모 요소에서 실행이 가능한 justify-content를 계속 자식 요소에서 했던 문제였다.
이걸 찾아내는데 시간 겁나 잡아먹어서 해결 못했고 친구에게 자문을 구해서 풀었지만 찝찝해서 나만의 방법으로 해보자라는 생각에 mdn에 들어가서 새로 flexbox를 새로 공부했고 그중에서 flex-grow가 눈에 띄었다.
flex-grow의 기능은 아래 사진처럼 부모 요소에서 할당받은 공간을 자식 요소가 다 사용하지 못했을 때 여백이 생기는 것이었고 그 여백은 아래 사진과 같다.
저 사진은 수정이 된 거라 그렇지만 원래 패밀리사이트를 링크하는 저 버튼이 있는 부분이 보라색 여백이었고 버튼이 보라색 부분에 배치되어 붙어있었고 저 여백을 버튼이 있는 div박스로 채운 후 그 안에 내용을 오른쪽 정렬하면 될 것 같다는 생각이 들었고 실제로 동작하였다. 하지만 나중에 저 사이에 공간에 어떤 내용이 더 채워진다면 구조를 새로 설정해야 하니 친구의 도움을 받았던 부모 요소에서
justify-content : space-between 방법이 더 좋겠다는 생각을 했다.
저 버튼도 원래는 select함수로 구현을 했었고 매우 조잡했었다, 근데 오늘 웹사이트를 완벽하게 만들어야겠다는 생각에 새로 만들었고 구글에서 어떻게 만드는지 찾아보고 코드를 분석했다. 너무 어렵게 생각했었다. 그냥 두 개의 디브박스가 있고 평소엔 보이지 않다가 클릭했을 때 아래처럼 보이게 만들면 됐었다.
html과 css로 생긴 것은 구현을 했고 함수 부분을 보니 if로 작성된 함수였었다. 물론 그대로 써도 됐지만 그러면 그냥 코드 가져다 베끼는 코드 몽키가 될 거라는 생각에 유튜버 드림 코딩 엘리님의 responsive 한 웹 작동법에서 썼던 함수가 생각났고 그것을 토대로 나만의 새로운 로직을 작성했다.
별거 아니지만 이 모든 것을 내가새로 리워크 했고 되게 뿌듯했다. 그리고 오늘 했던 것들을 까먹지 않기 위해, 혹은 나 같은 문제로 고민하고 있을 법한 사람들에게 도움이 되었으면 좋겠다.