TIL - Day 29~30

프로그래머스 데브코스

프로그래머스 데브코스 프론트엔드 3기

✓ TIL DAY - 29~30

---

 

🗓 6주차 마무리..

vanilla JS 강의는 끝이 났고 4일간의 CSS학습의 중간(2일 차 수강 완료)에 왔다. 팀원들과 나름 친해지기도 하고 과제를 마무리하여 월드컵 첫 경기를 관람하는 여유(?)를 누렸다. 경기가 끝나고 깃허브를 확인하니 멘토님께서 코드 리뷰를 남겨주셨고 주말을 활용해서 노션 클로닝 프로젝트 리팩토링과 팀원들의 6주 차 과제 코드 리뷰를 진행할 예정이다.

 

늘 새로운 CSS

CSS 강의를 시작하며 로토님과는 다른 스타일의 강의에 적응하고 있다. 영웅님의 강의 스타일은 정반대의 느낌이다.😅 강의 속도가 빨라 짧은 시간 안에 많은 내용들을 배우게 되는 것 같다. 그동안 CSS를 등한시한 경향이 있었는데 우선순위라던지 동작 원리에 대해 생각하지 않고 그때그때 필요한 내용을 검색해 복붙 하는 게 전부였고 사용법 정도만 머리에 남아 항상 검색이 필요했다. 이번 강의를 통해 그동안 써보지 않은 내용들과 전반적인 흐름에 대해 중점적으로 학습하려고 한다.

 

노션 클로닝 프로젝트 리팩토링♻️(실수 정리)

PR을 날리며 나름 정리한다고 하였지만 크기가 조금 있는 프로젝트여서 그런지 잔실수가 많았고 오늘은 해당 내용들을 정리하는 시간을 가졌다. html에 inline으로 style 정의한 것을 정리하고 변수를 선언하고 사용하지 않은 경우, 한 파일에서 Import 하여 오는데 한 줄로 정리하지 못한 내용도 있었다. 코드 리뷰의 중요성을 느꼈고 팀원들이 꼼꼼하게 살펴봐준 덕분에 수정할 수 있었다. 이외에도 어떤 문서가 선택되었을 때 사이드바의 문서 제목을 진하게 하는데 이전에는 이게 breadcrumb나 하위 페이지로 클릭하여 들어가면 갱신되지 않았지만 메서드를 따로 정리하여 해당 기능을 추가하였다.

새롭게 배운 것

• 약간의 Emmet 문법 사용법 
• ::after 가상 요소 선택자
• 쌓임 맥락(Stacking Context)
• flex: grow, shrink, basis
• order와 gap
• grid 사용법 (repeat, minmax, fit-content)
• transform과 3D를 위한 perspective
• 다양한 filter 속성들과 사용법

오늘 깨달은 점

• border의 색상은 따로 지정하지않으면 글자색을 따른다.
• :nth-child() 선택자는 생각보다 유용하다.
• position: absolute 상위태그로 static을 제외한 relative, absoulte, fixed, sticky이 사용된다.
• fraction (fr) 단위
• 개발자 툴에서 grid나 flex를 클릭하면 숫자로 표시해준다.
• columns 사용법
• gap은 하위 브라우저 호환성이 좋지 않다.

참고했던 자료

stacking_context

쌓임 맥락 - CSS: Cascading Style Sheets | MDN