오늘(11.16)은 카테고리의 탭 UI를 구현하였다.
정말 하면 할 수록 느끼지만 CSS는 무한하다.
새벽 늦게까지 팀원과 여러 방법을 시도하며 구현을 성공하니까 정말 너무 즐거웠다.
우리가 구상한 웹을 만들기 위해 새벽까지 함께 고민하며 해나가니까 모든 과정이 즐겁다 :)
✅ 1. border-radius 부분 적용
💡 특정 모서리만 둥글게 할 수 있다
border-top-left-radius: 5px: 왼쪽 위 모서리 둥글게border-top-right-radius: 5px: 오른쪽 위 모서리 둥글게border-bottom-left-radius: 5px: 왼쪽 아래 모서리 둥글게border-bottom-right-radius: 5px: 오른쪽 아래 모서리 둥글게
✅ 2. Ul 태그에는 기본적으로 패딩값이 들어가있다
스타일을 주며 분명 아무값도 넣은적이 없는데 패딩이 들어가있어서 엄청 찾았다....ㅎㅎ 알고보니까 ul 요소의 padding-left 속성의 값을 0으로 해줘야 한다고 한다.
✅ 3. 탭 기능 구현
탭을 클릭하면 그 글씨만 색이 바뀌게 하고 다른 탭은 색을 연하게 주고 싶었는데,
그 기능을 코드로 어떻게 작성해야하나 한참 고민했다.
어렵게 시도하다가, 갑자기 번뜩 생각이 들어 적용해보았는데 성공적으로 적용돼서
새벽에 너무 신났다. 함께 고민해 준 팀원님 감사합니다🥹
className={currentTab === idx ? 'focused' : ''}
className을 적용해서 스타일을 만들어주면... 되었다는.....ㅋㅋ
✅ 4. 카테고리 구현
처음에 시도할 때는 카테고리 리스트를 쭉 나열하는데 <ul> <li>를 사용하였다. 그리고 나서 display: flex flex-direction으로 적용했는데 반응형을 주려고 하다보니까 grid를 사용하는 것이 훨씬 깔끔하게 구현하기 좋을 것 같았다.
<div> <span>으로 변경해주고 그리드로 정렬해주었다.
-
@media screen and (max-width: 890px) { max-width: 100%; grid-template-columns: repeat(4, minmax(0, auto)); } -
@media screen and (max-width: 780px) { max-width: 100%; grid-template-columns: repeat(3, minmax(0, auto)); } -
@media screen and (max-width: 550px) { max-width: 100%; grid-template-columns: repeat(2, minmax(0, auto)); }반응형까지 적용해주고 확인해보니 카테고리 아주 예쁘게 잘 구현되었다.
🔥 미디어쿼리는 css를 작성한 다음에 마지막에 작성하는게 좋다고 한다.
✅ 5. :first-child, :last-child
처음과 마지막의 자식 요소에 스타일을 적용하는 가상클래스이다.
탭 선택 시 탭 이름이 들어있는 칸에 border-radius 를 주기 위해서 적용해보았다. span:first-child { border-top-left-radius: 10px; } span:last-child { border-top-right-radius: 10px; }
div 안에 자식 요소인 span에 적용했더니 아주 잘 적용되었다😃
새벽까지 팀원들과 함께 고민하고 구현해 나가는 과정이 정말 즐거웠던 하루였다.
어렵게 느껴져서 머리가 아팠는데 막상 코드를 직접 입력하며 화면에 잘 나타나니까
"할 수 있잖아?!" 하는 생각이 많이 들었다 ㅎㅎ 함께 고민하는 과정이 이렇게 즐겁다니!!
앞으로도 기대가 된다.
