오전 TMI
간신히 일어나서 떠지지 않는 눈으로 자연스럽게 노트북을 켰다ㅋㅋ.
TIL 특강
오늘은 짧지만 유의미했던 특강 내용을 조금 복습겸 적어보려고 한다. 참고로 강의 내용과 순서가 다른 것은 급하게 노트하다보니 일어난 일, 순서는 상관이 없다.
1. 문제해결
어떠한 문제에 대한 해결하려고 한 시도 혹은 대안을 적어보는 TIL. 실패한 시도도 좋으니 일단은 기록하고 보는, 스스로가 어떠한 시도를 했는가를 기록하는 TIL이 있다고 한다.
이런 TIL을, 아직 몇개 안 썼지만, 써 본 경험이 적어서 앞으로 계속 내가 어떠한 시도를 했고 어느 부분의 문제였으며 해결 방안이 뭐였는지 메모한 후 적어보는 TIL이 있으면 좋을 것 같다.
2. 개념 정리
지금처럼 배웠던 내용 혹은 새로 알게 된 개념을 정리하는 식의 TIL. 이 방식은 평소에도 자주 쓰는 방식이라 익숙하지만 다른 방법의 TIL도 앞으로 쓰면 좋을 듯 싶다.
내가 주로 썼던 내용은 새로 알게된 함수 혹은 함수의 활용법으로 어떠한 상황에 적용시킬 수 있는지 추가해서 써보면 좋을 것 같다는 생각이 들었다.
3. 기능 개발
어떠한 기능을 개발하는 내용을 주로 하는 TIL. 나는 주로 과제 설명을 할 때 이런 방법의 TIL을 쓰는 것 같긴 하지만 내용이 꼼꼼한 편은 아니기에, 이 부분도 좀 더 신경 쓸 수 있다면 신경 쓰는 것이 좋아보인다.
4. 회고
말 그대로 오늘 했던 일들을 회고하는 TIL. 이건 너무 일기 같지 않을까, 내용이 너무 적지는 않을까 싶어서 지양하던 방식인데 강사님께서 말씀하시길 계속 무엇을 하고 있는지, 무엇을 배웠는지, 문제를 발견한다던지를 수시로 메모하고 하루 정리할때 TIL을 작성하면 훌륭한 회고록이 될 수 있다고 얘기해주셨다.
추가) 일단 쓰고 보자
내용도 내용이지만 쓰는 습관부터 들이고 그 다음에 나아가야 한다. 당연히 누구라도 처음부터 완벽해야 하는데 하는 마음으로 글을 쓰면, 나중에 하기도 싫고 습관 들이기도 어렵다.
당연한 말이면서도 항상 망각하는 말이기에 오늘 TIL에 남기려고 한다.
Bootstrap Grid Class 와 싸우기
오늘 우리 팀 와이어프레임의 컨펌을 받고 일을 배분해서 진행하였다. 팀소개 페이지를 만들어 CRUD 기능을 넣는 페이지의 구현이 주 과제였다.
여기서 내가 맡은 건 팀원소개 섹션으로 카드를 만들고 수정/삭제 (이 부분은 다른 팀원분이 해주시는 중) 기능을 같이 추합해가는 파트였다.
문제는 Bootstrap 이 친구의 클라스를 이해하는데 애를 먹었다는 것이다. 아래 사진을 보자
Bootstrap의 Grid Class를 사용하여 팀원 6명의 카드를 만들고 붙이는 것에는 성공했지만 column(열)사이 여백이 없었다. 그리고 배경색과 함께 보면 모두 왼쪽으로 몰린것을 볼 수 있었다.
여기서 사용한 클라스는
<div class="row row-cols-1 row-cols-md-3 g-4 team-cards">...</div>Bootstrap 클라스들
row: 카드 순서가 왼쪽부터 오른쪽으로 순서대로 생성되도록 하는 클라스row-cols-md-3: 행 하나의 최대 열을 3개로wrapping하는 클라스g-4: 카드 요소 간의spacing과 관련된 클라스
번외) 내가 만든 team-cards는 회색으로 표시해주는 클라스
여기서 머리가 아팠던 것은 아무리 각 카드의 margin이랑 padding을 조절해도 저 상태에서 벗어나지 않는 것이었다.
그래서 생각한 것이 "아... 저 감싸는 div의 문제인가보다"
개발자 도구를 열어 확인해보니
왜인지는 결국 찾지 못했으나 margin과 display: flex가 override되어서 모두 비활성화 되어있었다.
(ㅇㅅㅇ.... 전 wrapper div의 아무것도 안 건드렸는데요)
어차피 HTML/CSS 파일은 같은 클라스에 대한 내용이라도 나중에 쓴 것이 우선이 되기때문에 새로운 클라스를 만들어 아래의 내용을 추가했다.
.potato-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}그리고 추가만 해주면
짜잔! 원하는대로 각 카드가 감싸는 div의 모든 변마다 제대로 붙었고 여백도 충분해진 것을 볼 수 있다.
여기에 카드를 하나 더 붙이게 되면 카드의 상하 여백이 줄어드는 경우가 있는데 그 부분은 gap을 지정해서 주기만 하면 깔끔하게 디자인이 가능하다. (오른쪽 사진이 gap을 지정한 경우)
 |  |
|---|
마치며...
오늘은 짧지만 굵었던 특강과 내가 맞써 싸우고 있던 친구에 대한 일을 끝으로 회고를 마친다
(flex 진짜.....)
