@ 특별성이란?
특별성은 중복되는 스타일의 우선적용 순위를 숫자로 계산한 값을 말한다.
특별성 계산을  위해 세자리 숫자를 사용하며 계산 후 10진법으로  높은 숫자인 것이 우선 적용 받는다. 만약, 특별성 계산값이 같은 경우는 코드에서 더 늦게 나오는 스타일을 적용 받는다. 단, 속성 정의 마지막에 !important를 사용하면 특별성 계산값을 무시하고 우선 적용 받는다.

@ 특별성 계산법
- id선택자가 있으면 첫번째 숫자의 값을 1 증가시킨다.
- class나 pseudo-class선택자나 속성선택자가 있으면 두번째 숫자의 값을 1증가시킨다.
- 타입선택자나 pseudo-element선택자가 있으면 세번째 숫자의 값을 1 증가시킨다.

@ 특별성 계산 예
body h1 { color: #dddddd; }                 특별성 002
h1 { color: #dddddd; }                         특별성 001
h1, h2 { color: #dddddd; }                    특별성 001 (각각)
h1.blue { color: #0000ff; }                     특별성 011
h1.blue span { font-weight: bold; }       특별성 012
#id1 { color: #cccccc; }                      특별성 100
#id1.blue { color: #0000ff; }                  특별성 110
#id1.blue p { color: #0000ff; }               특별성 111
#id1.blue p { color: #0000ff !important; }  !important

1. text-align:center 와 상하padding조절로 수직정렬

2. line-height 와 height 조합으로 수직정렬 : 한줄일 때

3. display:table-cell 과 vertical-align:middle 조합으로 수직정렬 : 지원안하는 구브라우저에서 문제됨. 모바일코딩 일때 사용 O.
아래는 핵을 사용하여 IE6~8도 표현 됨.

<style type="text/css">
    .wrap {display:table; height: 200px; *position:relative;}
    .wrap .block {display:table-cell; vertical-align:middle; *display:inline-block; *position:absolute; *top:50%;}
    .wrap .block .pro {*position:relative; *top:-50%;}
  </style>

<div class="wrap">
    <div class="block">
        <ul class="pro">
            <li>상품</li>
            <li>상품</li>
            <li>상품</li>
        </ul>
    </div>
</div>

5. 틀이되는 영역안에 가운데 정렬할 요소를 넣고 빈 span태그 하나를 형제요소로 더 넣어서 인라인블록에 높이 100%(픽셀계산해서 틀과 같이 잡아도 됨)잡고 vertical-align:middle 주는방식으로 합니다.
줄바꿈 방지해야 합니다.

href="javascript:void(0)"

또는 제이쿼리 안에

return false;

넣는다

<a href="#" onclick="aaa(); return false;">Click</a>

return false를 붙히면 기존에 있던 기능들이 없어진다.
즉, a 함수의 기본 속성인 링크의 기능이 수행 되지 않는다.