카테고리 없음 2025. 9. 26. 05:59

CSS 기본 선택자 시험 공부 요약

🎯 CSS란?

CSS (Cascading Style Sheets) - HTML 구조에 스타일을 적용하는 언어 (CSS3 버전 사용, W3C 표준)

📝 CSS 스타일 적용 3가지 방식 ⭐⭐⭐

1. 인라인 방식

<div style="color:darkgreen">인라인 스타일 방식</div>

해당 요소에 style 속성으로 직접 기입
우선순위가 가장 높음

2. 내부 방식

<head>
  <style>
    /* CSS 코드 작성 */
  </style>
</head>

<head> 태그 안에 <style> 태그 사용

3. 외부 방식

<link rel="stylesheet" href="style.css">

별도 .css 파일을 <link> 태그로 연결

🎯 선택자(Selector) 개념 ⭐⭐⭐

선택자: 특정 HTML 요소를 선택해서 스타일을 적용하는 기능

📋 4가지 기본 선택자 유형

1. **전체 선택자 (*)** ⭐⭐

* {
    color: darkred;
}

모든 요소를 선택
HTML 문서 내 모든 태그에 적용
주로 초기화 목적으로 사용

2. 태그 선택자 ⭐⭐⭐

pre {
    color: rgb(182, 91, 81);
}

같은 태그명을 가진 모든 요소 선택
h1, p, div 등 태그명 그대로 사용

3. 아이디 선택자 (#아이디값) ⭐⭐⭐

#pre-3,
#list-2 {
    color: orangered;
}

#으로 시작
딱 하나의 요소만 선택 (고유값)
HTML에서 id="아이디값" 속성 필요
문서 내에서 중복 불가

4. 클래스 선택자 (.클래스값) ⭐⭐⭐

.class-1 {
    color: salmon;
}
.class-2 {
    color: saddlebrown;
}

.으로 시작
여러 개의 요소 선택 가능
HTML에서 class="클래스값" 속성 필요
중복 사용 가능, 여러 클래스 동시 적용 가능

🔥 시험 출제 포인트

id vs class 차이점 ⭐⭐⭐

구분idclass

선택자 기호	#	.
고유성	문서 내 유일 (중복 불가)	중복 사용 가능
선택 개수	1개 요소만	여러 개 요소
사용 목적	특정 요소 하나만 스타일링	여러 요소를 그룹으로 스타일링

다중 선택자 ⭐⭐

/* 쉼표로 구분하여 여러 선택자 동시 적용 */
#pre-3,
#list-2 {
    color: orangered;
}

다중 클래스 적용 ⭐⭐

<!-- 한 요소에 여러 클래스 적용 -->
<li class="class-1 class-2">한 번에</li>

🎯 암기 포인트

선택자 기호: * (전체), 태그명 (태그), # (아이디), . (클래스)
CSS 적용 방식 3가지: 인라인 > 내부 > 외부 (우선순위 순서)
id는 고유값, class는 공유값
다중 선택자는 쉼표(,)로 구분

CSS 선택자 핵심 요약 🎯

기본 선택자 4개

* : 전체 선택자
태그명 : 태그 선택자
#아이디 : 아이디 선택자 (고유값, 1개만)
.클래스 : 클래스 선택자 (중복가능, 여러개)

고급 선택자 핵심

[속성명] : 속성 선택자
부모 > 자식 : 자식 선택자 (바로 하위만)
조상 후손 : 후손 선택자 (모든 하위)
A + B : 인접 형제 (바로 다음 1개)
A ~ B : 일반 형제 (뒤의 모든)

상태 선택자 (:콜론)

:hover : 마우스 올릴 때
:active : 클릭 중일 때
:focus : 포커스 상태
:checked : 체크된 상태
:enabled / :disabled : 활성/비활성

시험 필수 암기

