8.11 토이프로젝트

고장난 데이터베이스

계속 집에서 하다가 오랜만에 카페에 가서 노트북을 켰는데 몽고DB가 먹통이었다.
또 다시 구글링이 시작됐고 해결책을 찾게 되었다.

몽고db 연결문제 참고
처음엔 인터넷 선을 쓰다가 집 밖에서 와이파이를 쓰면서 이렇게 된건가 했다.
잘 되던게 나가면서 작동을 안하니.. 위 생각이 제일 먼저 들었다.
우연인지 모르겠으나 해결이 되어 다행..

flex와 grid

지금 담당하고 있는 것이 페이지뷰 부분이라 css 공부를 하고있다.
게임으로 배우는 flex
게임을 통해 display: flex를 익혔지만 원하는 모양새가 나오지 않았다.

이 모양새에서 박스가 3개가 아닌 경우에도 위와 같은 배열이 되길 원했는데 flex로는 안됐다.
배열이 같은 위치에 있더라도 계속 오른쪽 부분에 빈 공간이 생겼다.
이걸 margin값을 일일이 계산하면서 하자니 콘솔창을 열어서 확인했을 때 보이는
그 실틈 수준의 보라색 빗금이 계속 신경쓰였다.

그래서 일전에 1분코딩 사이트에서 봤던 저 반듯한 grid 컨테이너 그림을 떠올렸고
grid를 써보자 생각을 하게 됐다.

하지만 역시 grid에 대해 1도 몰랐던 상태였기에
게임으로 배우는 grid를 한 번 돌리고 속성으로 익혔다.

이제 익힌걸 사용하고자 무얼 써야할까 생각해보니
칼 같은 3등분을 원했던 나에게 필요한 값은 grid-templates-columns: 1fr 1fr 1fr;이었다.

grid 에서 fr (fraction : 분수)
grid-templates-columns: 1fr 1fr 1fr; >> 균일하게 3등분
1fr 1fr 1fr 1fr; >> 균일하게 4등분
1fr 1fr 1fr 1fr 1fr; >> 균일하게 5등분
여기서 유추할 수 있는 것은 속성값(1fr)의 개수는 등분의 개수를 의미한다.
grid-templates-rows에서도 동일하게 적용이 가능하다!

결과가 너무 성공적이었다. ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

기쁨도 잠시

하지만 끝날 때까지 끝난게 아니다~
노란 동그라미 부분의 부모태그에 padding값을 줬더니 아이콘도 영향을 받아 타원형 모양으로 줄어들었다. 이거 또 거슬려서 못 참지

flex와 grid를 사용해봤지만 계속 제자리 걸음이었다.
그래서 든 생각은 이 Option 클래스가 문제가 아니라 그 하위속성 값이 문제인건가 싶었다.

---

.FlxedOption, .Like {
	margin: auto 30px;
}

하위속성 값 이었던 것

---

그래서 하위 속성의 값을 제거해줬다.

찌그러진게 펴졌다.(?)
굳이 하위 속성에 마진값을 주지 않고 간격을 벌릴 수 있으므로 주석 처리한 값을 삭제해주고
.Option의 justify-content: center; 를 space-evenly;로 바꿔주었다.

원하는 모양이 갖춰졌다. 굳굳..