레이아웃을 구성하는 CSS 박스 모델

CSS와 박스 모델

• 블록 레벨 요소와 인라인 레벨 요소

  대표적인 요소

  • 블록 레벨 요소 : <h1>,<div>,<p> 등
  • 인라인 레벨 요소 : <span>,<img>,<strong> 등

• 박스 모델의 기본 구성
  

• 콘텐츠 영역의 크기를 지정하는 width, height 속성

  말 그대로 콘텐츠 영역의 크기를 지정할 수 있다.

• 박스 모델의 크기를 계산하는 box-sizing 속성

  width, height의 값을 지정할 때,

  • border-box: 테두리까지 포함해서 너빗값을 지정한다.
  • content-box: 콘텐츠 영역만 너비 값을 지정한다.

• 박스 모델에 그림자 효과를 주는 box-shadow 속성

  기본형
  box-shadow: <수평 거리>, <수직 거리>, <흐림 정도>, <번짐 정도>, <색상>, inset
양수 : 오른쪽, 아래쪽
  음수 : 왼쪽, 위쪽
  inset 설정시에 그림자가 안으로 진다.

테두리 스타일 지정하기

• 박스 모델의 방향

  top -> right -> bottom -> left

• 테두리 스타일을 지정하는 border-style 속성

  속성값

  • none : 테두리가 없다. 기본값
  • hidden : 테두리를 감춘다. border-collapse일 경우 다른 테두리도 표시 안된다.
  • solid : 실선으로 표시
  • dotted : 점선으로 표시
  • dashed : 짧은 직선으로 표시
  • double : 이중선으로 표시
  • groove : 창에 조각한 것 처럼 표시
  • inset : 테두리가 창에 박혀있는 것처럼 표시, collapse의 경우 groove와 같다.
  • outset : 테두리가 창에서 튀어나온 것처럼 표시, collapse의 경우 ridge와 같다.
  • ridge : 테두리를 창에서 튀어나온 것처럼 표시

• 테두리 두께를 지정하는 border-width 속성

  기본형
  border-width: <크기> | thin | medium | thick

• 테두리 색상을 지정하는 border-color 속성

  기본형
  border-color: <색상> : 전체 색상 지정
  border-[방향]-color: <색상> : 해당 방향의 색상 지정

• 테두리 스타일 묶어 지정하는 border 속성

  기본형
  border: <크기> <선 스타일> <색상>

• 둥근 테두리를 만드는 border-radius 속성

  기본형
  border-radius: <크기 : 반지름의 크기> | <백분율 : 현재 크기를 기준으로 비율 지정>
border-radius: 50% 이미지를 원모양으로 자른다.

• 꼭지점마다 따로 둥글게 처리하기

  border-top-left-radius: <크기>
border-top-right-radius: <크기>
  타원형으로 만들기
  border-radius: <가로 반지름> / <세로 반지름>
border-위치-radius: <가로 반지름> <세로 반지름>

여백을 조절하는 속성

• 요소 주변의 여백을 설정하는 margin 속성

  기본형
  margin: <크기> | <백분율> | auto

• margin 속성을 사용하여 웹 문서를 가운데 정렬하기

margin:20px auto; /* 위아래 마진은 20px씩, 좌우 마진은 자동 계산 */

• 마진 중첩 이해하기

  마진 중첩 (마진 상쇄)
  세로로 박스를 배치할 경우 각 요소의 마진이 서로 만나면 마진이 큰 쪽으로 겹치는 문제

• 콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성

웹 문서의 레이아웃 만들기

• 배치 방법 결정하는 display 속성

  속성값
  block : 인라인 레벨을 블록 레벨 요소로 변경
  inline : 블록 레벨을 인라인 레벨 요소로 변경
  inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩 지정 가능
  none : 해당 요소를 화면에 표시하지 않는다.

• 왼쪽이나 오른쪽으로 배치하는 float 속성

  속성값 : left, right, none

• float 속성을 해제하는 clear 속성

  속성값 : left, right, both

웹 요소의 위치 지정하기

• 웹 요소의 위치를 정하는 left, right, top, bottom 속성

left: 50px; /* 왼쪽에서 50px 떨어지게 */
right: 50px; /* 오른쪽에서 50px 떨어지게 */

• 배치 방법을 지정하는 position 속성

  속성값
  static : 문서의 흐름에 맞춰 배치, 기본 값
  relative : 위칫값을 지정할 수 있다는 점을 제외하면 static과 같다.
  absolute : relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다.
  fixed : 브라우저 창을 기준으로 위치를 지정해 배치한다.