자식(>) vs 후손( ) : 바로 하위 vs 모든 하위
id(#) vs class(.) : 고유값 vs 중복가능
형제 선택자 : 뒤에 오는 요소만 선택 가능
가상 클래스 : 콜론(:) 사용

⭐⭐⭐ CSS 우선순위 (중요!)

우선순위 순서 (높음 → 낮음)

1. !important          ← 최우선 (강제 적용)
2. 인라인 스타일        ← style="..." 
3. 아이디 선택자        ← #id
4. 클래스 선택자        ← .class
5. 태그 선택자          ← 태그명

CSS 글꼴 속성 핵심 요약 ✏️

1. font-family (글꼴 지정) ⭐⭐⭐

웹폰트: Google Fonts 등에서 <link> 태그로 연결
fallback: 여러 폰트 나열 (앞에서부터 우선 적용)

2. font-size (글꼴 크기) ⭐⭐⭐

단위 비교

px: 고정 크기
em: 부모 요소 기준 배수
%: 부모 요소 기준 백분율

3. font-weight (글꼴 두께) ⭐⭐

font-weight: normal;    /* 기본 */
font-weight: bold;      /* 굵게 */
font-weight: bolder;    /* 더 굵게 */
font-weight: lighter;   /* 더 얇게 */
font-weight: 100-900;   /* 숫자 (100단위) */

4. font-style (글꼴 기울임) ⭐⭐

font-style: normal;     /* 기본 */
font-style: italic;     /* 이탤릭 글꼴 */
font-style: oblique;    /* 강제 기울임 */

italic vs oblique 차이

italic: 기울임 전용 폰트 사용
oblique: 일반 폰트를 강제로 기울임

시험 출제 포인트 🎯

웹폰트 연결법 ⭐⭐⭐

html

<!-- 구글 웹폰트 연결 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/.../font.css" rel="stylesheet">

font-weight 숫자값 ⭐⭐

100-300: 얇음 (light)
400: 보통 (normal)
700: 굵음 (bold)
800-900: 매우 굵음

단위 선택 기준 ⭐⭐

고정 크기 원할 때: px
반응형 원할 때: em, %
1em = 부모 font-size 100%

암기 포인트 📝

font-family: 웹폰트 link 연결법
font-size: px, em, % 단위 차이
font-weight: normal(400), bold(700)
font-style: italic vs oblique 차이

CSS 텍스트 & 색상 속성 핵심 요약 🎨

색상 표현 방법 5가지 ⭐⭐⭐

1. 색상명

css

color: orangered;
color: yellowgreen;

2. 16진수 (#)

css

color: #3e0703;    /* 6자리 */
color: #f00;       /* 3자리 (축약형) */

3. RGB

css

color: rgb(255, 114, 20);    /* Red(0-255), Green(0-255), Blue(0-255) */

4. RGBA (투명도 포함)

css

color: rgba(255, 123, 66, 0.5);    /* 마지막 값: 투명도 0-1 */

5. HSL/HSLA

css

color: hsl(2, 20%, 30%);           /* 색상(0-360), 채도%, 명도% */
color: hsla(2, 20%, 30%, 0.899);   /* + 투명도 */

텍스트 장식 속성

text-decoration ⭐⭐⭐

css

text-decoration: none;         /* 선 없음 (링크 밑줄 제거) */
text-decoration: underline;    /* 밑줄 */
text-decoration: overline;     /* 윗줄 */
text-decoration: line-through; /* 취소선 */

text-align ⭐⭐⭐

css

text-align: left;      /* 왼쪽 정렬 */
text-align: right;     /* 오른쪽 정렬 */
text-align: center;    /* 가운데 정렬 */
text-align: justify;   /* 양쪽 정렬 */

실무 활용 예시

링크 스타일링 ⭐⭐

css

a {
    text-decoration: none;           /* 기본 밑줄 제거 */
    color: rgb(50, 50, 50);
}

a:hover {
    text-decoration: underline;      /* 호버시 밑줄 추가 */
    color: rgba(50, 50, 50, 0.4);   /* 호버시 투명도 적용 */
}

시험 출제 포인트 🎯

색상값 범위 ⭐⭐⭐

색상 방식범위

RGB	0 ~ 255
투명도 (A)	0 ~ 1
HSL 색상	0 ~ 360도
HSL 채도/명도	0 ~ 100%

투명도 ⭐⭐

0: 완전 투명
1: 완전 불투명
0.5: 반투명

text-decoration 용도 ⭐⭐

none: 링크 밑줄 제거
underline: 중요 텍스트 강조
line-through: 삭제된 내용 표시

text-align ⭐⭐

justify: 양쪽 끝을 맞춤 (신문처럼)
center: 제목이나 버튼에 주로 사용

암기 포인트 📝

text-decoration: none: 링크 밑줄 제거 필수
text-align: left, right, center, justify
rgba/hsla: 투명도 포함된 색상 표현

CSS 박스 모델 핵심 요약 📦

박스 모델 4개 영역 ⭐⭐⭐

┌─────────── margin (바깥쪽 여백) ────────┐
│  ┌─────── border (테두리) ──────────┐   │
│  │  ┌─── padding (안쪽 여백) ──┐    │   │
│  │  │     content (내용물)     │    │   │
│  │  └─────────────────────────┘    │   │
│  └─────────────────────────────────┘   │
└────────────────────────────────────────┘

영역 구분 (바깥 → 안쪽)

margin: 요소의 바깥쪽 여백
border: 테두리
padding: 내용과 테두리 사이 거리 (안쪽 여백)
content: 실제 내용물

실제 요소 크기

전체 크기 = content + padding + border
(margin은 포함되지 않음!)

Padding (안쪽 여백) ⭐⭐⭐

단축 속성 문법

css

/* 1개 값: 모든 방향 동일 */
padding: 100px;    /* 상하좌우 100px */

/* 2개 값: 세로/가로 */
padding: 50px 20px;    /* 상하 50px, 좌우 20px */

/* 4개 값: 시계방향 (상우하좌) */
padding: 50px 20px 10px 0px;    /* 상 우 하 좌 */

개별 속성

css

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Margin (바깥쪽 여백) ⭐⭐⭐

기본 사용법

css

margin: 50px;              /* 모든 방향 50px */
margin: 10px 20px;         /* 상하 10px, 좌우 20px */
margin: 10px 20px 30px 40px;  /* 상 우 하 좌 */

특별한 값들 ⭐⭐⭐

css

/* 음수 값: 요소를 위로 당김 */
margin-top: -150px;

/* auto: 가운데 정렬 */
margin: auto;              /* 상하좌우 auto */
margin: 0 auto;            /* 상하 0, 좌우 auto (가로 가운데) */

시험 출제 포인트 🎯

박스 모델 크기 계산 ⭐⭐⭐

css

.box {
    width: 100px;        /* content width */
    height: 100px;       /* content height */
    padding: 20px;       /* 안쪽 여백 */
    border: 5px solid;   /* 테두리 */
    margin: 10px;        /* 바깥 여백 */
}

실제 요소가 차지하는 크기:

가로: 100px (content) + 40px (padding) + 10px (border) = 150px
세로: 100px (content) + 40px (padding) + 10px (border) = 150px
margin은 크기에 포함되지 않음!

단축 속성 순서 ⭐⭐⭐

css

/* 시계방향: 12시부터 시작 */
padding: 상 우 하 좌;
margin: 상 우 하 좌;

/* 기억법: TRouBLe (상 우 하 좌) */

margin auto 활용 ⭐⭐

css

/* 가로 가운데 정렬 */
margin: 0 auto;           /* 블록 요소 가운데 정렬 */
margin-left: auto;
margin-right: auto;       /* 위와 동일한 효과 */

음수 margin ⭐⭐

css

margin-top: -50px;        /* 요소를 위로 50px 당김 */
margin-left: -20px;       /* 요소를 왼쪽으로 20px 당김 */

실무 팁 💡

가운데 정렬

css

.center {
    width: 300px;         /* 고정 너비 필요 */
    margin: 0 auto;       /* 가로 가운데 정렬 */
}

요소 간격 조정

css

.spacing {
    margin-bottom: 20px;  /* 아래 요소와 간격 */
}

겹침 현상 주의

margin collapse: 세로 margin은 겹칠 수 있음
padding은 절대 겹치지 않음

암기 포인트 📝

박스 모델 순서: margin → border → padding → content
크기 계산: content + padding + border (margin 제외)
단축 속성: 1개(전체), 2개(상하/좌우), 4개(상우하좌)
margin auto: 가로 가운데 정렬
음수 margin: 요소를 반대 방향으로 이동

CSS 목록 스타일 핵심 요약 📋

list-style 속성 3가지

1. list-style-type (불릿/번호 모양) ⭐⭐⭐

순서 없는 목록 (ul)

css

list-style-type: disc;      /* ● (기본값) */
list-style-type: circle;    /* ○ */
list-style-type: square;    /* ■ */
list-style-type: none;      /* 불릿 없음 */

순서 있는 목록 (ol)

css

list-style-type: decimal;       /* 1, 2, 3... (기본값) */
list-style-type: lower-roman;   /* i, ii, iii... */
list-style-type: upper-roman;   /* I, II, III... */
list-style-type: lower-alpha;   /* a, b, c... */
list-style-type: upper-alpha;   /* A, B, C... */

2. list-style-image (이미지 불릿) ⭐⭐

css

list-style-image: url(path/to/image.jpg);
list-style-image: none;     /* 기본값 */

3. list-style-position (불릿 위치) ⭐⭐

css

list-style-position: outside;   /* 텍스트 밖 (기본값) */
list-style-position: inside;    /* 텍스트 안 */

단축 속성 ⭐⭐⭐

css

/* 개별 속성 */
list-style-type: none;
list-style-image: url(image.jpg);
list-style-position: inside;

/* 단축 속성 (순서 상관없음) */
list-style: none;
list-style: url(image.jpg) inside;
list-style: square outside;

시험 출제 포인트 🎯

ul vs ol 기본값 ⭐⭐⭐

목록 타입	기본 list-style-type
ul	●
ol	1, 2, 3...

none의 활용 ⭐⭐⭐

css

list-style: none;    /* 가장 많이 사용 - 네비게이션, 메뉴 등 */

브라우저 기본 스타일 초기화 ⭐⭐

css

/* 목록 기본 스타일 완전 제거 */
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

CSS 테두리 & 효과 핵심 요약 🎨

Border 기본 속성 3가지 ⭐⭐⭐

1. border-style (테두리 스타일)

css

border-style: solid;      /* 실선 (가장 많이 사용) */
border-style: dotted;     /* 점선 */
border-style: dashed;     /* 대시선 */
border-style: double;     /* 이중선 */
border-style: groove;     /* 홈 파인 효과 */
border-style: ridge;      /* 돌출 효과 */
border-style: inset;      /* 안쪽으로 들어간 효과 */
border-style: outset;     /* 바깥으로 나온 효과 */
border-style: none;       /* 테두리 없음 */

2. border-width (테두리 두께)

css

border-width: 3px;        /* 모든 면 3px */
border-width: 1px 2px 3px 4px;  /* 상 우 하 좌 */
border-top-width: 10px;   /* 특정 면만 */

3. border-color (테두리 색상)

css

border-color: tomato;
border-color: #ff6347;
border-right-color: purple;  /* 특정 면만 */

시험 출제 포인트 🎯

border 단축 속성 순서 ⭐⭐⭐

css

border: 두께 스타일 색상;
border: 2px solid red;    /* 순서 중요! */

box-shadow vs text-shadow ⭐⭐

box-shadow: 요소 전체에 그림자
text-shadow: 텍스트에만 그림자

암기 포인트 📝

border 순서: 두께 → 스타일 → 색상
border-radius: 50%: 완전한 원
box-shadow: x y 흐림 번짐 색상
다중 그림자: 쉼표(,)로 구분
border-style 8가지: solid, dotted, dashed, double, groove, ridge, inset, outset
hover 효과: 그림자로 상호작용 표현

CSS 배경 속성 핵심 요약

시험 출제 포인트

background-size ⭐⭐⭐

auto: 원본 크기
contain: 전체 보임, 비율 유지
cover: 영역 꽉참, 비율 유지

background-clip vs box-sizing ⭐⭐

background-clip: 배경 적용 범위
box-sizing: 너비 계산 방식

background-attachment: fixed ⭐⭐

패럴랙스 스크롤 효과
배경이 화면에 고정됨

CSS 레이아웃 & 배치 핵심 요약

Display 속성 ⭐⭐⭐

블록 vs 인라인 기본 개념

블록 요소: 한 줄 단위로 영역 차지 (div, h1, p 등)
인라인 요소: 컨텐츠 크기만큼만 영역 차지 (span, a, strong 등)

display 값들

css

display: block;          /* 블록 요소로 변환 */
display: inline;         /* 인라인 요소로 변환 (width, height 적용 X) */
display: inline-block;   /* 인라인처럼 나열 + width, height 적용 가능 */
display: none;          /* 완전히 숨김 (공간도 차지 안함) */
display: flex;          /* 플렉스 컨테이너 */

중요한 차이점

inline: width, height 속성 적용 불가
inline-block: width, height 적용 가능하면서 가로 배열

Flexbox ⭐⭐⭐

기본 설정

css

.container {
    display: flex;          /* 자식 요소들이 가로 배열 */
}

방향 설정

css

flex-direction: row;        /* 가로 배열 (기본값) */
flex-direction: column;     /* 세로 배열 */

가로 정렬 (justify-content)

css

justify-content: flex-start;    /* 왼쪽 정렬 (기본값) */
justify-content: center;        /* 가운데 정렬 */
justify-content: flex-end;      /* 오른쪽 정렬 */
justify-content: space-around;  /* 요소 사이사이 동일 간격 */
justify-content: space-evenly;  /* 모든 간격 동일 */
justify-content: space-between; /* 양 끝 붙이고 사이 균등 분배 */

세로 정렬 (align-items)

css

align-items: stretch;       /* 부모 높이에 맞춤 (기본값) */
align-items: center;        /* 세로 가운데 */
align-items: flex-start;    /* 위쪽 정렬 */
align-items: flex-end;      /* 아래쪽 정렬 */
align-items: baseline;      /* 텍스트 베이스라인 맞춤 */

자식 요소 속성

css

.item {
    flex-grow: 1;           /* 남은 공간 차지 비율 */
    order: 2;               /* 배치 순서 변경 */
}

Position 속성 ⭐⭐⭐

position 값들

css

position: static;       /* 기본값 (일반적인 흐름) */
position: relative;     /* 원래 위치 기준으로 이동 */
position: absolute;     /* 부모 기준으로 절대 위치 */
position: fixed;        /* 화면(viewport) 기준 고정 */

Z-index (쌓임 순서) ⭐⭐⭐

css

z-index: 1;             /* 숫자가 클수록 위에 */
z-index: 9999;          /* 매우 위에 */
z-index: -1;            /* 아래로 */

z-index 주의사항

position이 static이 아닌 요소에만 적용
같은 부모 내에서만 비교됨

시험 출제 포인트

display 차이 ⭐⭐⭐

inline: width, height 무시
inline-block: width, height 적용 + 가로 배열
none vs visibility: hidden: 공간 차지 여부

Flexbox 축 ⭐⭐⭐

justify-content: 주축(기본 가로) 정렬
align-items: 교차축(기본 세로) 정렬

Position 상대성 ⭐⭐⭐

relative: 원래 위치 기준
absolute: 부모(relative) 기준
fixed: 화면 기준

z-index 조건 ⭐⭐

position: static이 아닌 요소에만 적용

암기 포인트

inline: width, height 적용 안됨
Flexbox: justify(가로), align(세로)
Position 3단계: 부모 relative → 자식 absolute → 위치 지정
z-index: 숫자 클수록 위, position 필수
display: none vs visibility: hidden: 공간 차지 여부
flex-grow: 남은 공간 차지 비율

CSS 레이아웃 패턴 핵심 요약

기본 웹 레이아웃 구조

전체 컨테이너 설정

css

#wrap {
    width: 1000px;           /* 고정 너비 */
    height: 800px;           /* 고정 높이 */
    margin: auto;            /* 화면 가운데 정렬 */
    box-sizing: border-box;  /* 테두리 포함 크기 계산 */
}

1. 기본 3단 레이아웃 (Header-Main-Footer)

HTML 구조

html

<div id="wrap">
    <div id="header"></div>
    <div id="container"></div>
    <div id="footer"></div>
</div>

CSS (백분율 방식)

css

#header, #footer {
    height: 30%;             /* 각각 30% */
}
#container {
    height: 40%;             /* 가운데 40% */
}

