스타일 속성

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;

전환 속성

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

변환 속성 종류

기본 예시 코드

타이밍 속도 생성 사이트

애니메이션 속성

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

애니메이션 속성의 종류

기본 예시코드

애니메이션 속성 응용

애니메이션 속성