[CSS 수업] 4강 - CSS 속성 및 값
안녕하세요! 그레이해커 월횽입니다. 이번 시간에는 CSS에서 가장 많이 사용되는 속성과 그 값들에 대해 알아보겠습니다.
다양한 속성을 익히고 실제 예제를 통해 웹페이지 스타일링에 적용해봅시다!
반응형
1. 배경 속성 (Background Properties)
.example {
background-color: #f0f0f0;
background-image: url('image.jpg');
background-size: cover;
}- background-color: 요소의 배경색을 지정합니다.
- background-image: 배경 이미지를 설정합니다.
- background-size: 배경 이미지의 크기를 조절합니다.
2. 글꼴 속성 (Typography Properties)
.example {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
}- font-family: 글꼴을 지정합니다.
- font-size: 글자 크기를 조절합니다.
- font-weight: 글자의 굵기를 설정합니다.
3. 여백과 패딩 (Margin and Padding)
.example {
margin: 10px;
padding: 20px;
}- margin: 요소의 외부 여백을 지정합니다.
- padding: 요소의 내부 여백을 지정합니다.
SMALL
4. 테두리 속성 (Border Properties)
.example {
border-width: 2px;
border-color: #ccc;
border-style: solid;
}- border-width: 테두리의 두께를 설정합니다.
- border-color: 테두리 색상을 지정합니다.
- border-style: 실선, 점선 등 테두리 모양을 지정합니다.
요약
CSS는 속성과 값의 조합으로 스타일을 구성합니다. 이번 강의에서 배운 속성들은 웹 개발에 가장 기본이 되는 요소들입니다.
- 배경: 색상, 이미지, 크기
- 글꼴: 폰트 종류, 크기, 굵기
- 여백: margin과 padding의 차이
- 테두리: 굵기, 색상, 스타일
다양하게 조합해보며 나만의 스타일을 만들어보세요!