2. Flexbox 3단 레이아웃

HTML 구조

html

<div id="wrap">
    <header></header>
    <main></main>
    <footer></footer>
</div>

CSS (flex 비율)

css

#wrap {
    display: flex;
    flex-direction: column;   /* 세로 배치 */
}

header { flex: 3; }          /* 비율 3 */
main   { flex: 4; }          /* 비율 4 */
footer { flex: 3; }          /* 비율 3 */

3. 복합 레이아웃 (Header + Main 2분할 + Footer)

HTML 구조

html

<div id="wrap">
    <header></header>
    <main>
        <div id="content_1"></div>
        <div id="content_2"></div>
    </main>
    <footer></footer>
</div>

CSS (중첩 flex)

css

#wrap {
    display: flex;
    flex-direction: column;
}

header { flex: 2; }
footer { flex: 2; }
main   { flex: 6; }

/* main 내부를 가로 분할 */
main {
    display: flex;           /* 가로 배치 */
}

#content_1 { flex: 7; }     /* 70% */
#content_2 { flex: 3; }     /* 30% */

4. 고급 레이아웃 (Header 3분할 + Main 3분할 + Footer)

HTML 구조

html

<div id="wrap">
    <header>
        <div id="header_1"></div>
        <div id="header_2"></div>
        <div id="header_3"></div>
    </header>
    <main>
        <div id="content_1"></div>
        <div id="content_2"></div>
        <div id="content_3"></div>
    </main>
    <footer></footer>
