CSS 학습 2일차: 핵심 개념 정리

카테고리

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

서브카테고리

웹 개발

대상자

웹 개발 초보자 (기초 수준)

핵심 요약

• CSS 선택자(기초 및 고급)와 의사클래스/의사요소 활용법 핵심 정리
• 상속, 특이도, !important 규칙을 통한 스타일 우선순위 관리 원리 설명
• 박스 모델(width, height, padding, margin, border) 및 display 속성(block, inline)의 레이아웃 영향 분석
• 상대 단위(%, em, rem)와 절대 단위(px, pt)의 응용 사례 제시

섹션별 세부 요약

1. CSS 선택자 및 의사클래스

• *** (전체 선택자), .class, #id 등 기본 선택자 활용 예시
• :hover, :nth-child(), ::before 등 고급 의사클래스/의사요소 사용 시나리오
• 선택자 조합(예: div.warning p)을 통한 정교한 스타일링 방법

2. 캐스케이딩 및 특이도

• 특이도 계산 규칙(ID > 클래스 > 태그)과 !important의 우선순위 강제 적용 방식
• 상속(예: color 속성)과 전역 스타일 오버라이딩 전략
• CSS 파일 순서가 스타일 적용에 미치는 영향 분석

3. 박스 모델과 레이아웃

• box-sizing: border-box 적용 시 width/height 계산 방식 변경 예시
• border-radius와 개별 border 설정(예: border-top: 2px solid red)을 통한 디자인 유연성 확보
• display: block/inline-flex 등 레이아웃 유형별 레ndering 방식 비교

4. 단위 시스템

• 절대 단위(px, pt)의 정확성과 상대 단위(em, rem, %)의 반응형 설계 적용 사례
• calc() 함수를 통한 복합 단위 계산 예제(예: width: calc(100% - 20px))

결론

• !important는 예외 처리용으로, 기본 선택자 우선순위 관리를 우선 적용하세요.
• box-sizing: border-box를 전역 스타일에 적용해 레이아웃 예측성을 높이세요.
• 상대 단위(rem, %) 사용으로 모바일/데스크탑 호환성을 확보하세요.