🗂️ CSS 요약정리

김수진·2025년 5월 11일

CSS란?

HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어

1. 구성요소

1.1 셀렉터

스타일을 적용할 HTML 요소를 지정하는 방법

1.2 프로퍼티

어떤 스타일(예: 색상, 글자 크기 등)을 적용할지 결정하는 키

1.3 값

프로퍼티에 할당되는 구체적인 설정값(예: red, 16px 등)

1.4 HTML & CSS 연동

HTML에 CSS를 적용하는 세 가지 방법

1.4.1 link style

외부 .css 파일을 <link> 태그로 불러오기

1.4.2 embedding style

문서 <head> 안에 <style> 태그로 CSS 직접 작성

1.4.3 inline style

HTML 요소에 style="…" 속성 안에 CSS 작성

2. 셀렉터

2.1 전체 셀렉터

* : 문서 내 모든 요소 선택

2.2 태그 셀렉터

태그명 : 해당 태그를 가진 모든 요소 선택

2.3 ID 셀렉터

#id값 : 유일한 ID 속성 값을 가진 요소 선택

2.4 클래스 셀렉터

.class attribute 값 : 지정한 클래스 속성을 가진 요소 선택

2.5 attribute 셀렉터

[attr] : 해당 속성을 가진 요소 선택

[attr="값"]: 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소 선택
[attr~="값"]: 지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소 선택
[attr|="값"]:지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소 선택
[attr^="값"] : 지정된 어트리뷰트 값으로 시작하는 요소 선택
[attr$="값"]: 지정된 어트리뷰트 값으로 끝나는 요소 선택
[attr*="값"] : 지정된 어트리뷰트 값을 포함하는 요소 선택

2.6 복합 셀렉터

2.6.1 후손 셀렉터

A B : A 요소의 모든 하위(후손) 중 B 요소 선택

/* div 요소의 후손요소 중 p 요소 */
    div p { color: red; }

2.6.2 자식 셀렉터

A > B : A 요소의 직계 자식 중 B 요소 선택

 /* div 요소의 자식요소 중 p 요소 */
    div > p { color: red; }

2.6.3 형제(동위) 셀렉터

2.6.3.1 인접 형제 셀렉터

A + B : A 바로 다음 형제인 B 요소 선택

/* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */
    p + ul { color: red; }

2.6.3.2 일반 형제 셀렉터

A ~ B : A 이후에 나오는 모든 형제 B 요소 선택

/* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다.*/
    p ~ ul { color: red; }

2.7 가상 클래스 셀렉터

콜론(:)을 사용

2.7.1 링크 셀렉터 & 동적 셀렉터

셀렉터	설명
`:link`	방문하지 않은 링크 요소
`:visited`	방문한 링크 요소
`:hover`	마우스가 올라와 있는 요소
`:active`	클릭되어 활성화된 요소
`:focus`	포커스가 들어와 있는 요소

2.7.2 UI 요소 상태 셀렉터

셀렉터	설명
`:checked`	체크된 상태인 요소
`:enabled`	사용 가능한(활성화된) 요소
`:disabled`	사용 불가능(비활성화) 요소

2.7.3 구조 가상 클래스 셀렉터

셀렉터	설명
`:first-child`	부모 요소 내에서 해당 셀렉터에 일치하는 요소 중 첫번째 자식 요소 선택
`:last-child`	부모 요소 내에서 해당 셀렉터에 일치하는 요소 중 마지막 자식 요소 선택

2.7.4 부정 셀렉터

셀렉터	설명
`:not(셀렉터)`	해당 셀렉터에 일치하지 않는 요소를 선택

2.7.5 정합성 체크 셀렉터

셀렉터	설명
`:valid`	정합성 검증이 성공한 input 또는 form 요소 선택
`:invalid`	정합성 검증이 실패한 input 또는 form 요소 선택

2.8 가상 요소 셀렉터

셀렉터	설명
`::first-letter`	콘텐츠의 첫글자 선택
`::first-line`	콘텐츠의 첫줄 선택 (블록 요소에만 적용)
`::before`	콘텐츠 앞에 지정된 내용 삽입 (주로 `content` 프로퍼티와 사용)
`::after`	콘텐츠 뒤에 지정된 내용 삽입 (주로 `content` 프로퍼티와 사용)
`::selection`	드래그하여 선택된 콘텐츠 스타일링

3. CSS 프로퍼티 값의 단위

3.1 키워드

프로퍼티마다 미리 정의된 키워드를 사용
예) display: block, position: absolute, overflow: hidden 등