</div>

CSS (다중 flex 컨테이너)

css

#wrap {
    display: flex;
    flex-direction: column;
}

/* 세로 영역 비율 */
header { flex: 2; }
main   { flex: 6; }
footer { flex: 2; }

/* Header 가로 분할 */
header {
    display: flex;
}
#header_1 { flex: 2; }      /* 20% */
#header_2 { flex: 5; }      /* 50% */
#header_3 { flex: 3; }      /* 30% */

/* Main 가로 분할 */
main {
    display: flex;
}
#content_1 { flex: 1.5; }   /* 15% */
#content_2 { flex: 5; }     /* 50% */
#content_3 { flex: 3.5; }   /* 35% */

핵심 Flexbox 패턴

세로 배치 (Column)

css

.container {
    display: flex;
    flex-direction: column;   /* 세로로 쌓기 */
}

가로 배치 (Row) - 기본값

css

.container {
    display: flex;            /* 가로로 나열 */
}

비율 설정

css

.item1 { flex: 1; }          /* 1 비율 */
.item2 { flex: 2; }          /* 2 비율 (item1의 2배) */
.item3 { flex: 3; }          /* 3 비율 (item1의 3배) */

시험 출제 포인트

flex 비율 계산

css

/* flex: 2, flex: 4, flex: 4 인 경우 */
/* 전체 비율 = 2 + 4 + 4 = 10 */
/* 첫 번째: 2/10 = 20% */
/* 두 번째: 4/10 = 40% */
/* 세 번째: 4/10 = 40% */

