'Language/CSS'에 해당되는 글 3건

  1. 2015.11.04 [CSS3] @font-face
  2. 2015.09.16 [CSS] LESS
  3. 2010.05.03 [CSS] IE 브라우저 버전별 CSS 적용
2015. 11. 4. 22:35

[CSS3] @font-face

Language/CSS

CSS part (style.css)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
@font-face {
    font-family: 'intro_head_rbase';
    src: url('introheadr-base-webfont.eot');
    src: url('introheadr-base-webfont.eot?#iefix') format('embedded-opentype'),
         url('introheadr-base-webfont.woff2') format('woff2'),
         url('introheadr-base-webfont.woff') format('woff'),
         url('introheadr-base-webfont.ttf') format('truetype'),
         url('introheadr-base-webfont.svg#intro_head_rbase') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
body{font-family: 'intro_head_rbase';}


HTML part (index.html)

?
1
2
3
4
5
6
7
8
9
10
11
<p><!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="huge">abcde</div>
  </body>
</html></p>


Posted by CoolDragon
2015. 9. 16. 17:28

[CSS] LESS

Language/CSS
본인이 느끼는 LESS의 큰 장점은 아래가 아닐까 싶다.
  1. Variables: 변수 선언이 가능
  2. Mixins: 공통적으로 사용될 클래스나 #태그ID 를 변수처럼 선언하여 그 변수를 다른 클래스나 #태그ID의 속성으로 쉽게 적용
  3. Nested Rule(Cascading): 태그나 클래스들을 계층적인 구조로 작업할 수 있어 하위 관계에 있는 태크나 클래스가 무엇인지 쉽게 확인이 가능
  4. Operation: 수학식 연산 작업이 가능
  5. Function: 다양한 내장 함수를 제공


다만 이런 장점이 극대화되기 위해선 개발자와 웹퍼블리셔 또는 웹디자이너간의 협업이 중요할 것으로 생각된다.

웹퍼블리셔(웹디자이너)가 원 그대로 CSS 파일을 전달해 주고 그것을 다시 개발자가 LESS 구조로 변환하는 작업은 시간 낭비가 되지 않을까 싶다.

백엔드 오피스툴 작업처럼 디자이너 없이 HTML, CSS를 개발자가 직접 작업하는 경우나 위의 경우처럼 개발자와 웹디자이너의 LESS 학습으 통하여 작업되는 경우 CSS를 조금 더 직관적이며  프로그램적인 시선으로 바라볼 수 있지 않을까 싶다.


웹 페이지에 LESS에서 제공하는 javascript파일 include하여 런타임에 컴파일(?)을 하거나 grunt와 같은 기능으로 less파일을 css파일로 쉽게 변환이 가능하다.


더 많은 기능과 자세한 사용법은 LESS 사이트에서 확인해 볼 수 있다.

Posted by CoolDragon
2010. 5. 3. 15:48

[CSS] IE 브라우저 버전별 CSS 적용

Language/CSS
출처 : http://virtuelvis.com/archives/2004/02/css-ie-only

IE 버전별 CSS 적용하기
<link rel="stylesheet" type="text/css" href="common.css" />

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

<!--[if lt IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->
<!--[if IE]>
  <style type="text/css">
    @import url(ie-styles.css);
  </style>
<![endif]-->

Posted by CoolDragon

티스토리툴바