[웹 기초] CSS의 속성

목차 (OPEN)

• 📐 레이아웃 속성
• 🎨 시각적 속성
• ✍️ 타이포그래피 속성
• 🎞️ 애니메이션 및 전환 속성
• 🖱️ 인터렉티브 속성

 

 

 

 

 

오늘은 앞서 살펴봤던 CSS의 대표적인 5가지 속성에 대해 알아보고자 한다.

 

 

📐 레이아웃 속성

HTML 요소들의 위키, 크기, 정렬, 배치 방식 등을 설정하는 데 사용하는 것으로,

대표적인 속성들로는 아래와 같은 것들이 있다.

 

속성	설명	예시
width, height	크기 지정	width: 300px;
margin	바깥 여백	margin: 20px;
padding	안쪽 여백	padding: 10px;
display	요소들의 배치 방식	display: flex;

 

 

🎨 시각적 속성

색상, 배경, 테두리 등 디자인과 관련된 속성으로,

대표적인 속성들로는 아래와 같은 것들이 있다.

 

속성	설명	예시
background-color	배경색 지정	background-color: lightblue;
background-image	배경 이미지 추가	background-image: url('bg.jpg');
border	테두리 설정	border: 1px solid black;
box-shadow	그림자 효과	box-shadow: 2px 2px 8px gray;
opacity	투명도 조절	opacity: 0.5;
border-radius	테두리 둥글게 만들기	border-radius: 10px;

 

 

✍️ 타이포그래피 속성

텍스트의 글꼴, 크기, 간격, 정렬 등을 제어하는 속성으로,

대표적인 속성들로는 아래와 같은 것들이 있다.

 

속성	설명	예시
color	글자 색상	color: #333;
font-size	글자 크기	font-size: 18px;
font-family	글꼴 지정	font-family: 'Arial', snas-serif;
font-weithg	굵기 조절	font-weight: bold;
line-height	줄 간격	line-height: 1.6;
text-align	정렬	text-align: center;
letter-spacing	글자 간격	letter-spacing: 1px;

 

 

🎞️ 애니메이션 및 전환 속성

부드러운 변화나 움직임을 만들 때 사용하는 속성으로,

대표적인 속성들로는 아래와 같은 것들이 있다.

 

속성	설명	예시
transition	특정 스타일의 변화 속도 설정	transition: all 0.3s ease;
transform	이동, 회전, 확대 / 축소 등 변형	transform: scale(1.1);
animation	애니메이션 효과 전체 설정	animation: fadeIn 2s ease;
@keyframes	애니메이션 단계 정의	@keyframes slideIn { ... }

 

 

🖱️ 인터렉티브 속성

사용자와의 상호작용에 반응하는 스타일 설정 속성으로,

대표적인 속성들로는 아래와 같은 것들이 있다.

 

속성	설명	예시
:hover	마우스를 올렸을 때 스타일	button:hover { background: yellow; }
:active	클릭하는 순간 적용	a:active { color: red; }
:focus	입력창에 포커스가 있을 때	input:focus { border-color: blue; }
cursor	마우스 커서 모양 변경	cursor: pointer;