[CSS] 박스모델 정리

 

 

공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

 

 

 

 

박스모델

  : 그림이나 텍스트처럼 사각 영역을 갖는 요소를 통칭하는 의미

 

박스모델

 

 Margin  : 박스 모델 간의 여백

 Border  : 박스의 테두리

 Padding  : 박스와 컨텐츠 영역 사이의 여백

 Content  : 텍스트나 이미지가 들어가는 컨텐츠 영역

 

 

박스 모델의 전체 너비

= 컨텐츠 너비 + 양 옆의 패딩 + 양 옆 테두리

 

 

 

 

 

 

 

박스모델 관련 스타일

  1. width / height

    : 박스 모델의 너비와 크기

 

  2. margin

    : 주변 여백

    margin의 속성에는 margin-top, margin-right, margin-bottom, margin-left, margin이 있다. 

    margin으로 사용할 때는 top - right - bottom - left(시계방향)으로 값을 넣어야 한다.

 

  3. padding

    : 컨텐츠 영역과 테두리 사이 여백

    margin과 마찬가지로 padding-top, padding-right, padding-bottom, padding-left, padding속성이 있다.

    padding으로 사용할 때는 top - right - bottom - left(시계방향)으로 값을 넣어야 한다.

 

    * width, height / margin, padding 속성

크기	너비나 높이를 px이나 cm같은 단위의 수치로 나타냄
백분율(%)	박스모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이값을 %로 나타냄
auto (기본값)	박스모델의 너비와 높이 값이 컨텐츠 양에 따라 자동으로 결정됨.

 

 

 

테두리 관련 속성들

  1. border-width

    : 테두리 두께

    ex) border-width: thin thick thin 5px; : 위, 아래는 얇게, 오른쪽은 굵게, 왼쪽은 5px

 

    * border-width 속성

thin	얇은 선
medium (기본값)	보통 선
thick	굵은 선
크기	굵기 직접 지정

 

  2. border-color

    : 테두리 색

    border-top-color, border-right-color, border-bottom-color, border-left-color, border-color 속성이 있다.

    border-color으로 사용할 때는 top - right - bottom - left(시계방향)으로 값을 넣어야 한다.

    (border-color를 사용하려면 border-width와 border-style을 사용해서 테두리의 두께와 스타일이 설정되어 있어야 한다.)

 

    * border-color 속성

색상 값	rgb, 16진수, 색이름을 이용해 지정
transparent (기본값)	투명

 

  3. border-style

    : 테두리선 스타일

    border-top-style. border-right-style, border-bottom-style, border-left-style. border-style 속성이 있다.

    테두리 스타일의 기본값은 none이라 스타일을 지정하지 않으면 테두리가 표시되지 않음

 

    * border-style 속성

none	테두리 X
hidden	테두리 X, border-collapse:collapse일 경우 다른 테두리도 보이지 X
dotted	점선 ex) . . . . . .
dashed	짧은 선 ex) ㅡ ㅡ ㅡ
solid	실선
double	이중선(겹선) 두 선 사이의 간격이 border-width가 된다.

  # border 속성

    : 테두리 스타일을 합쳐서 한 번에 표시할 수 있다.

 

 

 

CSS3 박스 관련 속성들

  1. border-radius

    : 박스 모서리 둥글게 만들기

    값이 생략되어 있을 경우 서로 마주 보는 대각선의 값을 따라간다.
    (top-left 와 bottom-right /  top-right 와 bottom-left) 값을 넣을 경우 해당 값을 반지름으로 한 원이 있는 것처럼 모서리가 둥글어진다.)

     ex) border-radius:20px; : 모서리 부분의 반지름 20px

 

    * border-radius 속성

크기	둥글게 처리할 반지름 크기를 px나 em같은 단위의 수치로 표시
백분율(%)	현재 요소의 크기를 기준으로 둥글게 처리할 반지름의 크기를 %로 지정한다.

 

  2. border-*-radius

    : 박스 모서리 다르게 지정하기

    사용하면 각 모서리의 radius크기를 다르게 설정할 수 있다. 속성으로는 border-top-left-radius(왼쪽 위), border-top-right-radius(오른쪽 위), border-bottom-left-radius(왼쪽 아래), border-bottom-right-radius(오른쪽 아래)가 있다.

 

  3. box-shadow

    : 그림자 효과 내기

    box-shadow:수평거리값 수직거리값 blur값 확장거리값 색상값 inset;

 

    * box-shadow 속성

