[HTML/CSS] CSS 정리

1. CSS 선택자

HTML 요소 중 어떤 부분에 스타일을 적용할지 "찍어주는 역할"

 

기본 선택자 종류

• 태그 선택자: 태그 이름으로 선택
• 클래스 선택자: 여러 요소에 재사용 가능 (`.` 사용)
• 아이디 선택자: 한 페이지에 1번만 사용 (`#` 사용)

예제

<p class="text" id="title">안녕</p>

p { color: blue; } /* 태그 선택자 */ 
.text { font-size: 20px; } /* 클래스 선택자 */ 
#title { font-weight: bold; } /* 아이디 선택자 */

---

2. 텍스트 / 폰트 스타일

글자의 크기, 색상, 굵기, 정렬 등을 설정하는 속성

• `color`: 글자 색
• `font-size`: 글자 크기
• `font-weight`: 글자 두께
• `text-align`: 정렬

예제

p {
  color: black;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

---

3. 링크 스타일

`a`태그에 적용됨.

링크는 상태별로 스타일 지정 가능함

• `a:hover`: 마우스 올렸을 때
• `a:active`: 클릭하는 순간 

예제

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
}

---

4. 리스트 스타일

`ul`, `ol`, `li 태그의 점, 숫자, 들여쓰기 등을 조절함

 

예제

ul {
  list-style-type: none;
  padding-left: 0;
}

---

5. 가상 선택자

요소의 “상태”를 기준으로 스타일 적용함.

자주 쓰는 것:

• `:hover`
• `:focus`
• `:active`

예제

button:hover {
  background-color: gray;
}

input:focus {
  border: 2px solid blue;
}

 

---

6. 배경 스타일

요소의 배경색 또는 배경이미지를 설정함.

 

예제

div {
  background-color: lightblue;
  background-image: url("bg.png");
  background-size: cover;
}

---

 

7. 여백(Margin) & 테두리(Border)

요소의 “밖 여백”과 “테두리”를 설정.

• `margin`: 바깥쪽 여백
• `padding`: 안쪽 여백
• `border`: 테두리

예제

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

---

8. 박스 모델 (Box Model)

요소는 아래 구조로 이루어짐

content → padding → border → margin

 

예제

.box {
  width: 200px;
  height: 100px;
  box-sizing: border-box;
}

---

9. Display & Position

요소의 배치 방식을 결정함

 

주요 속성

• `display: block / inline / inline-block / none`
• `position: static / relative / absolute / fixed`

div {
  display: inline-block;
  position: relative;
  top: 10px;
  left: 10px;
}

---

10. Flexbox

가로/세로 정렬을 쉽게 만들어주는 레이아웃 방식.

 

자주 쓰는 속성

• display: flex
• justify-content
• align-items

예제

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

 

---

11. Grid

격자(표) 구조로 레이아웃을 구성하는 방식.

 

예제

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

---

12. 반응형 디자인 (Responsive Design)

화면 크기(모바일, 태블릿, PC)에 따라 레이아웃이 자동으로 바뀌도록 만드는 기법임.

 

핵심 개념

• 고정 px 대신 %, vw, vh 단위 사용
• max-width로 화면 넘침 방지
• Flexbox / Grid로 유연한 레이아웃 구성

예제

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

---

13. Media Query

화면 크기에 따라 CSS를 조건부로 적용하는 기능.

 

기본 문법

 

@media (조건) {
  적용할 스타일
}

---

모바일 기준 반응형 예제

body {
  background-color: white;
}

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

 

---

카드 레이아웃 반응형 예제

.cards {
  display: flex;
  gap: 20px;
}

.card {
  width: 300px;
}

@media (max-width: 768px) {
  .cards {
    flex-direction: column;
  }

  .card {
    width: 100%;
  }
}

 

 

 

자주 쓰는 Media Query 기준

• 모바일: `max-width: 768px`
• 태블릿: `max-width: 1024px`
• PC: `min-width: 1025px`