css - 마우스 오버시 변하는 버튼

Development/CSS 2012. 5. 29. 10:19


 



마우스오버 버튼이란 마우스 커서(cursor)를 올렸을 때 이미지가 변하는 버튼을 말합니다. 제 블로그 오른쪽 상단에 있는 RSS구독 버튼이 마우스오버 버튼이라고 할 수 있습니다. 어두운 글씨로 '구독하기'라고 적혀 있는 것이 마우스를 가져가면 밝게 변합니다. 특별한 효과를 준것은 아니고 어두운 글씨가 써져있는 이미지와 밝은 글씨가 써져있는 이미지 2개를 이용한 버튼입니다.

기본적으로 마우스오버 버튼은 2개의 이미지를 사용합니다. 첫번째 이미지는 기본화면일 때 보여지는 이미지이고 두번째 이미지는 마우스를 올렸을 때 보여지는 이미지입니다.

이렇게 두 개의 이미지를 사용했을 때 발생하는 문제는 마우스를 올려서 두번째 이미지(button_over.gif)가 로딩이 되는 시간 때문에 약간의 시간차가 생긴다는 것입니다.

CSS의 background-position속성을 사용하면 이미지 1개만 사용하여 마우스오버 버튼을 만들 수가 있는데, 1개의 이미지를 최초에 로딩하여 마우스오버 시에 이미지 로딩 시간 없이 바로 이미지가 보일 수 있게 합니다.


CSS를 이용해 마우스오버 버튼 만들기

먼저 CSS를 이용해 마우스오버 버튼을 만드는 방법을 알아보도록 합시다.

HTML
<a href="링크주소" class="mButton"><span>마우스오버버튼</span></a>

html문서에 링크를 하나 만들어 주고 class명을 넣어 줍니다. 저는 class명을 mButton으로 설정하였습니다.

CSS
a.mButton{
  display:block; 
  width:버튼의 가로길이px;
  height:버튼의 세로길이px;
  background:url(기본 버튼 이미지 경로) no-repeat;
}
a:hover.mButton{
  background:url(마우스오버 때 보여질 이미지 경로) no-repeat;
}
a.mButton span{
  display:none;
}

:hover는 마우스를 올렸을 때 보여지는 스타일 입니다. 기본적인 스타일은 그대로 물려받기 때문에 마우스를 올렸을 때 변하는 속성(위 소스에서는 background)만 변경해 주면 됩니다. 위 소스는 CSS를 사용한 마우스오버 버튼을 만드는 방법이지만 2개의 이미지를 사용한 것입니다.

이미지 로딩을 없애기 위해 1개의 이미지를 사용하여 마우스오버 버튼을 만든다고 하였는데, 1개의 이미지로 마우스오버 버튼을 만들기 위해 사용하는 것이 background-position속성입니다. background-position속성은 배경 이미지의 시작 위치를 지정하는 속성으로 아래 그림을 보시면 이해가 빠르실 거라고 생각됩니다.

background-position의 기본값은 0, 0입니다.


이해가 빠르신 분이라면 위 그림만 보고도 어떻게 버튼을 만들지 살짝 짐작이 가셨을 겁니다. 버튼을 만들기 위해 아래와 같이 2개의 이미지를 붙여 놓은 듯한 1개의 이미지를 사용할 것입니다.

CSS 마우스오버 버튼에서는 두개의 버튼 이미지가 붙어 있는 1개의 이미지를 사용합니다.


이미지를 만들 때 주의해야 할 사항입니다.


이미지를 만들 때 주의해야 할 사항입니다.(2)


이미지가 만들어졌으면 버튼을 만들어 봅시다. html문서는 위와 같습니다. CSS문서를 봅시다.

CSS
a.mButton{
  display:block; 
  width:버튼의 가로길이px;
  height:버튼의 세로길이px;
  background:url(기본 버튼 이미지 경로) no-repeat;
}
a:hover.mButton{
  background-position:0 -버튼의 세로길이px;
}
a.mButton span{
  display:none;
}

a:hover.mButton의 스타일에 나오는 버튼의 세로길이px은 이미지의 세로 길이가 아닌 화면에서 보여지게 될 버튼의 세로길이입니다. 위에 버튼 이미지를 만들 때 주의해야 할 사항을 설명한 그림을 보시면 잘 이해되시리라 생각됩니다. (앞에 -도 잊지 말고 꼭 붙여줍니다~)