중첩 flex 이해

부모가 flex-direction: column (세로)
자식이 flex-direction: row (가로) - 기본값

box-sizing의 중요성

css

* {
    box-sizing: border-box;  /* 모든 요소에 적용 권장 */
}

암기 포인트

기본 구조: wrap → header/main/footer
세로 배치: flex-direction: column
가로 배치: display: flex (기본값)
비율 설정: flex: 숫자
가운데 정렬: margin: auto
중첩 flex: 부모와 자식 모두 flex 컨테이너 가능
box-sizing: border-box 필수

CSS 전체 종합 요약 - 시험 완벽 대비

1. 선택자 (Selectors)

기본 선택자

* : 전체 선택자
태그명 : 태그 선택자
#아이디 : 아이디 선택자 (문서 내 고유값, 1개만)
.클래스 : 클래스 선택자 (중복 가능, 여러 개)

고급 선택자

[속성명] : 속성 선택자
부모 > 자식 : 자식 선택자 (바로 하위만)
조상 후손 : 후손 선택자 (모든 하위)
A + B : 인접 형제 (바로 다음 형제 1개)
A ~ B : 일반 형제 (뒤에 오는 모든 형제)

상태 선택자 (가상 클래스)

:hover : 마우스 올릴 때
:active : 클릭 중일 때
:focus : 포커스된 상태
:checked : 체크된 상태
:enabled / :disabled : 활성화/비활성화 상태

