x
구솔미디어
내 사이트가 한없이 가벼워지는 그 날까지

단축형 속성을 사용하자

구솔
1233 views, 0 comments, 0 trackbacks
css에 다음과 같은 font속성이 정의되어 있다면,
.font {
font-weight:bold;
font-size:9pt;
font-family:굴림;
line-height:120%;
}

다음과 같이 압축할 수 있습니다.
.f {font:bold 9pt/1.2 굴림;}

속성은 한칸의 여백으로 구분되어 있음을 확인할 수 있죠.
하지만 font속성에는 엄연한 규율이 정해져 있기 때문에 사용자 임의로 나열할 수 없습니다.
font-style -> font-variant -> font-weight -> font-size -> font-family

background속성이 아래와 같다면,
.menu {
background-color:white;
background-image:url(http://www.goosol.net/v2/image/bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0% 0%;
color:black;
}

이것을 다음과 같이 압축할 수 있습니다.
.m {background:#fff url:(../v2/image/bg.gif) no-repeat fixed 0% 0%;color:#000;}

하지만 더 나은 방법은 이미지를 쓰지않고 배경색을 지정하는 것입니다.
.m {background:#fff;color:#000}

margin의 단축속성을 지정할 때,
{margin:위 오른쪽 아래 왼쪽}

의 시계방향 순서로 사용할 수 있습니다.
이 때 margin,border,padding의 반복적으로 적용되는 법칙에 의한 몇 가지 단축형 속성을 사용할 수 있습니다.

1개의 값은 다른 모든 값에 적용된다.
.teduri {margin:10px} = {margin:위 오른쪽 아래 왼쪽}

2개의 값은 위,아래에 적용된다.
.teduri {margin:10px 0} = {margin:위/아래 오른쪽/왼쪽}

3개의 값은 첫번째 위, 두번째는 오른쪽과 왼쪽, 세번째는 아래에 적용된다.
.teduri {margin:10px 0 5px} = {margin:위 오른쪽/왼쪽 아래}

border의 단축형 속성.
흔히 border의 값을 적용할 때,
.teduri {
border-top-width:1px;
border-top-style:solid;
border-top-color:#dbdbdb;
border-right-width:1px;
border-right-style:solid;
border-right-color:#dbdbdb;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#dbdbdb;
border-left-width:1px;
border-left-style:solid;
border-left-color:#dbdbdb;
}

등 각각의 면에 각각의 속성을 지정하여 사용하는 것을 볼 수 있죠.
이 경우,
.t {border:1px solid #dbdbdb}

한줄로 압축이 가능합니다.
border의 경우도 margin처럼 시계방향 순의 반복적용법칙에 의한 단축형 속성을 적용하여 사용할 수 있습니다.
.t {border-width:1px 2px 3px 4px;border-style:solid;border-color:#dbdbdb;}

width값뿐 아니라 style, color 모두 시계방향 순으로 지정할 수 있습니다.
.t {border-width:1px;border-style:solid dotted none solid;border-color:#dbdbdb #ccc none #ddd;}

위의 한 면만 border를 적용하고자 할 때 이렇게 사용할 수 있습니다.
{border-width:1px 0 0 0;border-style:solid;border-color:#dbdbdb}

하지만 한 면만 세팅하고자 할 때는 이 방법이 더 효과적입니다.
{border-top:1px solid #dbdbdb}

padding의 경우도 border나 margin과 같이 시계방향 순으로 값을 적용하면 문서의 용량을 많이 줄일 수 있습니다.
  • 유저가 작성한 글은 그것이 인용되지 않았다면 Creative Commons Public Domain License의 적용을 받습니다.
    퍼가는 경우 저작자 표시, 비영리 목적으로 퍼가기 허용, 저작물의 변경 금지

d41d8cd98f