이해를 돕기 위한 그림입니다. 마우스오버 시에는 배경으로 들어간 버튼 그림이 마우스오버 이미지 시작점 부터 보여지게 됩니다.


눈으로 보는 것 보다 한 번 만들어 보는 것이 이해가 빠릅니다. 궁금한 것이 있다면 댓글로 질문해 주세요~ :D

 


http://yongja.tistory.com/97

 





저작자표시

'Development > CSS' 카테고리의 다른 글

CSS - Font-Weight  (0) 2012.05.30
css - background-image 인쇄 문제  (0) 2012.05.30
css - 드롭다운 메뉴  (0) 2012.05.29
CSS - 선택자  (0) 2012.05.23
CSS - 버튼  (0) 2012.05.14
Posted by linuxism
,

css - 드롭다운 메뉴

Development/CSS 2012. 5. 29. 10:10


무료로 멋진 드롭다운 메뉴를 사용하자 (CSS, Javascript 메뉴 소스 모음)

2009/10/06 12:06 프로그래밍/Java Script
크리에이티브 커먼즈 라이선스
Creative Commons License
웹페이지의 상단 네비게이션으로 사용할 수 있는 드롭다운메뉴 모음 입니다. 감각적인 디자인인은 기본이며 CSS버전과 자바스크립트를 이용하는 버전으로 나뉩니다. 모든 소스는 무료로 제공되며 이미지 하단의 해당 출처를 클릭하여 다운 받을 수 있습니다.
 출처(소스다운) : Professional dropdown
 
출처(소스다운) : CSS Drop-Down Menu Framework 
[Demo | Download]

출처(소스다운) : Ultimate CSS only drop-down menu
 
출처(소스다운) : JavaScript Dropdown Menu with Multi Levels
[Demo | Download]
 
출처(소스다운) : All Levels Navigational Menu (v2.2)
 
출처(소스다운) : Smooth Navigational Menu
 
출처(소스다운) : Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
[Demo | Download]
 
 출처(소스다운) : Mega Drop-Down Menu
[Demo]
 
 출처(소스다운) : (mb)Menu
[Demo | Download]
  
출처(소스다운) : Designing the Digg Header
[Demo | Download]
 
  출처(소스다운) : Sliding Jquery Menu
[Demo | Download]
 
 출처(소스다운) : Chrome CSS Drop Down Menu
  
출처(소스다운) : Droppy


출처 - http://heouk.tistory.com/21


저작자표시

'Development > CSS' 카테고리의 다른 글

css - background-image 인쇄 문제  (0) 2012.05.30
css - 마우스 오버시 변하는 버튼  (3) 2012.05.29
CSS - 선택자  (0) 2012.05.23
CSS - 버튼  (0) 2012.05.14
CSS - 정리  (0) 2012.05.13
Posted by linuxism
,

html - viewport

Development/HTML 2012. 5. 28. 18:48


[html5] viewport 지정하기


1. viewport 란 무엇인가?

스마프트폰은 기종별로 화면 크기가 다르다. 그렇다고 모든 단말기에 맞추어서 전용 버전을 개발해야 하는 것은 아니다. 

화면 사이즈에 맞추어서 표시해주는 'ViewPort' 라는 기능을 이용하면 된다.

<meta> 태그로 ViewPort를 지정하면 자동으로 크기가 조절되는 기능이다.


<%--

  - Description : ViewPort 지정하기

  --%>

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />

<title>ViewPort 지정하기</title>

<style>

article, aside, figure, footer, header, hgroup, memu, nav, section { display: block; }

p { font-size: 12px; }

</style>

</head>

<body>

<p>오늘은 맑음</p>

<p>오늘은 참 즐거운 날이었다.</p>

</body>

</html>





2. viewport 사용법

표시 화면의 크기, 확대/축소 허용, 초기 표시 배율을 <meta> 태그에서 지정 할 수 있다.

<meta name="viewport" content="속성1=값1, 속성2=값2,..." />


VIewPort 속성

 속성

기능 

 width

 너비(픽셀)

 height

 높이(픽셀) 

 initial-scale 초기 배율(기본 꽉 찬 화면) 

 minimum-scale

 최소 배율(기본값: 0.25, 범위:0~10.0)

 maximum-scale

 최대 배율(범위:0~10.0) 

 user-scalable

 확대/축소 여부 (yes/no)




