CSS기초- 속성- 크기, 여백, 색상

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 

CSS의 속성으로 크기, 여백, 색상 같은 눈에 보이는  스타일을 지정할 수 있다.

 

 

1. 크기

(1) width

div {
  width: 300px;
  /* 요소 가로너비: 너비 값 */
}

선택자로 지정된 요소의 가로 너비를  지정

 

 

(2) height

div {
  height: 150px;
/* 요소 세로너비: 너비값 */
}

선택자로 지정된 요소의 세로 너비를 지정

 

 

(3) font-size

div {
  font-size: 16px;
 /* 글자크기: 크기값 */
}

선택자로 지정된 요소 내용의 글자 크기를 지정

 

 

 

2. 여백

(1) margin

div {
  margin: 20px;
/* 요소바깥여백: 여백값 */
}

요소의 바깥 여백을 지정한다.
바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용한다.

위 코드는 margin은 요소의 위, 아래, 좌, 우 모두 20px의 여백을 지정하겠다는 의미이다.

 

세분화하기 위해 아래와 같이 한 방향씩 지정할 수도 있다.

div {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 50px;
  /* 요소바깥여백-위쪽: 여백값 
  요소바깥여백-오른쪽: 여백값 
  요소바깥여백-아래쪽: 여백값 
  요소바깥여백-왼쪽: 여백값 */
}

 

(2) padding

div {
  padding: 20px;
  /* 요소내부여백: 여백값 */
}

요소의 내부 여백을 지정한다.
내부 여백은 자식 요소를 감싸는 여백을 의미한다.

 

div {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
/*요소내부여백-위쪽: 여백값
  요소내부여백-오른쪽: 여백값
  요소내부여백-아래쪽: 여백값
  요소내부여백-왼쪽: 여백값 */
}

margin과 같이 한 방향씩 지정할 수 있다.

 

 

 

3. 색상

(1) color

div {
  color: red;
/* 글자색상: 빨강 */
}

글자 색상을 지정할때 사용한다.

 

 

(2)background-color

div {
  background-color: red;
/* 요소배경: 빨강 */
}

요소의 배경 색상을 지정한다.
color는 글자의 색만 지정할 수 있으며 요소의 (배경)색을 바꾸려면 background-color가 필요하다.