Record4me

시작하면 끝을 봐야지

개발일지

[TIL] 24_0104 선택요구사항까지 마치고,

잇츄미 2024. 1. 4. 21:18

 

선택요구사항으로
- CSS의 flex, grid사용하고,
- 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 포커스 위치시키기,

- 대소문자 관계없이 검색 가능하게 하고,
- 키보드 enter키를 입력해도 검색버튼을 클릭한 것과 동일하게 검색 실행하는

영화 검색기능을 완성하면서 다시 점검하게 됐어. 그리고 그 과정에서 확인된 필수사항 문제까지.

 

- grid는 일단 이렇게 저렇게 써보면서 grid에 함수를 쓸 수 있단 걸 알았고 정렬할 대상들을 담은 부모태그에

- grid속성을 걸어서 만들 수 있었어.

grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px; // (또는 grid-gap을 써줘도 됨)

 

- repeat함수의 매개변수로 나열할 것들의 세로열 갯수와 여유공간의 비율을 넣을 수 있었어.

repeat(3, 1fr)

- 3열, 비율 적으로 1:1:1비율으로 넣는 거야.

 

- rows로 행은 자동으로 행갯수와 비율을 늘리게 했어. 내용의 길이가 다 달라서 긴 내용의 카드 기준으로 크기가 조정될 거야.

 

 

느낀 점

- grid 한 번 쓰니까 굉장히 편한데 어려워서 좀 더 공부해서 아 이것 쯤이야! 하며 술술 써내려 갈 수 있도록 써봐야겠어.

- flex도 평소 flex-direction, align-item, justify-content 이렇게 썼는데 flex-basis, flex-grow 등도 써보면서 자유롭게 사용할 수 있게 되서 css는 쉽게 구현하고 기능에 집중해 봐야겠어.

- css 전엔 어려웠는데 지금은 이걸 하면 이렇게 되겠구나 예측고 쓰게 되는 것 같아.