To become Perfect Front-End Developers Blog

나는 font속성을 잘 쓰질 않는다. 왜? 잘 모르니깐! 하지만 웹퍼블리셔가 모르는 속성이 있으면 되겠는가? 모르면 배워서 써먹어야지!
그래서 요번에 font속성에 알아봤다. font속성은 어떻게 쓰는거며 장단점은 무엇인가!

예시1

font속성을 사용안했을때.

예시2

font속성을 사용했을때.

위의 예시1,예시2의 경우 결과는 동일하다.하지만 예시2가 코드량이 더 적은것을 알 수 있을것이다.

font속성에 대해 더 알아보도록 하자

font-style,font-variant, font-weight는 순서에 상관이 없고 쓰지 않으면 normal로 적용된다. 하지만 font-size와 font-family는 순서대로 나와야 하며 생략은 불가능하다. 만약 font-size와 font-family중 하나라도 없다면 font속성은 적용되지 않는다.

그리고 참고할것은 위에 써있다 시피 font-style,font-variant,font-weight은 없으면 normal(Default)값으로 저장된다는것이다. 부모에서 속성값을 주었는데 자식에 font속성에서 지정해주지 않았다면 부모의 속성값은 자식에서 normal로 표현된다. 참고하자!

CSS3PIE란 IE(익스플로러 이하 IE)6~8 버전에서도 익스9이상의 CSS3를 사용할 수 있게 해주는 HTML Component(HTC)를 가르킨다.
HTC는 IE전용으로 개발되었기 때문에 IE를 제외한 다른 브라우저(파이어폭스,크롬,사파리,오페라등)에서는 작동이 되지 않는다.(JS버전도 있다.)
CSS3PIE에서 지원하는것은 5가지다.

• border-radius
• border-image
• box-shadow
• linear-gradient
• multiple background images

border-radius는 간단히 말하면 네모난 상자의 가장자리를 둥글하게 만드는것이고,
border-image는 테두리를 css2에서 사용했던 solid dotted이런것대신 말 그대로 image를 사용할 수 있게 해주는것이며
box-shadow는 상자에 그림자효과를 주는것이며
linear-gradient는 박스에 그라디언트 효과를 주는것이다.
마지막으로 multiple background images는 여러가지 배경을 사용할 수 있게 해주는것이다.

위의 5가지 모두 CSS3에서 기본적으로 지원을 해주는것들로서 CSS3를 지원하지 않는 IE6~8버전을 위해 나온것이라 할 수 있다.

적용방법은 간단하다. CSS3PIE를 다운받아 압축을 풀고 업로드후 위치를 지정해준후 해당 스타일을 적용시켜주면 된다.

공식홈페이지에 나와있는 예시를 보자

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

ID값이 myElement인 요소에 배경색은 #EEE; 패딩은 2em만큼 border-radius는 1em만큼 준다는 의미이다. 여기서 -moz-,와 -webkit-은 모질라계열,웹키트계열에도 적용을 시키기 위해서다.
일반적으로 여기까지 적용을 시키면 IE9와 파이어폭스, 크롬등에서는 제대로 표현되겠지만 IE6~8에서는 적용이 안되어 있을것이다. 그래서 다음과 같은 문장을 추가한다.

#myElement {
    ...
    behavior: url(PIE.htc);
}

정확히 알맞게 입력되었다면 IE6~8에서도 IE9와 같은 효과를 볼 수 있을것이다.

DEMO

위 그림은 공식홈페이지에 나와있는 CSS3PIE를 적용시킨 DEMO이다.
border-radius는 양수값만 가능하며 box-shadow에서는 Blur size는 양수값만 X,Y offset은 양수,음수값이 가능하다.
X값이 양수면 오른쪽에 그림자가 생기고 음수면 왼쪽에 그림자가 생기며, Y값이 양수면 아래쪽에, 음수면 위쪽에 그림자가 생성된다.
linear-gradient는 뭐 위쪽의 시작색을 고르고 아랫쪽, 끝나는 색을 고르면 적용이 된다.
원하는대로 조절후 Show CSS를 체크해주면 해당 CSS가 나오니 Copy & Paste를 하면 적용이 될 것이다.

CodeAndMore @font-face made simple tool