100일의 코딩 26일차 학습 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발 초보자 (초급)

핵심 요약

• CSS 캐스케이딩과 스타일 우선순위 규칙 이해
• CSS 박스 모델(margin, padding, border)과 box-sizing: border-box 활용법 학습
• DevTools와 Inspect Element를 통한 디버깅 기초 경험

섹션별 세부 요약

1. CSS 캐스케이딩 및 우선순위

• 캐스케이딩은 CSS 규칙이 중복될 경우 적용 순서를 결정하는 메커니즘
• 선택자 구체성(예: #id > .class vs .class)과 !important 사용 시 우선순위 결정
• 실습에서 캐스케이딩 문제 해결에 어려움 있었으나, 다음 날 복습 예정

2. CSS 박스 모델

• 모든 요소는 margin, padding, border로 구성된 박스 형태로 처리
• box-sizing: border-box 사용 시 내부 콘텐츠(내용물)가 width/height에 포함되며 레이아웃 관리 용이

3. DevTools 활용

• 개발자 도구(DevTools)의 Inspect Element 기능을 통해 HTML/CSS 실시간 조정 가능
• 디버깅 및 스타일 분석에 유용한 도구로, 웹 개발 기본 역량 강화

결론

• 캐스케이딩 문제를 해결하기 위해 CSS 선택자 우선순위 규칙을 복습할 것
• box-sizing: border-box는 레이아웃 일관성을 위해 필수적으로 사용
• DevTools는 실무에서 디버깅과 디자인 테스트에 핵심적인 도구임.