CSS 핵심 정리

---

1. 선택자 (Selector)

/* 태그 선택자 */
p { color: red; }

/* class 선택자 - 여러 요소에 사용 */
.box { background: blue; }

/* id 선택자 - 하나의 요소에만 사용 */
#header { background: green; }

/* 자식 선택자 */
.parent > .child { color: pink; }

/* 후손 선택자 */
.parent .descendant { color: gray; }

/* 복수 선택자 */
h1, h2, h3 { font-weight: bold; }

---

2. 박스 모델 (Box Model)

모든 HTML 요소는 박스 형태로 구성됨

┌─────────────────────────┐
│        margin           │
│  ┌───────────────────┐  │
│  │      border       │  │
│  │  ┌─────────────┐  │  │
│  │  │   padding   │  │  │
│  │  │  ┌───────┐  │  │  │
│  │  │  │content│  │  │  │
│  │  │  └───────┘  │  │  │
│  │  └─────────────┘  │  │
│  └───────────────────┘  │
└─────────────────────────┘

.box {
    width: 200px;
    height: 100px;
    padding: 16px;        /* 안쪽 여백 */
    border: 1px solid #000;
    margin: 20px auto;    /* 바깥 여백 / auto = 가운데 정렬 */

    /* 패딩/보더 포함해서 width 계산 (권장) */
    box-sizing: border-box;
}

box-sizing: border-box 습관적으로 쓰는 것 추천!
padding, border가 width 안에 포함되어 계산이 직관적

---

3. display

/* 블록 요소 - 한 줄 전체 차지 */
div { display: block; }

/* 인라인 요소 - 내용만큼만 차지, width/height 적용 안 됨 */
span { display: inline; }

/* 인라인 + 블록 - 내용만큼 차지하면서 width/height 적용 가능 */
img { display: inline-block; }

/* 숨기기 */
.hidden { display: none; }

/* flex (아래 섹션 참고) */
.container { display: flex; }

---

4. Flexbox

레이아웃 배치의 핵심!

.container {
    display: flex;
    flex-direction: row;        /* 가로 배치 (기본값) */
    /* flex-direction: column; */  /* 세로 배치 */

    justify-content: center;    /* 주축 정렬 (가로) */
    align-items: center;        /* 교차축 정렬 (세로) */

    gap: 16px;                  /* 자식 요소 간격 */
    flex-wrap: wrap;            /* 넘치면 줄바꿈 */
}

justify-content 값

값	설명
flex-start	시작점 정렬 (기본값)
flex-end	끝점 정렬
center	가운데 정렬
space-between	양 끝 붙이고 균등 간격
space-around	양쪽에 동일한 여백

자식 요소에 쓰는 속성

.item {
    flex: 1;          /* 남은 공간 균등 분배 */
    flex: 2;          /* 다른 요소보다 2배 넓게 */
    align-self: center; /* 자신만 교차축 정렬 변경 */
}

---

5. Position

/* static - 기본값, 위치 지정 불가 */
.box { position: static; }

/* relative - 원래 위치 기준으로 이동 */
.box {
    position: relative;
    top: 10px;
    left: 20px;
}

/* absolute - 가장 가까운 position 부모 기준으로 이동 */
.box {
    position: absolute;
    top: 0;
    right: 0;
}

/* fixed - 화면(뷰포트) 기준 고정 */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
}

/* sticky - 스크롤 시 특정 위치에서 고정 */
.header {
    position: sticky;
    top: 0;
}

absolute 쓸 때 → 부모에 position: relative 꼭 줘야 기준이 잡힘!

---

6. 텍스트 / 폰트

p {
    font-size: 16px;
    font-weight: bold;       /* 100~900 또는 bold/normal */
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.6;        /* 줄 간격 */
    letter-spacing: 0.5px;   /* 자간 */
    text-align: center;      /* left / right / center / justify */
    text-decoration: none;   /* underline 제거 (링크에 자주 사용) */
    color: #333;
}

---

7. 색상

.box {
    color: red;                   /* 텍스트 색 */
    background-color: #f5f5f5;    /* 배경색 */

    /* 색상 표기법 */
    color: red;                   /* 색상명 */
    color: #ff0000;               /* HEX */
    color: rgb(255, 0, 0);        /* RGB */
    color: rgba(255, 0, 0, 0.5);  /* RGBA - 투명도 포함 */
}

---

8. 크기 단위

단위	설명	예시
px	고정 픽셀	16px
%	부모 요소 기준 비율	50%
vw	뷰포트 너비 기준	100vw
vh	뷰포트 높이 기준	100vh
em	부모 폰트 크기 기준	1.5em
rem	루트(html) 폰트 크기 기준	1rem = 16px

---

9. 테두리 & 둥글기

.box {
    border: 1px solid #000;         /* 두께 스타일 색 */
    border-radius: 8px;             /* 모서리 둥글게 */
    border-radius: 50%;             /* 원 만들기 */
    border-top: 2px dashed red;     /* 위쪽만 */
}

---

10. 배경

.box {
    background-color: #f0f0f0;
    background-image: url('/images/bg.png');
    background-size: cover;         /* 꽉 채우기 */
    background-size: contain;       /* 비율 유지 */
    background-repeat: no-repeat;
    background-position: center;
}

---

11. 그림자

.box {
    /* box-shadow: x y blur spread color */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* text-shadow: x y blur color */
    text-shadow: 1px 1px 2px gray;
}

---

12. 반응형 - Media Query

/* 768px 이하일 때 (모바일) */
@media (max-width: 768px) {
    #wrapper {
        width: 100%;
        flex-direction: column;
    }
}

/* 1024px 이상일 때 (데스크탑) */
@media (min-width: 1024px) {
    #wrapper {
        width: 1200px;
        margin: 0 auto;
    }
}

---

13. 전환 & 애니메이션

/* transition - hover 등 상태 변화 시 부드럽게 */
.btn {
    background-color: blue;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: darkblue;
}

/* transform - 이동, 회전, 크기 변경 */
.box {
    transform: translateX(10px);   /* 좌우 이동 */
    transform: rotate(45deg);      /* 회전 */
    transform: scale(1.2);         /* 크기 */
}

---

14. 자주 쓰는 패턴 모음

/* 가운데 정렬 (블록 요소) */
.container {
    width: 1200px;
    margin: 0 auto;
}

/* 수직 + 수평 가운데 정렬 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 이미지 꽉 채우기 */
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 링크 밑줄 제거 */
a {
    text-decoration: none;
    color: inherit;
}

/* 리스트 스타일 제거 */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 전체 box-sizing 적용 (초기화 시 권장) */
* {
    box-sizing: border-box;
}

---

우선순위 (Specificity)

같은 요소에 여러 스타일이 겹칠 때 적용 순서

!important > inline style > id > class > tag

p { color: blue; }           /* 낮음 */
.text { color: green; }      /* 중간 */
#title { color: red; }       /* 높음 */
p { color: pink !important } /* 최강 (남용 금지!) */