CSS로 만드는 금속성 버튼과 사이트

2011/10/02 16:21 :: 도아(@doax) :: 컴퓨터 :: 인쇄 :: PDF 저장 :: 읽은횟수(2/11/10416)

금속성 단추

기술이 발전하다 보니 과거 그림으로만 가능하던 것들이 이제는 CSS로도 간단히 구현된다. 그림을 이용하는 것 보다 CSS를 이용하는 것이 훨씬 효과적이다. 그림을 수정하는 것 보다는 글자를 바꾸는 것이 훨씨 쉽기 때문이다. 따라서 이번 글에서는 CSS로 금속성 단추를 구현하는 방법을 알아 본다. 직접 만든 것은 아니고 그라데이션 단추처럼 다른 사이트에 올라온 코드를 소개하는 것이다.

CSS로 만든 금속성 단추

마 전 블로그에      CSS만으로 그라데이션 단추를 만드는 방법을 소개했다. 글을 보면 알 수 있지만 그라데이션 단추(Gradiention Button)는 포토샵과 같은 그래픽 도구를 사용하지 않아도 간단히 만들 수 있다. 그런데 인터넷을 돌다 보니 또 재미있는 사이트    가 보인다. 이번에는 CSS만으로 금속성 단추    를 만들었다. 금속성 단추라고 하면 선뜻 이해가 되지 않을 수 있다. 잘 이해가 되지 않는다면 바로 밑의 상자를 보면 된다. 얼핏 보면 그림 같지만 그림이 아니라 모두 CSS로 구현한 금속성 단추다.

다만 사이트    에 올라온 CSS 코드와 블로그에서 사용한 코드는 약간 다르다. 실제 모습을 보려면 CSS3 Brushed-Metal Buttons    를 방문하면 된다. 블로그에 소개한 단추는 각각 사용하기 위해 주변 음영을 없앴다. 또 어떤 코드를 사용한 것인지는 이 글 마지막 부분을 참조하기 바란다.

i

브라우저에 따른 차이

다만 이 단추를 사용할 때 주의할 것이 하나 더있다. 웹킷 기반 브라우저((Chrome), 사파리(Safari))로 봐야 가장 예쁘게 보인다. 개발한 분이 웹킷 브라우저를 사용하는 것인지 아니면 Internet Explorer 9나 불여우(Firefox)가 CSS 3 지원이 미약한 것인지 모르겠다. 그러나 이 두개의 브라우저는 다소 품질이 떨어진다. 불여우는 그나마 나는데 Internet Explorer 9는 금속성 단추라기 보다는 그냥 둥근 단추같다.


크롬에서 볼 때

에서 보면 가장 잘 보인다. 진짜 금속성 단추같다. 또 클릭하면 단추에 불이 들어오는 것처럼 동작한다.


불여우로 볼 때

불여우(Firefox)로 볼 때도 키패드는 금속성 단추처럼 보인다. 그러나 가장 왼쪽의 비행기 아이콘은 그냥 단추처럼 보인다.


IE 9로 볼 때

금속성 단추라기 보다는 그냥 단추같다. 다만 기능이 이렇게 떨어지는 브라우저를 우리나라 사람들 10명중 9명이 사용하고 있다는 것 자체가 신기주1하다.


IE 8로 볼 때

Internet Explorer 8로 보면 아예 없다. 단추는 아예 보이지 않고 4개의 영역만 보인다. 결국 우리나라 사람 중 90%가 IE를 사용하기 때문에 CSS로 금속 단추를 구현해도 우리나라 사람들은 거의 대부분 볼 수 없는 셈이다.


IE 6로 볼 때

Internet Explorer 6로 보면 처참하다. IE8은 그래도 비슷한 크기라도 되는데 IE 6에서는 형체를 알아 보기 힘들다주2.

어디에 쓸까?

이런 단추를 어디에 쓸까 싶다. 그런데 블로그에 글을 올릴 때 의외로 쓰임새가 있을 것 같았다. 보통 어떤 절차를 설명할 때 OL 태그와 같은 목록 태그를 많이 사용한다. 그런데 OL로는 표현할 수 있는 한계가 많다. 따라서 번호 아이콘을 사용하는 사람도 많다. 아이콘을 사용할 때의 문제는 모든 번호가 제공되지 않는다는 점이다. 즉, 아이콘이 10번까지 있으면 11을 표시할 수 있는 방법이 없다. 그런데 CSS로 단추를 사용하면 번호를 늘리는 것이 얼마든지 가능하다.

