box-shadow로 inline border 만들기

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

2023.11.13