CSS 스타일 속성

스타일 속성

HTML 요소에 어떤 스타일을 적용할 지 지정하는 키워드

구성 요소

구성 요소	설명	예시
선택자 (Selector)	어떤 HTML 요소에 스타일을 적용할지 지정	p, .menu, #header
속성 (Property)	적용할 스타일의 종류 (디자인 항목)	color, font-size, margin
값 (Value)	속성에 적용될 실제 값 (색상, 크기, 위치 등)	red, 16px, center

CSS 스타일 속성 이름은 케밥 케이스로 정의되어 있습니다.

스타일 속성

글꼴 속성 (Font Properties)

텍스트의 기본 스타일을 설정합니다.

•

자주 사용하는 속성

•

글꼴 속성 종류

•

기본 예시 코드

•

폰트 지정하는 방법

◦

외부 폰트

◦

파일 폰트

◦

메인 폰트 & 강조 폰트

글꼴 속성

텍스트 속성

텍스트 표현 방식을 제어하는 속성

•

텍스트 속성 종류

•

기본 예시 코드

•

텍스트 반응형 스타일

◦

상대 단위 사용

◦

@media (미디어쿼리) 사용

◦

clamp() 함수 사용

◦

calc() 함수 사용

텍스트 속성

여백 속성

배경 속성

배경을 제어하는 속성

•

배경 속성 종류

•

배경 그라데이션 함수

•

기본 예시 코드

•

배경 속성 응용

◦

배경 고정 스크롤

◦

텍스트 마스크

◦

이미지 마스크

배경 속성

위치 속성

위치 설정 기준과 크기를 지정하는 속성

•

위치 속성 종류

•

위치 설정 기준

◦

static

◦

relative

◦

absolute

◦

fixed

◦

sticky

•

기본 예시 코드

•

위치 속성 활용

위치 속성

배치 속성

요소를 컨테이너 내에서 어떻게 배치할 지를 지정하는 속성

•

배치 속성 종류

•

기본 예시 코드

배치 속성 종류

배치 속성

표현 속성

요소의 시각적 표현 방식을 제어하는 속성

•

표현 속성의 종류

•

기본 예시 코드

표현 속성의 종류

속성	설명	예시 코드
display	요소의 박스 모델을 설정합니다. (block, inline, flex, grid, none 등)	display: block;
visibility	요소의 가시성을 설정합니다.	visibility: hidden;
opacity	요소의 투명도를 설정합니다. (0은 완전 투명, 1은 불투명)	opacity: 0.5;
overflow	넘치는 컨텐츠에 대한 처리유형을 지정하는 속성	overflow: hidden;

표현 속성

변형 속성

요소의 크기, 모양, 위치를 변형시키는 속성

변형 속성의 종류

속성	설명	예시 코드
transform	요소에 다양한 변형 효과를 적용합니다.	transform: rotate(45deg);
transform-origin	변형의 기준점을 설정합니다.	transform-origin: top left;

변형 속성

전환 속성

스타일 속성의 변경 시 변경값으로 전환되는 스타일을 지정하는 속성

•

변환 속성 종류

•

기본 예시 코드

•

타이밍 속도 생성 사이트

전환 속성

애니메이션 속성

요소에 움직임을 지정하고 프레임별 스타일을 지정하여 애니메이션 효과를 주는 속성

•

애니메이션 속성의 종류

•

기본 예시코드

•

애니메이션 속성 응용

애니메이션 속성