속성, 크기, 여백, 색상

속성

• 크기, 여백, 색상 같은 눈에 보이는 스타일을 지정 가능 

 

크기

width

• 요소의 가로 너비를 지정

• 단위는 px 사용

div {
  width:150px;
}

 

height

• 요소의 세로 너비를 지정
• 단위는 px 사용

div {
  height:150px;
}

 

font-size(글자 크기)

• 요소 내용(Text)의 글자 크기를 지정
• 글자의 크기를 지정하지 않아도 대부분의 브라우저에서 기본값 16px로 적용

div {
  font-size:16px;
}

 

 

여백

margin(요소의 바깥 여백)

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

div {
  // 위, 아래, 왼쪽, 오른쪽 모든 방면에 공통적으로 적용
  // * 단축 속성
  margin : 20px; 
}

div {
  // 각각 다르게 여백 설정 가능 
  // * 개별 속성
  margin-top:20px;
  margin-right:20px;
  margin-left:40px;
  margin-bottom:40px;
}

 

 

padding(요소의 내부 여백)

• 내부 여백은 자식 요소를 감싸는 여백을 의미

div {
  // * 단축 속성
  padding:20px;
}

div {
  // 각각 다르게 여백 설정 가능 
  // * 개별 속성
  padding-top:20px;
  padding-right:20px;
  padding-left:40px;
  marpaddinggin-bottom:40px;
}

 

 

색상

color(글자 색상)

• 요소 내용(Text)의 글자 색상을 지정
• font-color, text-color의 속성은 존재하지 않는다. 

background(요소의 배경 색상)

• 요소의 배경 색상을 지정
• color는 글자의 색만 지정 가능, 요소의 (배경)색을 바꾸러면 background-color 가 필요