수평거리 (필수)	그림자가 수평으로 얼마나 떨어져 있는지 지정. 양수는 오른쪽, 음수는 왼쪽에 그림자 표시
수직거리 (필수)	그림자가 수직으로 얼마나 떨어져 있는지 지정. 양수는 오른쪽, 음수는 왼쪽에 그림자 표시
blur	흐림 정도 (생략하면 0이 기본값으로 진한 그림자) 값이 커질수록 부드러운 그림자(음수 사용 불가)
확장거리	그림자가 얼마나 번질지 설정(기본값 0) 양수 값 : 모든 방향으로 그림자가 퍼져나간다. 음수 값 : 모든 방향으로 그림자가 축소된다.
그림자 색상	그림자 색(기본값 검은색)
inset	사용하면 박스 안쪽에 그림자를 표시 (사용하지 않으면 박스 바깥쪽에 그림자를 표시)

 

 

 

block-level / inline-level

•  block-level  : 한 줄을 차지하는 요소, 양 옆에 다른 요소가 올 수 없다.
•  inline-level  : 줄을 차지하지 X, 컨텐츠의 크기만큼 공간을 차지한다. 
  
  

block-level tag	<hn>, <ul>, <ol>, <p>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
inline-level tag	<br>, <input>, <textarea>, <span>, <label>, <button>, <img>, <object>, <sub>, <sup>

 

 

  ■ display 속성 

    : 화면에 어떻게 보일지 설정

    * display 속성

block	block-level 박스
inline	inline-level 박스
inline-block	block-level이지만 inline-level 박스처럼 배치
none	박스 X, 시각적으로 표시하지도 X
inherit	상위 요소의 display 속성을 상속
table	block-level 표
inline-table	inline-level의 표로 만듦.(html의 table에 해당)
table-row	표의 행으로 만듦.(html의 tr에 해당)
table-row-group	표의 본체 행 그룹으로 만듦.(html에서 tbody에 해당)
table-header-group	헤더 행 그룹으로 만듦.(html에서 thead에 해당)
table-footer-group	푸터 행 그룹으로 만듦.(html에서 tfoot에 해당)
table-column	표의 열로 만듦.(html에서 col에 해당)
table-column-group	표의 열 그룹으로 만듦.(html에서 colgroup에 해당)
table-cell	표에서 하나의 셀로 만듦.(html에서 td나 th에 해당)
table-caption	표의 캡션을 만듦.(html에서 caption에 해당)
list-item	목록의 항목을 표시할 수 있도록 기본적인 블록박스(항목의 내용이 표시되는 부분)와 표시자 박스(불릿이 표시되는 박스)를 만듦(html에서 li에 해당.)

 

 

 

여러 요소를 배치하는 경우

  1. position

    : 원하는 형태로 배치

 

    * position 속성

static	문서의 흐름에 맞춰 배치
relative	이전 요소에 연결해서 배치
absolute	원하는 위치를 지정하여 배치
fixed	지정한 위치에 고정해서 배치(화면이 잘릴 수도 O)

 

  2. visibility

    : 보이거나 보이지 않게 함 

 

    * visibility 속성

visible (기본값)	요소를 화면에 표시
hidden	요소를 화면에서 감춤.(크기는 그대로 차지)
collapse	표의 행이나 열, 행 그룹, 열 그룹등에서 지정하면 서로 겹치도록 조절
inherit	부모 요소의 visibility 속성을 상속

 

    3. float

    : 요소를 떠 있게 하기

    "떠있다"는 것은 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 의미이다. 화면의 크기가 달라져 문서의 배치가 바뀌면 떠 있는 요소들의 위치에도 영향을 받게 된다. 문서의 레이아웃을 조절하려고 할 때 많이 사용되는데, 요소가 떠 있으려면 위치가 고정되면 안 되기 때문에 position속성에서 absolute를 사용해서는 안된다. 

 

  4. clear

    : float 속성을 무효로 만듦

    float속성을 이용하여 웹 페이지의 요소를 왼쪽이나 오른쪽에 배치하면 그다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다

 

    * clear 속성

left	왼쪽으로 떠 있지 않게 한다.
right	오른쪽으로 떠 있지 않게 한다.
both	양 옆 어디에도 떠 있지 않도록 한다.
none (기본값)	왼쪽 오른쪽 모두에 뜰 수 있다.

 

  5. z-index

    : 쌓는 순서 지정

    0~999 사이의 값으로 지정할 수 있다.  999 가 제일 앞에 표시,  0 이 제일 뒤에 표시된다.