2. CSS 우선순위 (매우 중요!)

우선순위 순서 (높음 → 낮음)

1. !important          ← 최우선 (강제 적용)
2. 인라인 스타일        ← style="..." 
3. 아이디 선택자        ← #id
4. 클래스 선택자        ← .class
5. 태그 선택자          ← 태그명

핵심 규칙

같은 선택자: 아래쪽이 덮어씀 (cascade)
다른 선택자: 우선순위에 따라 적용
!important는 모든 우선순위를 무시하고 강제 적용

3. CSS 적용 방식

3가지 스타일 적용 방법

인라인 방식: <div style="color: red">
내부 방식: <head> 안에 <style> 태그
외부 방식: 별도 CSS 파일을 <link> 태그로 연결

4. 글꼴 속성 (Font Properties)

주요 속성

font-family: 글꼴명 : 글꼴 지정
font-size: 크기 : 글꼴 크기 (px, em, %)
font-weight: normal|bold|100-900 : 글꼴 두께
font-style: normal|italic|oblique : 글꼴 기울임

웹폰트 사용

html

<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

단위 비교

px: 절대 단위 (고정 크기)
em: 상대 단위 (부모 요소 기준)
%: 백분율 (부모 요소 기준)

5. 텍스트 & 색상 속성

색상 표현 방법

색상명: red, blue
16진수: #ff0000, #f00
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5) (투명도 0-1)
HSL: hsl(0, 100%, 50%) (색상 0-360도, 채도/명도 0-100%)

