👀CSS 한눈에 보기

0. CSS란?

CSS(Cascading Style Sheets)는 HTML 요소의 모양과 배치를 정의하는 언어에요.

---

1. CSS 기본 구조

선택자(selector) {
  속성(property): 값(value);
}

예시:

p {
  color: red;
  font-size: 16px;
}

의미:

• p : 적용 대상

• color, font-size : 바꿀 항목

• red, 16px : 실제 값

---

2. 선택자

2.1. 기본 선택자

선택자	의미	예시
*	전체	* { margin: 0; }
HTML 태그	태그	div {}
#id	아이디	#header {}
.class	클래스	.box {}

⚠️ 아이디는 한 번만 사용

2.2. 결합 선택자

div p { }

• div 안에 있는 p만 선택

div > p { }

• 바로 아래 p만 선택

2.3. 선택자 우선순위

같은 선택자가 여러개 있으면, 우선순위가 높은 게 적용돼요.

우선순위

1. !important

2. 인라인 스타일

3. #id

4. .class

5. 태그

만약 우선순위도 같다면, 코드 상 아래있는 게 적용돼요.

---

3. 박스 모델

모든 요소는 네모 상자에요.

구성:

• content: 실제 내용

• padding: 안쪽 여백

• border: 테두리

• margin: 바깥 여백

.box {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
}

---

4. display 속성

모든 요소는 배치방식을 정의하는 display 속성이 있어요.

값	특징
block	한 줄 차지(div)
inline	내용만큼만 차지(span)
inline-block	크기 지정 가능
flex	한 방향 정렬
grid	행+열 관리
none	화면에서 없앰

4.1. flex

flex가 적용된 요소를 Flexbox라고 해요.

주요 속성:

• justify-content: 가로 정렬

• align-items: 세로 정렬

• flex-direction: 행(row) 또는 열(column)

/* Flex 컨테이너 */
.flex-container {
  display: flex;                 /* flex 시작 */
  flex-direction: row;           /* main-axis: 가로 */
  
  justify-content: space-between;/* main-axis 정렬 */
  align-items: center;           /* cross-axis 정렬 */

  flex-wrap: wrap;               /* 줄 바꿈 허용 */
  align-content: center;         /* wrap 되었을 때 cross-axis 정렬 */

  height: 200px;
  border: 2px solid black;
}

/* 공통 아이템 */
.item {
  background: lightgray;
  border: 1px solid gray;
}

/* 아이템별 설정 */
.item1 {
  flex-basis: 100px;  /* main-axis 기준 기본 길이 */
  flex-grow: 2;       /* 남는 공간 비율 */
  flex-shrink: 1;     /* 줄어들 때 기본값 */
}

.item2 {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 0;     /* 줄어들지 않음 */
}

.item3 {
  flex: 1 1 100px;    /* grow shrink basis 한 번에 */
}

4.2. grid

grid는 행과 열 둘 다 관리해요.

전체 화면을 구성하기도 해요.

주요 속성:

• grid-template-columns / grid-template-rows: 컬럼·로우 크기

• grid-column / grid-row: 아이템 위치·범위

• grid-template-areas / grid-area: 영역 배치

• column-gap / row-gap: 칸 사이 간격

• justify-items / align-items: 아이템 정렬

/* Grid 컨테이너 */
.grid-container {
  display: grid;                          /* grid 시작 */

  grid-template-columns: 1fr 2fr 1fr;     /* 컬럼 크기 */
  grid-template-rows: 100px 100px;        /* 로우 크기 */

  column-gap: 10px;                       /* 열 간격 */
  row-gap: 20px;                          /* 행 간격 */

  grid-template-areas:                   /* 영역 이름 */
    "header header header"
    "side   main   main";

  justify-items: center;                  /* 아이템 가로 정렬 */
  align-items: center;                    /* 아이템 세로 정렬 */

  border: 2px solid black;
}

/* Grid 아이템 */
.g1 {
  grid-area: header;                      /* 영역 배치 */
}

.g2 {
  grid-area: side;
}

.g3 {
  grid-area: main;
}

/* 직접 크기 지정 방식 */
.g4 {
  grid-column: 1 / 3;                     /* 컬럼 범위 */
  grid-row: 2 / 3;                        /* 로우 범위 */
}

---

5. position 속성

모든 요소는 요소의 위치기준을 정의하는 position 속성이 있어요.

정해진 기준 위치에서 상하좌우로 위치를 바꿀 수 있어요.

값	기준
static	본인 위치 (바꿀 수 없음)
relative	본인 위치
absolute	부모 위치
fixed	화면
sticky	스크롤

6. 반응형 디자인

반응형 디자인은 화면 크기에 따라 스타일을 바꾸는 디자인을 말해요.

@media (max-width: 768px) {
  body {
    background: gray;
  }
}