[css] 박스를 구성하는 요소

 

 

 

 

 

 

 

 

 

 

 

***************************************** 내 기준 상 제일 중요 ****************************************

 

 

 

 

css 박스 모델

 

 

 

 

 

border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)

 

 

border(테두리)

 

p {
  border: 1px solid red;
}

 

margin(바깥 여백)

 

각각의 값은 top,bottom,left,rigjt로 시계 방향

 

p {
  margin: 10px 20px 30px 40px;
} // top,bottom,left,rigjt

p {
  margin: 10px 20px;
} // 값 2개 -> top,bottom : 10px left,right : 20px

p {
  margin: 10px;
} // 값 1개 -> 모든 바깥 여백

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
} // 방향을 특정한 속성도 존재

p {
  margin-top: -2rem;
} // 음수 값 지정도 가능

 

padding (안쪽 여백)

 

p {
  padding: 10px 20px 30px 40px;
} // 마진과 동일

p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
  background-color: lightyellow;
} // 안쪽 여백을 더욱 선명하게 확인

 

박스를 벗어나는 콘텐츠 처리

 

p {
  height: 40px;
} // 콘텐츠가 차지하는 높이보다 작은 값을 할당

p {
  height: 40px;
  overflow: auto;
} // overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시

 

레이아웃을 쉽게 디자인

 

* {
  box-sizing: border-box;
} // * 은 모든 요소를 선택하는 셀렉터