목차

1. CSS 속성 개요
2. 박스 속성
3. 가시 속성
4. 배경 속성
5. 글자 속성
6. 위치 속성
7. float 속성
8. 플렉스 박스

CSS 속성 개요

• CSS 속성은 HTML 요소에 스타일을 적용하기 위한 키워드 + 값의 조합
• 다수의 속성은 세미콜론(;)으로 구분
• 주요 분류: 박스, 가시, 배경, 글자, 위치 등

예시 코드

div {
  position: absolute;
  left: 16px;
  top: 12px;
  width: 100px;
  height: 100px;
  background: #00fefe;
  border: 1px solid black;
  box-sizing: border-box;
}

박스 속성

• 요소의 크기, 여백, 테두리 등을 조절하여 웹 페이지 레이아웃 구성에 사용됨

예시 코드

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 2px dashed red;
  box-sizing: border-box;
}