수니리즘

기존 웹 표준 코딩 시에는 특정 볼록 요소에 넓이 값과 높이 값을 설정한 뒤, 해당 요소에 padding과 border를 설정해줘야 할 경우, 넓이와 높이 값에서 padding과 border의 수치만큼 일일이 빼줘야 했습니다. 넓이와 높이 값을 계산하기 편하기 위해 100px 단위로 맞추어 놓았는데 border값 하나 떄문에 해당 요소의 값이 98px로 지저분하게 깨지는 경험을 해보았다면 box-sizing 속성이 아주 반갑게 느껴지실겁니다. 해당 속성을 추가해주면 굳이 넓이 값과 높이 값에서 padding과 border값을 일일이 빼주지 않아도 브라우저가 알아서 해당 수치를 제외한 넓이 값과 높이 값을 계산해주는 편리한 기능입니다. (1) box-sizing : border-box; box-sizing..

기존 XHTML의 코딩 시절에는 특정 사각형 박스의 모서리를 둥글게 하기 위해서 일일이 포토샵으로 배경 이미지를 제작해야 했습니다. 하지만 CSS3에서 새롭게 추가된 border-radius라는 속성을 이용하면 포토샵의 도움 없이 순수 CSS 기술만으로도 간단하게 사각형의 모서리를 둥글게 하거나 원 형태의 모양으로 변형할 수 있습니다. (1) border-radius : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래; 다음의 예제를 통해 border-radius의 기본 개념을 숙지해 보겠습니다. 2개의 태그를 생성합니다. 태그에 넓이와 높이를 각각 300px로 동일하게 적용한 후, nth-child를 이용해 첫 번째 에는 네 모서리의 곡률을 각기 다르게 설정하고 두 번째 에는 네 모서리에 공통으로 해당 넓이의 절반..