CSS 특이성, 코드 리뷰 및 제게 머리를 터뜨린 버그
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *웹 개발 초보자, CSS 학습자**
- 난이도: 중간 (CSS 특이성, 미디어 쿼리, 코드 리뷰 이해 필요)
핵심 요약
- CSS 특이성(specificity)은 선택자 우선순위를 결정하는 핵심 원칙으로,
section .component-marker2와 같은 구체적인 선택자를 사용해야 스타일이 적용됨 - 코드 리뷰는 기술적 오류 발견 외에도 비판 받는 법을 배우는 기회로, "코드에 집착하지 말라"는 심리적 교훈 제공
- CSS 학습 자원으로 CSSBattle(게임형 학습) 및 CSS-Tricks(특이성 설명) 추천
섹션별 세부 요약
1. **CSS Grid 프로젝트 시작과 문제 발생**
- HTML 작성은 1일 이내 완료 가능
- CSS 디버깅 시, 모바일 화면에서
.component-marker2가 예상한grid-column: 1 / -1이 아닌 5번 칼럼에 고정됨 - Chrome DevTools에서 삭제선(
~~)이 표시되어, 더 구체적인 스타일이 우선 적용됨을 알림
2. **CSS 특이성 문제 해결 과정**
- Stack Overflow 답변에 따르면, tablet 스타일의 특이성이 모바일 스타일을 덮어씀
- W3Schools 참고 후,
section .component-marker2와 같은 구체적인 선택자를 사용하여 문제 해결 - CSS 특이성 계산은
(id, class, element)순서로 계산되며,section .component-marker2는(0,1,1,0)점수를 가짐
3. **게임형 CSS 학습 자원 추천**
- CSSBattle는 10분간의 짧은 게임으로 CSS 특이성, Grid, Flexbox 등을 학습할 수 있음
- CSS-Tricks는 DevTools에서 요소에 호버 시
(1,0,0,0)과 같은 특이성 점수를 표시하여 원인 분석 가능 - 예시 링크: https://www.youtube.com/watch?v=B32NKRKJ_Cc, https://css-tricks.com/specifics-on-css-specificity/
4. **Frontend Mentor Discord 커뮤니티 피드백**
- 3가지 주요 피드백:
- 미디어 쿼리 작성 오류 (예:
max-width: 768px대신min-width사용) - 수평 스크롤바 발생 문제
- 불필요한 Grid 칼럼 과도한 사용
- 심리적 충격: 피드백을 받은 후 "코드에 집착"하는 태도로 인한 자존감 저하 경험
5. **코드 리뷰 대응 전략 학습**
- Angie Jones의 "10 Commandments of Navigating Code Reviews" 영상으로 비판을 수용하는 법 배움
- 코드 리뷰의 핵심: 기술적 오류 외에도 개인의 태도와 성장 가능성을 평가함
- 예시 링크: https://www.youtube.com/watch?v=3b_3-XyDat8
결론
- CSS 특이성을 이해하고 구체적인 선택자를 사용하는 것이 핵심
- 코드 리뷰는 기술적 피드백이 아닌 심리적 성장 기회로 인식해야 함
- JavaScript 학습 전에 3개 이상의 반응형 레이아웃 프로젝트를 완료하는 것이 DOM 조작 이해에 필수적