3.2 크기 단위

3.2.1 px

화소 단위
1px = 브라우저 기준 1/96인치
요소 크기·이미지 크기 지정에 주로 사용

3.2.2 %

부모 요소 혹은 상속된 값에 대한 백분율
글자 크기, 너비·높이, 패딩 등 다양한 프로퍼티에 사용

3.2.3 em

현재 요소의 font-size를 기준으로 한 배수 단위
상속받은 font-size가 바뀌면 값도 변동하므로 중첩 시 주의

3.2.4 rem

최상위 루트(html)의 font-size를 기준으로 한 배수 단위
rem은 상속에 영향받지 않아 일관된 상대 크기 지정에 유리

3.2.5 Viewport 단위(vh, vw, vmin, vmax)

단위	설명
vw	viewport 너비의 1/100
vh	viewport 높이의 1/100
vmin	viewport 너비와 높이 중 작은 쪽의 1/100
vmax	viewport 너비와 높이 중 큰 쪽의 1/100

3.3 색상 표현 단위

CSS에서 색상을 지정하는 주요 방식

표현 방식	예시
HEX	`#000000`
RGB	`rgb(255, 255, 0)`
RGBA	`rgba(255, 255, 0, 1)`
HSL	`hsl(0, 100%, 25%)`
HSLA	`hsla(60, 100%, 50%, 1)`

3.3.1 color keywords

참고: https://html-color.codes/

4. 박스 모델

Content, Padding, Border, Margin으로 구성

4.1 width / height 프로퍼티

width, height: 콘텐츠 영역의 너비와 높이를 지정

 <style>
    div {
      width: 300px;
      height: 100px;
      background-color: cornsilk;
      border: 5px solid navy;
    }
  </style

overflow: hidden;을 지정하면 넘친 콘텐츠를 감출 수 있다.
auto 기본값: 블록 요소는 부모 너비 100%, 높이는 콘텐츠에 따라 결정

4.2 margin / padding 프로퍼티

content의 4개 방향(top, right, left, bottom)에 대하여 지정

margin/adding: top, right, bottom, left;: margin, padding 1개의 프로퍼티만으로 4방향의 프로퍼티를 한번에 지정 가능

margin: auto; : 수평 중앙 정렬

max-width/min-width : 반응형 너비 제어

4.3 border 프로퍼티

4.3.1 border-style

테두리 선의 스타일 지정

4.3.2 border-width

테두리의 두께 지정
border-style 와 반드시 함께 사용

4.3.3 border-color

테두리의 색상을 지정
border-style 와 반드시 함께 사용

4.3.4 border-radius

테두리 모서리를 둥글게 표현하도록 지정

4.4 box-sizing 프로퍼티

width, height 프로퍼티의 대상 영역 변경

5. display, visibility, opacity 프로퍼티

5.1 display 프로퍼티

프로퍼티값 키워드	설명
`block`	block 특성을 가지는 요소로 지정
`inline`	inline 특성을 가지는 요소로 지정
`inline-block`	inline-block 특성을 가지는 요소로 지정
`none`	요소를 화면에 표시하지 않음 (공간도 사라짐)

5.1.1 block 레벨 요소

특징:
항상 새로운 라인에서 시작
화면 전체 가로폭을 차지 (width: 100%)
width, height, margin, padding 지정 가능
내부에 inline 요소 포함 가능