텍스트 속성

color: 색상값 : 글자 색상
text-decoration: none|underline|overline|line-through
text-align: left|right|center|justify : 텍스트 정렬

6. 박스 모델 (Box Model) - 핵심!

박스 모델 구조 (바깥 → 안쪽)

margin → border → padding → content

크기 계산 공식

실제 요소 크기 = content + padding + border
(margin은 포함되지 않음!)

단축 속성 순서 (시계 방향)

css

padding: 10px 20px 30px 40px;  /* 상 우 하 좌 */
margin: 10px 20px;             /* 상하 좌우 */

중요한 설정

margin: auto : 가로 가운데 정렬
box-sizing: border-box : 테두리까지 포함한 크기 계산 (실무 필수)

7. 테두리 & 효과

Border 속성

border: 두께 스타일 색상 (예: border: 2px solid red)
border-radius: 값 : 모서리 둥글게 (50%면 완전한 원)
스타일: solid, dotted, dashed, double, groove, ridge, inset, outset

그림자 효과

box-shadow: x좌표 y좌표 흐림정도 번짐정도 색상
text-shadow: x좌표 y좌표 흐림정도 색상

8. 배경 속성 (Background)

주요 속성

background-color: 색상 : 배경색
background-image: url(경로) : 배경 이미지
background-repeat: repeat|no-repeat|repeat-x|repeat-y
background-size: auto|contain|cover|크기
background-position: left|right|center|좌표

중요한 차이점

contain: 이미지 전체 보임, 비율 유지 (여백 생길 수 있음)
cover: 영역을 완전히 덮음, 비율 유지 (이미지 일부 잘릴 수 있음)

9. 레이아웃 & 배치 (Layout)

Display 속성

display: block : 블록 요소 (한 줄 차지)
display: inline : 인라인 요소 (width, height 적용 안됨)
display: inline-block : width, height 적용 + 가로 배열
display: none : 완전히 숨김 (공간도 차지 안함)
display: flex : 플렉스 컨테이너

Flexbox (현대 레이아웃의 핵심)

css

.container {
    display: flex;                    /* 자식 요소들 가로 배열 */
    flex-direction: column;           /* 세로 배열 */
    justify-content: center;          /* 가로 정렬 */
    align-items: center;              /* 세로 정렬 */
}

Flexbox 정렬 옵션

justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly
align-items: stretch, center, flex-start, flex-end, baseline

자식 요소 속성

flex: 숫자 : 공간 차지 비율
order: 숫자 : 배치 순서 변경

Position 속성

position: static : 기본값
position: relative : 원래 위치 기준으로 이동
position: absolute : 부모(relative) 기준으로 절대 위치
position: fixed : 화면(viewport) 기준 고정

Position 설정 3단계

부모 요소에 position: relative
자식 요소에 position: absolute
위치 지정: top, right, bottom, left

Z-index (쌓임 순서)

숫자가 클수록 위에 위치
position이 static이 아닌 요소에만 적용

10. 목록 스타일 (List Style)

기본 속성

list-style-type: disc|circle|square|decimal|none
list-style-image: url(이미지경로)
list-style: none : 불릿/번호 완전 제거 (네비게이션에서 필수)

11. 가시성 제어

숨김 방법의 차이

visibility: hidden : 안 보이지만 공간은 차지
display: none : 완전히 제거 (공간도 차지 안함)

12. 웹 레이아웃 패턴

기본 3단 구조

css

#wrap {
    width: 1000px;
    margin: auto;              /* 가운데 정렬 */
    display: flex;
    flex-direction: column;    /* 세로 배치 */
}

header { flex: 2; }           /* 비율 2 */
main   { flex: 6; }           /* 비율 6 */
footer { flex: 2; }           /* 비율 2 */

중첩 레이아웃

css

main {
    display: flex;            /* 가로 분할 */
}
#sidebar { flex: 3; }        /* 30% */
#content { flex: 7; }        /* 70% */

시험 출제 빈도 높은 문제들

1. 우선순위 계산 문제

!important > 인라인 > #id > .class > 태그
같은 우선순위면 아래쪽이 적용

2. 박스 모델 크기 계산

width: 200px, padding: 20px, border: 5px
실제 크기 = 200 + 40 + 10 = 250px

3. 선택자 차이

자식(>) vs 후손(공백): 바로 하위 vs 모든 하위
id vs class: 고유값 vs 중복 가능

