Eun.code

word-spacing:5pt;    //단어간 간격 조절

letter-spacing:7pt;    //자간 조절

line-height:130%;     //줄간격 조절

(%,px,pt 등등 사용가능)

<div class="aside_quick">
  <strong class="ir_pm">Quick Menu</strong>
  <ul class="list_quickmenu ir_pm">
   <li><a href="#Event01" class="link_quick link_event01">EVENT 01</a></li>
   <li><a href="#Event02" class="link_quick link_event02">EVENT 02</a></li>
   <li><a href="#Event03" class="link_quick link_event03">EVENT 03</a></li>
  </ul>
 </div>

.aside_quick {position:fixed;top:450px;left:50%;width:110px;height:132px;margin-left:490px;background:url(http://i1.daumcdn.net/img-contents/event/promotion/130225_rfonline/img_quick_v1.png)  0 0 no-repeat}
.list_quickmenu {padding:48px 15px 0 15px}
.list_quickmenu li {margin-bottom:3px;}
.list_quickmenu .link_quick {display:block;height:22px;width:80px}
.link_quick:hover {background:url(http://i1.daumcdn.net/img-contents/event/promotion/130225_rfonline/img_quick_v1.png) 0 0 no-repeat}
.link_event01:hover {background-position:-5px -151px}
.link_event02:hover {background-position:-5px -176px}
.link_event03:hover {background-position:-5px -201px}

레이어를 겹쳐서 깔 경우에

아래 깔린 레이어에 position 속성이 들어가있을땐 레이어 위를 뚫고 올라오는 버그.

해결책은, 

레이어가 열리고 닫힐때 position 속성을 재지정해준다.

아래 예시에서는 position:static 으로 했지만

가능하면 position 값을 없애고

z-index:-1 등으로 조절해도 OK.

[ex]

$(".mn1").mouseover(function (e) {
 
 $(".smn01").show();
 $(".prod_clr").css("position","static");
});

$(".sub").mouseleave(function () {
$(".sub").hide();
$(".prod_clr").css("position","relative")
return false;
});

div#container { *zoom:1; }

div#container:after {content:" "; display:block; clear:both;}

word-break:break-all :특수문자를 제외하고 강제 줄바꿈

word-wrap:break-word :특수문자를 포함하고 강제 줄바꿈

word-break:nowrap :width를 지정하였지만 개행이 되지 않기를 원할때.

word-break:keep-all :텍스트가 한글일 경우 띄워쓰기 기준으로 개행.

.hide {

width:0;

height:0;

margin:0;

padding:0;

font-size:0;

line-height:0;

overflow:hidden;

visibility:hidden;

}

ex]

<h1 class="hide">제목</h1>

<span class="hide">배경처리된 이벤트 내용 텍스트.. 주절주절 어쩌구.. 접근성 위해 써준 텍스트</span>