[html5] viewport 지정하기


출처 - http://nimba.tistory.com/289





얼마전 참석했던 세미나에서 뷰포트(Viewport)에 대한 언급이 잠시 있었다

모바일 웹 UI 개발시 Display 영역 조절과 관련된 기술요소인듯 하였고 자세한 설명보다는
뷰포트 메타태그 기술방식 위주의 설명이여서 완전한 개념을 파악하기는 힘들었다

뷰포트에 간략히 조사해 보았다

뷰포트가 사파리 기술?
뷰포트를 조사하다 처음 든 의문은, 이것이 애플의 (모바일) 사파리 기술인가? 하는 것이었다

대부분의 인터넷 블로그에서 뷰포트를 소개하면서 아이폰 기반 모바일 웹을 대상으로 하였고
사파리 브라우저가 인식하는 메타태그로 설명하고 있었다

또 다른 자료에서는 아이폰과 안드로이드 심지어 오페라 모바일 등 다른 브라우저에서 권장하는
뷰포트 태그를 제시하기도 하였다

뭐지.. 이거? 뷰포트 태그가 모바일 사파리가 인식하는 개념처럼 하더니 다른 브라우저에서도 
인식되나보네? .. 하면서 살짝 의문이 들기 시작했다

짧은 시간 의문을 품다 문득  떠 오른 생각은 바로 웹킷(WebKit) 이었다
웹킷은 아이폰에 있는 모바일 사파리의 핵심 엔진이며 안드로이드의 브라우저 기반이기도 하다
더불어 웹킷은 다른 모바일 브라우저에서도 사용되고 있는 기술이다
웹킷과 뷰포트의 연결고리가 더 자연스럽다는 생각이 들었다

그렇다. 뷰포트 메타태그는 웹킷 기반의 모바일 브라우저에서 인식 가능한,
표시영역 제어와 관련된 기술요소 였던 것이다

2013.01.15: 위 내용 수정합니다. xCoda 님이 댓글로 안내 해 주셨습니다
아래 댓글 내용 확인 바랍니다.

* 댓글 내용
뷰포트 메타태그는 webkit의 기술이 아니고,
모바일 사파리에서 비표준으로 추가 하여 사용한것을
대부분의 모바일 브라우져에서 채택해서 사용하고 있는 속성입니다.
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag



뷰포트(Viewport)란?
뷰포트라는 개념자체는 모바일 웹에 국한된 것은 아니다
DirectX 나 여타 그래픽, 디자인 관련 기술에 개념적으로 사용된 용어인 듯 하다
그러나 처음 나에게는 낯선 용어였다

뷰포트를 대략 정의하자면,
컴퓨터나 휴대 단말기 등 장치에 Display 요소가 표현되는 영역을 말한다
모바일 웹의 경우 아이폰 사파리 브라우저에서 웹 페이지가 표시되는 영역으로 해석할 수 있다

- 데스크탑 브라우저의 뷰포트와 모바일 브라우저의 뷰포트(출처: 사파리 웹컨텐츠 가이드)


왜 모바일 웹에서 뷰포트가 중요한가?
기존의 데스크탑 웹 개발 환경에서 뷰포트에 대한 개념이 이토록 난무(?)한 적이 있었던가?
요즘 모바일 웹 개발 관련 지식 자료에 반드시 등장하는 것 중 하나가 바로 뷰포트 이다
그럼... 왜 모바일 웹에서는 뷰포트가 중요해 졌을까?

해답은 바로 모바일 웹이 웹 페이지를 브라우징 하는 특징에 기인한다
현재 스마트폰 브라우저는 풀브라우징을 지원한다
풀브라우징은 모바일 환경에서도 데스크탑 환경처럼 웹화면 전체를 자연스럽게 브라우징 할 수 있는
환경을 일컫는다

작은 화면의 모바일 단말기에 웹 페이지 모두 표시하려다 보니 전체적인 페이지 배율 조정이 가해지게 
된다. 즉 화면에 맞도록 전체적으로 축소되어 화면 모두가 브라우징 되지만 페이지에 있는 컨텐츠들의
가독성은 상당히 떨어지게 되는 것이다