4. Flexbox 정렬

justify-content: 가로 정렬
align-items: 세로 정렬

5. Position 관계

relative-absolute 부모-자식 관계
fixed는 화면 기준 고정

6. Display 차이

inline: width, height 적용 안됨
inline-block: width, height 적용 + 가로 배열

최종 암기 체크리스트

CSS 우선순위 5단계
박스 모델 크기 계산 공식
Flexbox 정렬 속성 (justify vs align)
Position 부모-자식 관계 설정법
색상 표현법과 범위 (RGB 0-255, 투명도 0-1)
단축 속성 순서 (상 우 하 좌)
display 값들의 차이점
background-size: cover vs contain
margin: auto 가운데 정렬
box-sizing: border-box의 중요성

🔥 최종 시험 대비 핵심:

선택자 우선순위 - 가장 많이 출제됨
박스 모델 계산 - width 계산 문제 단골
Flexbox 정렬 - 현대 레이아웃 필수
Position 관계 - relative-absolute 부모-자식
색상 표현법 - RGB, RGBA 범위 값

특히 margin: auto와 box-sizing: border-box는 실무에서도 기본이니까 확실히 기억해두세요.

ABOUT ME

CSS 기본 선택자 시험 공부 요약

🎯 CSS란?

📝 CSS 스타일 적용 3가지 방식 ⭐⭐⭐

1. 인라인 방식

2. 내부 방식

3. 외부 방식

🎯 선택자(Selector) 개념 ⭐⭐⭐

📋 4가지 기본 선택자 유형

1. 전체 선택자 (*) ⭐⭐

2. 태그 선택자 ⭐⭐⭐

3. 아이디 선택자 (#아이디값) ⭐⭐⭐

4. 클래스 선택자 (.클래스값) ⭐⭐⭐

🔥 시험 출제 포인트

id vs class 차이점 ⭐⭐⭐

다중 선택자 ⭐⭐

다중 클래스 적용 ⭐⭐

🎯 암기 포인트

CSS 선택자 핵심 요약 🎯

기본 선택자 4개

고급 선택자 핵심

상태 선택자 (:콜론)

시험 필수 암기

⭐⭐⭐ CSS 우선순위 (중요!)

우선순위 순서 (높음 → 낮음)

CSS 글꼴 속성 핵심 요약 ✏️

1. font-family (글꼴 지정) ⭐⭐⭐

2. font-size (글꼴 크기) ⭐⭐⭐

단위 비교

3. font-weight (글꼴 두께) ⭐⭐

4. font-style (글꼴 기울임) ⭐⭐

italic vs oblique 차이

시험 출제 포인트 🎯

웹폰트 연결법 ⭐⭐⭐

font-weight 숫자값 ⭐⭐

단위 선택 기준 ⭐⭐

암기 포인트 📝

CSS 텍스트 & 색상 속성 핵심 요약 🎨

색상 표현 방법 5가지 ⭐⭐⭐

1. 색상명

2. 16진수 (#)

3. RGB

4. RGBA (투명도 포함)

5. HSL/HSLA

텍스트 장식 속성

text-decoration ⭐⭐⭐

text-align ⭐⭐⭐

실무 활용 예시

링크 스타일링 ⭐⭐

시험 출제 포인트 🎯

색상값 범위 ⭐⭐⭐

투명도 ⭐⭐

text-decoration 용도 ⭐⭐

text-align ⭐⭐

암기 포인트 📝

CSS 박스 모델 핵심 요약 📦

박스 모델 4개 영역 ⭐⭐⭐

영역 구분 (바깥 → 안쪽)

실제 요소 크기

Padding (안쪽 여백) ⭐⭐⭐

단축 속성 문법

개별 속성

Margin (바깥쪽 여백) ⭐⭐⭐

기본 사용법

특별한 값들 ⭐⭐⭐

시험 출제 포인트 🎯

박스 모델 크기 계산 ⭐⭐⭐

단축 속성 순서 ⭐⭐⭐

margin auto 활용 ⭐⭐

음수 margin ⭐⭐

실무 팁 💡

가운데 정렬

요소 간격 조정

겹침 현상 주의

암기 포인트 📝

CSS 목록 스타일 핵심 요약 📋

list-style 속성 3가지

1. list-style-type (불릿/번호 모양) ⭐⭐⭐

순서 없는 목록 (ul)

순서 있는 목록 (ol)

1. **전체 선택자 (*)** ⭐⭐