작은설탕의 달콤한 인생로그

오늘 소개해드릴 CSS3 속성은요, box-shadow입니다. box-shadow 는 DIV같은 박스에 그림자 효과를 주어서 입체감을 표현할 수 있도록 해주는 속성인데요. 이 속성만 잘 사용해도, 밋밋한 스킨을 좀더 세련되게 꾸밀 수 있어요. 그럼 box-shadow에 대해서 알아볼까요? 지원 브라우저 box-shadow는 IE8 이하의 브라우저를 제외한 모든 브라우저에서 지원되는 기능입니다. 아래 표를 보시죠. CSS 문법 (Syntax) box-shadow: none | h-shadow v-shadow blur spread color | inset | initial | inherit ; none box-shadow의 기본값은 "none"입니다. 즉, 기본적으로 box-shadow가 적용되지 않는다는 ..

요즘 반응형웹 디자인이 적용된 블로그를 둘러보면, 화면의 가로폭을 조정할 때, 사이드바의 크기는 변하지 않으면서 본문의 너비만 줄어드는 이른바 가변폭 이 설정된 블로그를 많이들 보셨을꺼예요. 저도 최근에 티스토리 반응형 스킨을 직접 만들면서 이부분에서 막히길래 많이 검색을 해보았습니다.우선 해결방법이 적용되기 전의 문제점부터 살펴보죠. 문제점 1 : width 속성에 %로 폭설정 우선 가변폭 설정을 하지 않고 본문과 사이드바의 너비를 퍼센트(%)로 지정해 놓으면, 본문과 사이드바가 겹치지는 않지만, 웹브라우저의 너비에 따라 사이드바의 폭도 늘었다 줄었다 하죠. 하지만 사이드바의 특성상, 폭이 일정하게 고정되는 것이 우리의 목표입니다. 사이드바에는 일정한 크기를 갖는 모듈들이 들어가기 때문이죠. 문제점 2..