위의 단추도 CSS를 이용해서 만든 것이다. 즉, CSS로 구현되었기 때문에 원하는 형태의 단추를 상당히 쉽게 만들 수 있다. 또 위의 비행기 아이콘처럼 그림 문자를 바꾸면 비슷한 형태의 아이콘을 상당히 많이 만들 수 있다. 따라서 다음처럼 글자를 바꾸면 포토샵과 같은 그래픽 도구로 작업을 해야 만들 수 있는 아이콘도 쉽게 만들 수 있다. HTML 태그에 ☎♨♧♥♤♣♡♠와 같은 그림 문자만 입력하면 훌륭한 아이콘이 만들어지는 셈이다.

사용하기

이 단추 CSS를 사용하는 방법은 상당히 쉽다. CSS3 Brushed-Metal Buttons    에서 정의한 스타일만 가져오면 되기 때문이다. 다만 앞에서 설명한 것처럼 웹킷 엔진(WebKit Engine)에서 가장 잘표현되기 때문에 인터넷 탐색기(Internet Explorer)나 불여우(Firefox)에서는 웹킷 엔진을 사용하는 브라우저 만큼 잘 표현되지 않는다. 아무튼 이 스타일을 사용하고 싶다면 다음 코드를 먼저 자신의 스타일 파일에 추가하면 된다.

원래 style.css    와 prefixes.css    로 분리되어 있던 코드를 하나로 합치고 단추 주변의 음영을 제거했다. 또 다른 이유때문에 원래 클래스로 정의된 metal(.metal)을 ID(#metal)로 바꾼 코드다. 원본 CSS는 style.css    과 prefixes.css    를 클릭하면 받을 수 있다.

코드보기

위에 코드를 스타일시트에 추가한 뒤에는 다음처럼 ID와 클래스(Class)를 이용해서 참조하면 된다. 즉 ID로 metal을 정의하고 사용할 단추 형태에 따라 클래스를 붙여 사용하면 된다. 위의 아이콘 중 가장 둥근 형태의 아이콘은 id="metal" class="radial"를 사용하면 되고 숫자 패드는 id="metal" class="linear"를 사용하면 된다. 마지막 i단추는 id="metal" class="linear oval"로 참조하면 된다.

<button id="metal" class="radial">✈</button>
<button id="metal" class="linear">2</button>
<button id="metal" class="linear">1</button>
<button id="metal" class="linear">0</button>
<a href="http://offree.net/"  id="metal" class="linear oval" title="도아세기">i</a>

이 블로그에서는 불릿 대용으로 이 단추를 사용하기 위해 mini라는 클래스도 추가했다. 이 클래스를 이용하면 단추의 크기가 줄어든다. 이 클래스도 쓰고 싶은 사람은 다음 코드를 추가하면 된다.

button#metal.linear.mini { 
    min-width: 60px;
    font-size: 2em;
    min-height: 50px;
    margin-right: 3px;
}

남은 이야기

원래 쓰려고 했던 글은 커피에 대한 글이다. 그런데 다른 문제로 여기 저기 돌아 다니다 보니 조금 엉뚱하게 이 글을 올리게 되었다. 연이어 구글 클릭을 추적하는 방법을 올릴까 생각 중이다.

관련 글타래

잠깐만
  1. 국내 웹 환경의 문제점도 있지만 기본적으로 사용자들의 인식이 너무 부족하다고 생각한다.
  2. 분명히 IE 6으로 접속하고 글도 읽지 않고 금속성 단추가 어디있냐고 따지는 가 있을 것으로 본다.
