[phil-story] Always Fighting 

'웹'에 해당되는 글 1건

  1. 2010.03.04 [css] 버튼 스타일 (box)
카테고리 없음 | Posted by 낫기법필 2010. 3. 4. 13:25

[css] 버튼 스타일 (box)

div를 이용한 간단 버튼 스타일 css


* btnstyle.css

 
.btntype {
    cursor:hand;
    height:20px;
    border:1px solid gray;
    padding:2px;
    text-align:center;
}
.btntype a:link {text-decoration: none}     /* unvisited link */
.btntype a:visited {text-decoration: none}  /* visited link */
.btntype a:active {text-decoration: none}   /* selected link */
.btntype a:hover {text-decoration: none}    /* mouse over link */

a:link {text-decoration: none}          /* unvisited link */
a:visited {text-decoration: none}       /* visited link */
a:active {text-decoration: none}        /* selected link */
a:hover {text-decoration: underline}    /* mouse over link */

위에서 보는 내용은 흔한 내용이라 별 것은 아니지만,
하나의 스타일에 중복으로 사용을 어떻게 하느냐에 주안점을 두면 될 듯 하다.
왜냐? 몰랐던 것이라... ^^;

.btntype 이라고 하나의 스타일을 지정을 했는데, 그 안에는 anchor 태그가 있었기 때문에 해당 anchor는 타 anchor와는 다르게 스타일을 주고 싶었다.

해서 나온 방법이
.btntype a:link{...} 과 같은 형식인 것이다.

.btntype으로 지정된 스타일에 anchor의 스타일을 저렇게 지정을 해준다는 것이다.
테스트 결과 잘 된다.


* btnstyle.html

<div id="dbtnClose" class="btntype" style="width:80px;"><a href="<%=sUrl%>">닫 기</a></div>
<div id="dbtnClose2" style="width:80px;"><a href="<%=sUrl%>">닫 기2</a></div>
<div id="dbtnExcel" onclick="ex_change();" class="btntype" style="width:80px;">엑 셀</div>

html 에서 btnstyle.css에서 지정한 것을 이용하여 class 지정하여 주면
"닫기2"와는 다르게 "닫기" 가 anchor 임에도 .btntype 스타일 내에 지정된 스타일로 표현이 된다.


참고할만한 사이트 :
- http://www.w3schools.com/css/default.asp
- http://www.echoecho.com/css.htm
- 이 외에도 검색하면 좋은 사이트 많다.

[출처] 자작~

티스토리툴바