요소의 크기 웹 프론트 개발을 하다보면 각 요소들이 고정 크기를 가져서 width나 height를 지정핼줄때도 있지만, 간변적인 크기의 성질을 가져서 width와 height를 지정하지 않을때도 있습니다. 그런 경우 요소들은 box-model에 의해서 컨텐츠의 크기, padding, margin등에 의해서 크기와 영역이 결정됩니다. 마찬가지로 border의 크기도 box-model 영역 계산에 포함이 되기때문에, border가 있고 없느냐에 따라 요소의 크기가 달라지게 되고 이로인해 예상치못한 디자인 사이드 이펙트가 발생할 수 있습니다. 이런 사이드 이펙트를 방지하기 위해서 요소에게 항상 동일한 border-width를 가지도록 할수 있지만, 그렇게되면 매번 디자인 작업을 할때마다 border를 신경써야..

box-shadow 값 요소들 box-shadow는 2개~4개의 length값과 옵션으로 color값과 inset값으로 구성됩니다. 각 값들의 순서는 아무렇게 입력해도 상관없지만 length값들은 꼭 연속해서 입력되야하며 2개이상의 값이 필요합니다. // 올바른 입력 box-shadow: red inset 3px 3px 1em .2em; box-shadow: red 3px 3px 1em .2em; box-shadow: red 3px 3px 1em .2em inset; box-shadow: 3px 3px 1em red; // 틀린 입력 box-shadow: 3px 3px red 1em; box-shadow: 3px red; color는 그림자 색상, inset은 그림자 반전 여부 그리고, length값들은..