본문 바로가기

웹(IT) 정보/css14

css3 box-sizing 박스코딩의 기본 디자인을 다 해놓고 나면 코딩에 앞서 다음과 같은 일들이 많이 벌어져 고민을 항상 많이 했었던 부분이죠. 내용물 내용물 내용물 각 박스가 200px이고 패딩이 10px 보더가 있다면 다음과 같이 되는데요 실질적으로 사이즈는 1+10+200+10+1 = 223이 됩니다. div {width:200px; height:50px; padding:10px; border:1px solid #ccc} 그래서 200에서 22를 뺀 178을 width 값을 줘야 실질적으로 디자인된 200px에 맞게 코딩이 됐었죠.. 그래서 이 부분을 보완하기 위한 css3 새로운 속성이 있는데요. 바로 박스사이징입니다. box-sizing:border-box padding과 border를 width에 포함하여 계산해서 웹에 적용시켜줍니.. 2017. 6. 26.

css3 background-size 기존 css에서 추가된 css3추가 속성인 background-size에 대해서 알아봅시다. 기존에 백그라운드 이미지를 사용하였을때 정렬 및 위치만 사용할수 있었는데 background-size 이 속성을 추가하여 더욱 편리한 백그라운드를 사용할 수 있는데요. 우선 다음과 같은 속성이 있습니다. auto 기본값. 배경 이미지의 너비와 높이가 포함되어 있습니다. lenth 배경 이미지의 너비와 높이를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 주어지면 두 번째 값은 "auto"로 설정됩니다. percentage 부모 요소의 백분율로 배경 이미지의 너비와 높이를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 주어지면 두.. 2017. 6. 25.

이전 1 2 3 다음

티스토리툴바