1. CSS란?
CSS는 HTML 구조에 디자인(스타일)을 적용하는 언어이다.
핵심은 어떤 요소를 선택해서 어떻게 꾸밀지이다.
2. CSS 기본 문법
선택자 {
속성1: 값1;
속성2: 값2;
}
- 선택자: 꾸밀 대상
- 속성: 무엇을 바꿀지
- 값: 어떻게 바꿀지
3. CSS 적용 방식
1) 내부 스타일 시트
HTML <head> 안에 <style> 태그 사용
<style>
h1 {
color: red;
}
</style>
2) 외부 스타일 시트
CSS 파일을 따로 분리해서 사용
<link rel="stylesheet" href="style.css">
실무에서 가장 많이 사용됨
3) 인라인 스타일
HTML 태그에 직접 작성
<p style="color: green;">텍스트</p>
유지보수에 불리해서 거의 사용하지 않음
4. 선택자 (Selector)
1) 태그 선택자
h2 {
color: red;
}
2) 클래스 선택자
.highlight {
background-color: yellow;
}
- 여러 요소에 사용 가능
3) 아이디 선택자
#main {
color: blue;
}
- 하나의 요소에만 사용
4) 후손 선택자
#list li {
font-weight: bold;
}
- 특정 요소 내부의 모든 하위 요소 선택
5) 자식 선택자
body > p {
font-size: 20px;
}
- 바로 아래 자식만 선택
5. 레이아웃 (배치)
1) Flexbox
display: flex;
justify-content: space-around;
- 요소들을 가로 방향으로 배치
- space-around: 요소 사이 여백 균등
2) Grid
display: grid;
grid-template-columns: repeat(3, 1fr);
또는
grid-template-columns: 1fr 1fr 1fr;
- 1fr = 동일 비율
- 3개 컬럼을 1:1:1 비율로 나눔
grid-column: 1 / 3;
- 1번부터 3번 전까지 → 2칸 차지
Flex vs Grid 차이
- Flex: 1차원 (가로 or 세로)
- Grid: 2차원 (행 + 열)
6. Position (위치 지정)
position: relative;
position: absolute;
- relative: 기준 위치 (자기 자리 기준)
- absolute: 부모 기준으로 위치 이동
7. 인터랙션 (사용자 반응)
1) hover (마우스 올릴 때)
.button:hover {
background-color: red;
}
2) active (클릭할 때)
.button:active {
background-color: darkred;
}
3) transform (변형)
transform: translateY(-5px);
- 위치 이동, 크기 변경 등 가능
4) transition (부드러운 효과)
transition: all 0.3s ease;
- 변화가 자연스럽게 보이도록 함
'TIL' 카테고리의 다른 글
| [TIL]JavaScript (생성자 함수, 프로토타입, 배열, 내장 객체) (0) | 2026.04.10 |
|---|---|
| [TIL]JavaScript 핵심 개념 정리 (반복문, 객체, 함수) (0) | 2026.04.09 |
| [TIL]JavaScript 기초 문법 정리 (0) | 2026.04.08 |
| [TIL]HTML 기초 태그 정리 (0) | 2026.04.07 |
| [TIL]Git과 GitHub 기초 개념 및 명령어 정리 (0) | 2026.04.06 |