[CSS ] 08. CSS 정리 노트 & 헷갈리는 개념

[CSS ] 08. CSS 정리 노트 & 헷갈리는 개념

---

1. CSS 전체 흐름 정리

• CSS는 HTML 요소의 시각적 표현을 담당한다
• 선택자를 통해 스타일 적용 대상을 지정한다
• 레이아웃은 display, position, flex, grid로 구성한다
• 화면 크기에 따라 Media Query로 스타일을 분기한다

---

2. block과 inline 차이

구분	block	inline
줄 차지	한 줄 전체	내용만큼
width / height	가능	불가능
margin / padding	모두 적용	좌우만 적용

---

3. class와 id 차이

구분	class	id
중복 사용	가능	불가능
표기	.class	#id
우선순위	낮음	높음

---

4. margin과 padding 헷갈림 정리

• padding : 요소 내부 여백
• margin : 요소 외부 여백

.box {
    padding: 20px;
    margin: 20px;
}

---

5. position 정리

• static : 기본값
• relative : 자기 자신 기준 이동
• absolute : 부모 기준 배치
• fixed : 화면 기준 고정
• sticky : 스크롤 위치에 따라 동작

---

6. display: none vs visibility: hidden

• display: none → 요소와 공간 모두 제거
• visibility: hidden → 공간은 유지, 요소만 숨김

.box {
    display: none;
}

.box {
    visibility: hidden;
}

---

7. Flexbox와 Grid 사용 기준

• Flexbox : 한 방향 정렬
• Grid : 행과 열 기반 배치

---

8. box-sizing 정리

요소 크기 계산 방식 제어

* {
    box-sizing: border-box;
}

padding과 border를 포함한 크기로 계산된다.

---

9. 자주 나오는 실수

• inline 요소에 width 적용
• absolute 사용 시 부모에 position 미설정
• margin 중첩 현상 혼동
• Media Query 조건 순서 혼동

---

10. 마무리

이 시리즈는 CSS의 기본 개념부터 레이아웃과 반응형까지를 단계적으로 정리하였다.

각 속성의 의미와 역할을 이해하는 것이 중요하며, 필요한 부분을 다시 찾아볼 수 있도록 정리하는 것을 목표로 한다.