2011/10/02 16:21 2011/10/02 16:21
글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
오늘의 이슈 다음에서 새롭게 서비스하고 있는 소셜픽입니다. OpenAPI로 구현한 것이 아니라 가끔 사라질 때도 있습니다. 또 10분에 한번 갱신하기 때문에 실제 소셜픽과 약간 차이가 있습니다.
  1. 1
    검색: 792,502 트윗: 8,538 댓글: 17,189
    시민사회단체들의 소송과 기자회견도 줄을 잇고 있다. ◇대학가, 시국선언·촛불집회 이어져 20일 대학가에 따르면 서울대 총학생회가 시국선언을 추진 계획을 밝히고 나섰다. 서울대 총학은 지난 16일 운영위원회를 열어 국정원 선거개입 관련 시국선언
  2. 2
    검색: 1,242,958 트윗: 4,123 댓글: 9,452
    박지성과 김민지 SBS 아나운서가 18일 서울 강남구 한강시민공원에서 데이트를 즐기고 있다. 제공 | 스포츠서울닷컴 '한국 최고의 신랑감' 박지성이 드디어 짝을 찾았다. 그의 열애설에 19일 대한민국은 하루 종일 들썩였다.
  3. 3
    검색: 82,075 트윗: 6,063 댓글: 4,980
    국정원 게이트 국정조사를 요구하며 서명 받았던 표창원 전 교수가 10만명의 청원서를 들고 새누리 당사 앞에 나타났습니다. 기자회견 갖은후 새누리당 민원국장에게 청원서를 전달 했답니다. 온라인 청원서를 무시할 경우 서울광장에 10만명
  4. 4
    검색: 143,463 트윗: 3,466 댓글: 4,796
    빠른 시일 내에 장재구 회장의 배임 외에 또다른 혐의에 대해 검찰에 추가로 고발할 예정이다. 한편 한국일보 노사는 18일 편집국 폐쇄 조치 이후 처음으로 만났으나 구체적 논의는 없었다. 이상석 부회장의 요청으로 이뤄진 정상원 노조 비대위원장과
  5. 5
    검색: 64,335 트윗: 1,548 댓글: 3,593
    117곳은 협력업체가 도급을 받아 운영하고 있다. 17일 민주사회를위한변호사모임 등이 공개한 자료를 보면 삼성전자서비스는 협력업체 직원들의 채용부터 해고까지 실질적으로 관여한 것으로 나타났다. 협력업체 직원들의 임금도 고정된 월급이 아니라,
  6. 6
    검색: 51,097 트윗: 606 댓글: 3,251 부회장은 "차기 감독이 한국 축구 발전을 위해 시간을 가질 수 있게 협회 차원에서 배려할 것"이라고 밝혀 2018년 월드컵까지 염두에 둔 장기계약이 이뤄질 수도 있음을 시사했다. 홍 감독은 거스 히딩크 전 한국 감독이 이끄는 러시아 프
  7. 7
    검색: 14,928 트윗: 2,665 댓글: 779 축사였다. "아프리카 속담에 '빨리 가려면 혼자 가고, 멀리 가려면 함께 가라'고 했다." 민주당 김한길 대표가 19일 무소속 안철수 의원의 싱크탱크인 '정책네트워크 내일'의 창립기념 심포지엄의 연단에 올라 꺼낸 마무리 발언이다. 김
  8. 8
    검색: 14,284 트윗: 89 댓글: 2,630 축구대표팀에 거액의 포상금이 지급된다. 대한축구협회는 지난 12일 의결한 대로 2014 브라질월드컵 본선 진출에 성공한 대표팀에 규정에 따라 포상금을 지급한다고 밝혔다. 이에 따라 한국을 브라질로 이끈 최강희 감독은 1억5천만원의 보너스를
  9. 9
    검색: 13,840 트윗: 1,756 댓글: 958 MB정권의 보금자리주택 사업을 떠맡으면서 부채비율이 급등한 토지주택공사와 비슷한 처지다. 그러나, 공공기관 경영실적평가에서 두 기관의 운명은 엇갈렸다. LH의 경우 평균 이하인 C등급을 받은 반면, 수자원공사는 B등급을 유지했다.
  10. 10
    검색: 1,227 트윗: 1,304 댓글: 997 남양유업과 피해대리점주 간 협상이 결국 결렬됐다. 남양유업 피해대리점협의회는 남양유업과의 교섭을 전면 파기하고 남양유업에 대한 고소·고발을 확대하는 등 총력
오늘의 글
인기있는 글
컴퓨터 팁&텍
트랙백 많은 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베
Trackback, Comments ( 2 )

Trackback

Trackback Address :: http://offree.net/trackback/3507

Facebook

댓글 · 통계
ResponseRSS Feed

Comments

  1. 해커 C 2011/10/03 11:59

    CSS를 이용한 버튼 잘보고 갑니다 ㅎㅎ

    역시... 죽일넘의 익스플로러..... 파폭도 아직 완벽하게 보이진 않나봐요..

    파폭을 주력 브라우저로 사용중인데.. 파폭혹시 7버전때 인가요? ㅎㅎ

    점심 맛있게 드세요~

    perm. |  mod/del. |  reply.
    • 도아 2011/10/03 14:52

      예. 7버전입니다. 빨라졌다고 해서 설치를 했는데 크롬 때문인지 몰라도 빠르다는 느낌은 없더군요. 다만 CSS는 파폭의 문제일 수도 있지만 저 CSS를 만든 분이 파폭 사용자가 아니라 빠트렸을 수도 있습니다. 본문에 있는 내용이지만요.

      perm. |  mod/del.

쥐박쥐가 아니라면 소통하세요!!!

(옵션: 없으면 생략)

글을 올릴 때 [b], [i], [url], [img]와 같은 BBCode를 사용할 수 있습니다.

• '귀하는 차단...'라는 메시지는 왜 뜰까? • 비밀글로 질문하지 않았으면 합니다.
• 도아의 QnA(성상담 아님) • 블로그 운영을 위한 후원을 받습니다!