웹킷 기반 브라우저의 뷰포트 기본 가로 너비는 980 픽셀이다
그러나 아이폰 사파리브라우저의 가로 너비는 320 픽셀이다
이 말은 980 크기의 페이지를 320화면에 다 보이도록 전체적인 배율축소가 발생된다는 의미이다

아래 그림은 오페라 미니에서 mkexdev.net 을 브라우징한 모습니다
페이지의 가로 폭 모두가 표현되기는 했지만 배율 축소로 인해 글자및 이미지의 가독성은 많이 떨어진다



뷰포트 메타태그를 이용하면 모바일 브라우저의 뷰포트 크기나 배율등을 조정할 수 있어
모바일 웹에 최적의 상태로 화면이 표시되도록 설정할 수 있게 된다


뷰포트 메타태그
뷰포트의 설정을 변경하기 위해 메타태그 형태로 지원된다

아래의 메타태그는 가장 기본적인 형태로 뷰포트의 가로폭을 기본 값인 980픽셀이 아닌
모바일 단말기 장치의 가로 폭으로 설정하겠다는 의미이다(아이폰의 경우 320픽셀)
<meta name="viewport" content="width=device-width" />

이렇게 설정하면 뷰포트의 가로 너비와 단말기의 가로너비가 동일하기 때문에
페이지의 배율 조정이 일어나지 않고 320 너비 만큼만 브라우저에 표시된다
(물론 좌/우 스크롤 기능으로 모든 컨텐츠를 탐색할 수 는 있다)

아래 화면은 뷰포트를 설정하지 않은 것(왼쪽)과 device-width 로 설정한(오른쪽) 결과 화면이다


물론 현재 대상인 mkexdev.net은 모바일 웹을 전혀 고려되지 않은 사이트라 두 가지 모습 
모두 효율적으로 표시되지 않는 모습이다.
다만 뷰포트 메타태그를 이용해 웹 페이지의 화면 표시 배율을 조절할 수 있다는 것을 느끼면 된다

(참고로 뷰포트 메타태그를 지원하지 않는 브라우저에서는 이 설정은 모두 무시된다)

뷰포트 메타태그로 조절할 수 있는 것들
뷰포트 메타태그를 이용하면,
화면의 너비 뿐만 아니라 줌 레벨, 스케일링 가능 여부등이 설정을 조절할 수 있다

아래표는 뷰포트 매타태그의 속성표이다

Property

Description

width

The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000.

You can also set this property to the constants described in “number.”

Available on iPhone OS 1.0 and later.

height

The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels.

You can also set this property to the constants described in “number.”

Available on iPhone OS 1.0 and later.

initial-scale

The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale andmaximum-scale properties.

You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you setuser-scalable to no. Zooming by the user is also limited by the minimum-scale andmaximum-scale properties.

Available on iPhone OS 1.0 and later.

minimum-scale

Specifies the minimum scale value of the viewport. The default is 0.25. The range is from >0 to 10.0.

Available on iPhone OS 1.0 and later.

maximum-scale

Specifies the maximum scale value of the viewport. The default is 1.6. The range is from >0 to 10.0.

Available on iPhone OS 1.0 and later.

user-scalable

Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes.

Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.

Available on iPhone OS 1.0 and later.

Viewport properties (출처: 애플)


다음 두 애플의 자료에서 뷰포트에 대한 상세한 내용이 제공되고 있다
Configuring the Viewport
Supported Meta Tags 


뷰포트 설정 참고
포털 등 기 개발된 모바일 웹 사이트에서 설정한 뷰포트 태그를 참고해 보자

1) m.naver.com
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

2) m.daum.net
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

3) m.nate.com
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

4) m.yahoo.com
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

5) m.aladdin.co.kr
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

어쩜 이렇게 모두 거의 동일할까?
이것이 최적의 구성인가... ㅎㅎ

가로 너비는 장치 너비를 지정하였으며 사용자에 의해 확대/축소가 되지 않도록 설정하고
초기 스케일은 1.0 즉 확대/축소 없는, 본 크기 그대로를 지정하였다


출처 - http://m.mkexdev.net/34

















저작자표시

'Development > HTML' 카테고리의 다른 글

HTML - select 디자인  (0) 2012.06.09
HTML - select  (0) 2012.06.09
html - defer, async 속성  (0) 2012.05.28
html - 이벤트에서 return 의미  (0) 2012.05.23
HTML - rel 속성  (0) 2012.05.15
Posted by linuxism
,

티스토리툴바