CSS 기초 개념 한 줄 요약
| 개념 | 한 줄 요약 |
|---|---|
| CSS 규칙 | 선택자로 대상을 정하고, 선언으로 스타일을 적는다 |
| 스타일-내용 분리 | HTML과 CSS를 나누면 고치기도, 공유하기도 편하다 |
| id 선택자 | 페이지에 단 하나뿐인 요소를 콕 집을 때 쓴다 |
| class 선택자 | 여러 요소에 같은 스타일을 반복 적용할 때 쓴다 |
| 색상 단위 | HEX/RGB/RGBA로 표현, alpha 값으로 투명도까지 조절 |
| 크기 단위 | px는 절대값, %/em/rem은 기준에 따라 변하는 상대값 |
| 코멘트 | /* */로 감싸며 실행엔 영향 없음, 이름으로 설명 안 될 때만 |
| 텍스트 스타일 | color, font-size, font-family, font-weight, line-height |
| background-image | 요소에 배경 이미지를 넣고 반복/위치/크기를 조절 |
| linear-gradient | 색에서 색으로 부드럽게 번지는 배경 효과 |
| box-shadow | 위치·흐림·퍼짐·색 값으로 그림자를 만든다 |
| opacity vs rgba | opacity는 요소 전체, rgba는 배경색만 반투명하게 |
| 박스 모델 | content → padding → border → margin, 안에서 바깥 순서 |
| padding / margin | 안쪽/바깥쪽 여백, 상-우-하-좌 순서로 한 번에 지정 가능 |
| 마진 상쇄 | 세로 마진은 더해지지 않고 겹쳐서 큰 값만 적용된다 |
| border-radius | 테두리 모서리를 둥글게 만든다 |
| box-sizing: border-box | width/height에 padding·border까지 포함시켜 계산을 쉽게 |
| overflow | 박스보다 넘치는 내용을 자르거나(hidden) 스크롤로(scroll) 처리 |