예시 요소:
div, `h1~h6, p, ol, ul, li,hr, table, form

<div>
  <h2>블록 레벨 요소</h2>
  <p>width, height 미지정 → width: 100%; height: auto;</p>
</div>
<div style="width: 300px;">
  <h2>블록 레벨 요소</h2>
  <p>width: 300px → width: 300px; height: auto;</p>
</div>

5.1.2 inline 레벨 요소

특징:
새로운 줄로 시작하지 않음
내용 너비만큼만 공간 차지
width, height, margin-top, margin-bottom 지정 불가 (상하 여백은 line-height로 조정)
뒤에 공백이 있는 경우 자동 space 발생
내부에 block 요소 포함 불가

예시 요소:
span, a, strong, img, br, input, select, textarea, button

<h1>My <span>Important</span> Heading</h1>
<span>Inline</span><span>Inline</span><span>Inline</span>

5.1.3 inline-block 레벨 요소

특징:
inline 요소처럼 한 줄에 표시되며 줄 바꿈 없음
block 요소처럼 width, height, margin, padding 지정 가능
뒤에 공백(스페이스, 엔터 등) 시 자동 space 발생
상하 여백은 margin과 line-height 모두로 제어 가능

<div class="inline-block box1">inline-block height 70px</div>
<div class="inline-block box2">inline-block height 150px</div>

<div class="wrapper">
  <div class="inline-block box1">inline-block height 70px</div>
  <div class="inline-block box2">inline-block height 150px</div>
</div>

5.2 visibility 프로퍼티

요소의 가시성을 정의하며, 요소를 렌더링할지 여부를 결정

프로퍼티값 키워드	설명
`visible`	요소를 보이게 함 (기본값)
`hidden`	요소를 보이지 않게 함 (공간은 남음)
`collapse`	`table` 요소의 행/열을 숨김
`none`	IE/파이어폭스에서 table의 row/column을 숨김 (크롬은 `hidden`과 동일)

5.3 opacity 프로퍼티

요소의 투명도를 설정 (0.0~1.0)
부드러운 전환을 위한 transition사용

<div>opacity: 0.5</div>
<img src="https://web.com/img.jpg" alt="image">

6. 백그라운드

6.1 background-image 프로퍼티

요소의 배경 이미지를 지정 (url() 사용)

6.2 background-repeat 프로퍼티

이미지 반복 방식 설정
repeat
repeat-x: x축 반복
repeat-y: y축 반복
no-repeat: 반복 출력 멈출 때 사용

6.3 background-size 프로퍼티

이미지 크기 지정 (width height): px, %, 또는 하나만 지정 시 auto

cover: 비율 유지하며 요소를 덮도록 확대 (일부 가려질 수 있음)
contain: 비율 유지하며 전체가 보이게 축소

6.4 background-attachment 프로퍼티

스크롤 시 배경 고정 여부
fixed 키워드로 고정

6.5 background-position 프로퍼티

배경 이미지의 초기 좌표 설정 (xpos ypos)
키워드(top, bottom, left, right, center), %, px 모두 사용 가능
background-position: 0% 0%;로 지정

6.6 background-color 프로퍼티

요소의 배경 색상 지정 (색상값 또는 transparent)

6.7 background Shorthand

여러 배경 속성을 한꺼번에 정의

순서: background: [color] || [image] || [repeat] || [attachment] || [position]

7. 폰트와 텍스트

7.1 font-size 프로퍼티

텍스트 크기 정의

7.2 font-family 프로퍼티

폰트 지정
폰트명은 따옴표로 감싸주며 폰트명이 한단어인 경우는 따옴표로 감싸주지 않음

7.3 font-style / font-weight 프로퍼티

font-style 프로퍼티는 이탤릭체의 지정, font-weight 프로퍼티는 폰트 굵기 지정

7.4 font Shorthand

순서: font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory)

7.5 line-height 프로퍼티

텍스트 높이 지정

7.6 letter-spacing 프로퍼티

글자 사이 간격 지정

7.7 text-align 프로퍼티

텍스트 수평 정렬

7.8 text-decoration 프로퍼티

링크 underline을 제거
underline, overline, line-through 추가 가능

7.9 white-space 프로퍼티

공백(space), 들여쓰기(tab), 줄바꿈(line break) 의미

프로퍼티값	line break	space/tab	wrapping (자동 줄바꿈)
normal	무시	1번만 반영	O
nowrap	무시	1번만 반영	X
pre	반영	그대로 반영	X
pre-wrap	반영	그대로 반영	O
pre-line	반영	1번만 반영	O

7.10 text-overflow 프로퍼티

부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법 정의

조건:
1. width 프로퍼티가 반드시 지정되어 있어야 하며, 필요 시 block 레벨 요소로 변경
2. 자동 줄바꿈 방지를 위해 white-space: nowrap 설정
3. overflow 프로퍼티는 visible 이외의 값으로 지정해야 함

프로퍼티값	설명
`clip`	영역을 벗어난 텍스트를 표시하지 않는다. (기본값)
`ellipsis`	영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표 (…)를 표시한다.
`<string>`	지정한 문자열을 잘려난 텍스트 대신 출력한다.

7.11 word-wrap 프로퍼티

요소의 너비를 넘어가는 긴 단어(예: URL)를 처리하는 방식 정의

요소:
normal (기본): 긴 단어라도 강제 개행하지 않음 → 부모 영역을 벗어날 수 있음
break-word (IE, Chrome, Firefox 등 주요 브라우저 지원): 단어 경계가 아닐지라도 부모 영역에 맞춰 자동 개행

7.12 word-break 프로퍼티

긴 단어를 처리할 때 “단어 경계”를 무시하고 강제 개행할지 여부 정의

요소:
normal (기본): 단어 경계를 존중하여 개행
break-all: 단어 경계 무시, 부모 영역에 맞춰 가능한 모든 지점에서 개행
keep-all : 한자·한글·일본어 텍스트에서만 단어 경계를 존중

8. 요소의 위치 정의

8.1 position 프로퍼티

요소의 위치 방식을 지정
top/right/bottom/left와 함께 사용

8.1.1 static (기본위치)

이미 설정된 position을 무력화하기 위해 사용
top/right/bottom/left와 함께 사용하지 않음 (사용되면 무시)

8.1.2 relative (상대위치)

기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치 이동

8.1.3 absolute (절대위치)

가장 가까운 non-static 조상(없으면 문서) 기준으로 오프셋 이동

8.1.4 fixed (고정위치)

뷰포트(viewport) 기준으로 고정 배치
스크롤 시에도 위치 유지

8.2 z-index 프로퍼티

position이 static이 아닌 요소에 적용
값이 클수록 전면에 출력

	.orange {
      background-color: orange;
      z-index: 1000;
    }

8.3 overflow 프로퍼티

자식 콘텐츠가 부모 영역을 벗어날 때 처리 방식 정의

값	설명
`visible`	영역을 벗어난 부분을 표시한다. (기본값)
`hidden`	영역을 벗어난 부분을 잘라내어 보이지 않게 한다.
`scroll`	영역을 벗어난 부분이 없어도 스크롤바를 표시한다. (대부분의 브라우저에서 `auto`와 동일 동작)
`auto`	영역을 벗어난 부분이 있을 때만 스크롤바를 표시한다.

9. 요소 정렬

9.1 정렬

float: 블록 요소를 가로 정렬할 때 사용

값	설명
`float: none;`	요소를 떠 있게 하지 않는다. (기본값)
`float: right;`	요소를 오른쪽으로 이동시킨다.
`float: left;`	요소를 왼쪽으로 이동시킨다.

9.2 width

기본적으로 block 요소는 부모 너비 100% 차지
float를 선언하면, width 미지정 시 콘텐츠 너비만큼 최소화되어 “뜬(floating)” 상태가 됨

9.3 float 프로퍼티 관련 문제 해결 방법

9.3.1 float 프로퍼티가 선언된 요소와 float 프로퍼티가 선언되지 않은 요소간 margin이 사라지는 문제

원인: float 요소는 레이아웃 흐름을 벗어나기 때문
해결: 비선언 요소에 overflow: hidden; 추가

9.3.2 float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제

원인: 부모는 float 자식을 인식하지 못해 높이가 0이 됨

해결:
1. 부모에 overflow: hidden; 추가
2. 부모에 clearfix 기법 적용
3. (비권장) 빈 엘리먼트에 clear: both; 삽입
4. (대체) display: inline-block; + 부모 font-size: 0; 기법

10. 스타일의 상속과 적용 우선 순위

10.1 상속(Inheritance)

부모(조상) 요소에 적용된 프로퍼티를 자식(자손) 요소가 물려받는 것

상속됨: visibility, opacity, font-*, color, line-height, text-align, white-space 등

상속되지 않음: width/height, margin, padding, border, display, position, overflow, float, background등

강제 상속: 상속되지 않는 프로퍼티도 inherit 키워드를 사용하여 명시적으로 물려받을 수 있음

10.2 캐스캐이딩(Cascading)

하나의 요소가 여러 CSS 규칙에 영향을 받을 때, 적용 우선순위를 결정하는 세 가지 규칙

10.2.1 중요도

위치에 따른 우선순위
1. head 요소 내의 style 요소
2. head 요소 내의 style 요소 내의 @import 문
3. <link> 로 연결된 CSS 파일
4. <link> 로 연결된 CSS 파일 내의 @import 문
5. 브라우저 디폴트 스타일시트

10.2.2 명시도

높은 명시도 → 높은 우선순위
1. !important
2. 인라인 스타일
3. ID 선택자 (#id)
4. 클래스/속성/가상 클래스 (.class, [attr], :hover)
5. 태그 선택자 (div, p 등)
6. 전체 선택자 (*)
7. 상속된 스타일

10.2.3 선언순서

같은 명시도 내에서, 나중에 선언된 규칙이 우선 적용

p { color: blue; }
p { color: red; }   /* 이 규칙이 적용되어 빨간색 */

김수진

이전 포스트

🗂️ HTML 요약정리

다음 포스트