[CSS 수업] 4강 - CSS 속성 및 값

 

안녕하세요! CSS 수업 4강에서는 CSS에서 가장 많이 사용되는 속성과 그 값들에 대해 알아보겠습니다. 이번 수업을 통해 여러분은 웹 페이지의 스타일링을 위해 어떤 속성들을 사용할 수 있는지 알게 될 것입니다. 함께 시작해봅시다!

 

.example {
    background-color: #f0f0f0;
    background-image: url('image.jpg');
    background-size: cover;
}

1. 배경 속성 (Background Properties)
· background-color: 요소의 배경색을 지정합니다.
· background-image: 배경 이미지를 설정합니다.
· background-size: 배경 이미지의 크기를 조절합니다.

 

반응형

 

.example {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: bold;
}

2. 글꼴 속성 (Typography Properties)
· font-family: 글꼴을 지정합니다.
· font-size: 글자 크기를 조절합니다.
· font-weight: 글자 두께를 설정합니다.

 

.example {
    margin: 10px;
    padding: 20px;
}

3. 여백과 패딩 (Margin and Padding)
· margin: 요소의 외부 여백을 지정합니다.
· padding: 요소의 내부 여백을 지정합니다.

 

 

.example {
    border-width: 2px;
    border-color: #ccc;
    border-style: solid;
}

4. 테두리 속성 (Border Properties)
· border-width: 테두리의 너비를 설정합니다.
· border-color: 테두리의 색상을 지정합니다.
· border-style: 테두리의 스타일을 지정합니다.

 

위의 예시를 참고하여 다양한 CSS 속성과 값을 활용하여 웹 페이지를 꾸밀 수 있습니다. 다음 강의에서는 박스 모델에 대해 알아보겠습니다. 기대해주세요!

 

- 이전 수업 목록