'대표속성'에 해당되는 글 1건

  1. 2010.04.06 font 와 background 대표속성

font 와 background 대표속성

CSS 2010. 4. 6. 10:51

‘font’ 대표속성 규칙.

‘font’ 는 아래 속성을 대표 합니다.


  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

‘font-size 와 font-family’ 에 밑줄 쫙 친 이유가 있습니다. ‘font’ 에 대한 대표속성을 정의 할 때 주의할 점은 다음과 같습니다.


  • ‘font-size 와 font-family’ 는 반드시 정의 되어야 한다.
  • ‘font-size 와 font-family’ 는 반드시 그 순서를 지켜야 한다.(잘된 예: ’small dotum’, 잘못된 예: ‘dotum small’)
  • ‘font-size 와 font-family’ 는 다른 속성보다 항상 나중에 정의되어야 한다.(잘된 예: ‘bold small dotum’, 잘못된 예: ’small dotum bold’)
  • ‘font-size 와 font-family’ 이외의 속성은 없어도 무방하며 ‘font-size 와 font-family’ 보다 먼저 정의되기만 한다면 더이상 순서에 구애받지 않는다.
  • ‘font-style, font-weight’ 따위를 정의하지 않으면 마크업에서 기본적으로 ‘italic, bold’ 체로 표현되는 서체에 ‘normal’ 스타일이 적용된다. (예: ‘font-style’ 을 정의하지 않으면 ‘em, address’ 따위의 ‘italic’ 속성이 제거되고 ‘font-weight’ 를 정의하지 않으면 ‘h1~h6, th’ 따위의 ‘bold’ 속성이 제거됨.)


라는 점 입니다. ‘font’ 에 대한 대표속성 코딩 규칙에 따르면 최소한 다음과 같은 형식을 가집니다.


#ex1 {font: small dotum;}
#ex2 {font: italic small-caps bold small dotum;}



‘font-size 와 font-family’ 를 반드시 포함하고 있으며 ‘font-size’ 를 먼저 정의하고 ‘font-family’ 를 나중에 정의 하였습니다. 그리고 그것들은 다른 속성들보다 ‘가장 나중에 정의’ 되어 있습니다. 이 규칙을 머리속에 넣기 복잡하다고 생각되시면 ’size & family’ 순이니까 ’si-fa’ 라고 기억하시면 되겠네요. 발음이 좋네요. 욕나오는 것들은 나중에 처리합시다.


‘background’ 대표속성 규칙.




‘background’ 는 아래 속성을 대표 합니다.


  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment
  • #ex {background: #CCC url(dot.png) no-repeat 50% 50% fixed;}



배경색과 배경이미지를 동시에 설정할 수 있습니다. 이런 경우 배경색이 배경이미지보다 아래쪽에 깔립니다. 그리고 배경 이미지의 반복과 배치는 자유롭게 설정이 가능합니다. 위 예제에서 ‘50% 50%’ 부분은 배경이미지의 x좌표와 y좌표에 대한 값 입니다. x좌표와 y좌표를 설정하는 부분을 제외한 나머지 속성값은 그 순서를 지키지 않아도 무방 합니다.


‘list-style’ 대표속성 규칙.

‘list-style’ 은 아래 속성을 대표 합니다.
 

  • list-style-image
  • list-style-position
  • list-style-type
  • #ex {list-style:url(bullet.png) inside;}



사실상 목록에 블릿을 표현하는 방법으로서 예제와 같이 ‘image’ 속성을 사용하는 것보다는 ‘background’ 를 이용하는 방식이 훨씬 더 많은 표현의 자유를 보장 합니다. ‘list-style’ 은 블릿의 위치를 ‘inside’ 또는 ‘outside’ 밖에 설정하지 못하지만 ‘background’ 는 자유롭게 배치할 수 있기 때문입니다.




 >>출처 나라디자인 정찬명님

'CSS' 카테고리의 다른 글

CSS속성 선언 순서  (0) 2010.04.22
display: block과 inline  (2) 2010.04.15
제목이나 디자인적 요소를 감출시..  (0) 2010.04.14
텍스트에 의한 테이블 늘어남 방지  (0) 2010.04.08
스타일 zoom  (0) 2010.04.06
: