좌충우돌 웹퍼블리셔 일기

‘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’ 는 자유롭게 배치할 수 있기 때문입니다.

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

코바코 관리자 포탈에 투입되서 다른 사람이 해 놓은 작업물을 수정하다 스타일 zoom을  발견했다. *를 보아하니 핵같긴 한데 뭐하는 놈인가 해서 찾아보았다.

<div class="out">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
</div>

<style type="text/css">
.left { float:left;}
.right { float:right;}
</style>

위와같이 코딩하면 out 클래스의 division 태그가 높이가 잡히지 않습니다.
.out { *zoom:1; } /* 안의 float 요소까지 높이를 잡아주지만 이것은 ie5~7에서만 가능합니다. */
.out:after { content:""; clear:both; display:block; } /* 높이를 잡아주지만 ie5~7에서 지원하지 않습니다. */
*zoom:1 이 사용되는 영역은 위 두가지 스타일이 모두 적용되어 있을 것입니다.

>>출처 : XE 묻고답하기

위 방법은 zoom 을 이용한 방법이고....아래는 내가 쓰던 방법이다.

<style type="text/css">
.left { float:left;}
.right { float:right;}
.clear{clear:both;}
</style>

<div class="out">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
<div class="clear"></div>
</div>