[CSS]Property Dictionary 속성 사전 박스모델편

박스모델

margin 

엘리먼트(콘텐트)와 엘리먼트(콘텐트) 사이의 간격을 지정한다.

값	px, vh, em, rem, %, inherit, auto, ...
value	width[길이]
similar	margin-top, margin-buttom, margin-left, margin-right

  ex)

div{ margin : 20px; }

  Tip)

  margin: 10px 20px -> margin (top & bottom) (right & left);

  margin: 10px 20px 30px 40px;  -> margin: (top) (right) (bottom) (left);

  마진을 갖는 박스들이 입전해 있는 경우 수평 마진은 통합되지 않지만, 수직 마진은 통합된다.

      

   ※  float된 박스나 절대적 위치 혹은 상대적 위치의 박스는 마진들도 통합되지 않는다.

  

---

padding

엘리먼트의 여백을 지정한다.

값	px, vh, em, rem, %, inherit, auto, ...
value	width[길이]
similar	padding-top, padding-buttom, padding-left, padding-right

  ex)

div{ padding : 20px; }

녹색 부분이 padding 영역이고 색상은 content 색상과 동일

  Tip)

  padding : 10px  -> padding : (top & bottom & right & left);

  padding : 10px 20px -> padding : (top & bottom) (right & left);

  padding : 10px 20px 30px -> padding : (top) (right & left) (bottom);

  padding : 10px 20px 30px 40px;  -> padding : (top) (right) (bottom) (left);

  (margin과 같음)

  

  padding 영역의 색상 또는 이미지는 엘리먼트의 'background' 속성으로 지정한다.

---

border

앨리먼트의 가장 자리선을 나타낸다.

* []value

값	[border-width] [border-style] [color]
value	border-width, border-style, color
similar	border-top, border-buttom, border-left, border-right  border-width-top, border-width-top, border-width-top, border-width-top  border-style-top, border-style-top, border-style-top, border-style-top  border-color-top, border-color-top, border-color-top, border-width-top  outline, box-shadow

  Value)

  border-width

      ○ thin - 얇은 두께

      ○ medium - 중간 두께

      ○ thick - 두꺼운 두께

      ○ width[길이] - px, vh, em, rem, %, inherit, auto, ...

  border-style

      ○ solid- 선

      ○ dashed- 짧은 선의 패턴

      ○ dotted - 점선

      ○ double - 두개의 선

      ○ groove - 캔버스에서 안쪽으로 조각되어진 것처럼. ridge의 반대

      ○ ridge - 캔버스에서 튀어 나와 조각되어진 것처럼. groove의 반대

      ○ inset - 안쪽으로 입체감. outset의 반대

      ○ outset - 밖으로 입체감. inset의 반대

      ○ none - 없음.

      ○ hidden - 테두리 숨기기

  border-color

      ○ color[색상] - red, blue, gray, #000000, rgba, ...

      ○ transparent 

  ex)

div{ border : 1px solid blue; }

  Tip)

  border-style: 우선순위 hidden > double > solid > dashed > dotted > ridge > outset > groove > inset > none 

  

  얇은 테두리와 넓은 테두리가 겹칠경우 얇은 테두리는 없어진다. 

---

box-shadow

앨리먼트의 그림자 효과를 나타낸다.

* ()옵션, []value

값	(inset) [horizon-offset] [vertical-offset] ([blur]) ([spread]) ([color])
value	horizon-offset, vertical-offset, blur, spread, color
similar	none

  Value)

   

   inset : 앨리먼트안쪽으로 그림자 만들기

      ○옵션

   horizon-offset : 그림자 좌우 이동, 음수 가능, 필수

      ○ width[길이] - px, vh, em, rem, %, inherit, auto, ...

   vertical-offset : 그림자 위아래 이동, 음수 가능, 필수

      ○ width[길이] - px, vh, em, rem, %, inherit, auto, ...

   blur : 그림자 테두리 흐리기 

      ○ width[길이] - px, vh, em, rem, %, inherit, auto, ...

   spread : 그림자 크기 조정 (0 == 엘리먼트 크기)

      ○ width[길이] - px, vh, em, rem, %, inherit, auto, ...

   color

      ○ color[색상] - red, blue, gray, #000000, rgba, ...

  ex)

div{ box-shadow : 5px 10px 15px 20px darkblue  ; }

  Tip)

   multiple shadow

      ○ box-shadow : 5px 10px blue, 10px 10px red, 15px 15px green; 가능

   inset

      ○ box-shadow : inset 5px 10px blue;

---

box-sizing

박스모델 크기의 기준을 설정한다.

값	border-box, content-box, inherit
value	none
similar	none

  ex)

div{ box-sizing : border-box; }

  Tip)

   content-box

      ○콘텐트 영역을 기준으로 크기를 정한다. 박스 width: 100px ,  height: 100px이다. border 속성 10px을 주었다.

   border-box

      ○테두리를 기준으로 크기를 정한다. 박스 width: 100px ,  height: 100px이다. border 속성 10px을 주었다.