CSS

웹사이트 레이아웃

Box model

margin-border-padding-content
 

margin

  • border 바깥쪽의 여백

padding

  • border 안쪽의 여백
  • 공간이 여백을 포함한 크기로 변경됨
 

Block

  • width/height 값 사용 가능
  • margin, padding 값 사용 가능

Inline

  • width/height 값 사용 불가
  • margin, padding에서 top/bottom 값 사용 불가
 

Margin 병합 현상

형제간의 margin 병합
→ 위 요소의 margin-bottom 과 아래 요소의 margin-top는 더해지지 않고 큰 값만 적용 됨
 
부모자식간의 margin 병합
→ 자식요소가 margin 값에 따라 이동하면 부모요소도 같이 이동함
 
 

레이아웃에 영향을 미치는 CSS 속성

  • display : block과 inline 요소의 성격을 바꿀 때 사용
  • float : 위로 띄워서 좌우로 정렬하고 레이어 층을 만듬
  • clear: float 속성 제거
 
*
브라우져는 default margin, padding 을 가지고 있기 때문에 아래 코드로 초기화 후 작업하면 좋다. 
*{
	margin: 0;
	padding: 0;
}