01. Top 10 Ways to Turn Hyperlinks into Hyper-Clicks

CSS에서 가장 멋진 속성중의 하나가 Position 입니다.
또한 브라우저(browser) 좌표계의 이해가 필요한 속성이기도 합니다.
위치와 관련된 속성은 크게 position과 float으로 나타낼 수 있는데 CSS를 공부하는데 있어 이해력(?)을 가장 필요로 하며, 동시에 재미있습니다.

position의 속성값으로는 기본값인 static, 옵션으로 relative, absolute 그리고 fixed 가 있습니다.
옵션값인 relative와 absolute은 단어 뜻에서 느끼겠지만, 상대적인 위치와 절대적인 위치 값을 가질 수 있도록 합니다.  고정값을 갖도록 하는 fixed는 효과적으로 사용할 수 있지만 IE에서 사용하는데 문제점이 있습니다.(DOM 속성인 offset 값을 이용하여 IE에서 fixed 효과를 나타낼 수 있습니다.)

상대값과 절대값에서 가장 중요한 것은 기준값을 파악하는 것입니다. 
즉 어디가 좌표계의 영점(0,0)이냐는 것입니다.
상대값은 원래 있어야 할 자리로 부터의 이동(shift)된 거리를 나타내게 되니 해당 개체의 왼쪽 상단지점이 영점이 됩니다. 
반면에 절대값은 해당 개체가 위치한 좌표계의 영점에서 부터의 이동을 나타냅니다.  기본적인 브라우저의 영점은 왼편 상단지점을 (0,0)으로 합니다.

여기서 재미있는것은 상대값이 지정된 곳에서의 좌표계 영점은 브라우저 영점에서 상대값이 지정된 영역의 영점으로 이동한다는 것입니다.
그래서 상대값이 지정된(postion:relative;) 영역이하의 식구들은 브라우저 영점을 옮겨진 이곳으로 이해하고 있다는 것이지요.. 가령 브라우저 영점으로 부터 상대값이 주어진 영역의 위치가 (50,50)으로 옮겨졌고 그 내부에 절대값이 지정(position:absolute;)된 개체가 있다면 이 절대값의 기준이 되는 좌표가 (0,0)이 아니라 (50,50)으로 바꿔지게 됩니다.

예를들면,
<style type="text/css">
 .absolute {
      position: absolute;
      left: 50px;
      top: 50px;
 }
 .relative {
      position: relative;
      left: 50px;
      top: 50px;
 }
</style>

<div class="relative">
 <div class="absolute">
  <img src="image.jpg" alt="alt" title="title" />
 </div>
</div>

에서 이미지의 시작점 좌표는 (100,100)이 됩니다.

[출처] www.smashingmagazine.com

HTML에서 제공되는 버튼 형식은 일반적인 <a>과 <form> 식구들 중 <input type="button">, <input type="submit">, <input type="image"> 가 있다.  그리고 Form 버튼 형식에서 개선된 <button> 이 있다. <button>은 Form 버튼과 달리 내부에 이미지 등의 Content를 가질 수 있다.

<button name="submit" value="submit" type="submit">
    Send <img src="/images/logo.gif" alt="wow" />
</button>

Form 버튼의 아쉬운 점이 있는데, 모양이 좀 빠진다..
Sprite 형태의 여러가지 버튼 이미지를 넣고 싶은데 잘 안된다.

아래 글은 이와 관련하여 해결방법을 소개하고 있는데 꽤 유익하다..^^
URL : trevordavis.net/blog/tutorial/input-vs-button/

데이터(or Content)를 비동기로 다루기 위한 방법으로 많이 사용되는 <iframe> .
inline frame으로 구분된다.

<Iframe> 선택 [참고 - quirksmode.org]

document.getElementById('testiframe2').src
document.getElementById('testiframe2').location.href
frames['testiframe2'].src
frames['testiframe2'].location.href
frames[1].location.href
frames[1].window.location.href
frames['testiframe2'].window.location.href
target="testiframe2" (loads only page2, not page1)

* How to Inject Custom HTML and CSS into an iframe

- window.postMessage  
- Cross-window messaging with postMessage  
- Cross-Domain Messaging With postMessage  

제일 귀찮은 것중의 하나가 바로 테이블(table) 이지 않나 싶습니다.

테이블에 나타낼 데이터가 아주 많을 경우 <thead>와 <tfoot>의 내용은 보이도록 하면서 <tbody> 영역을 스크롤 하도록 하면 꽤 보기 좋은데, 다음의 예에서 이를 생각해 볼 수 있겠습니다.

01. www.cssplay.co.uk/menu/tablescroll.html

01. Explorer z-index bug (IE6, IE7)
URL : www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

왼편이 IE, 오른쪽이 Firefox 브라우저

단계(step)를 표현할 때 좋은 방법이 있다..
Step Menu 라는.. (demo)

)

step-menu.zip

HTML문서에 대한 내용이 아니라 정보에 대한 메타데이터(meta data)를 HEAD 태그내에 표시할 수 있도록 하고 있다. [http://www.w3.org/TR/html401/struct/global.html#edef-META]
모든 브라우저에서 반영되는 내용이 아니므로 자주 사용되는 형식을 예제로 올린다.
* [wikipedia] Meta element
* Metatags.info


01. 종류
01) HTTP-Equivalent META Information
- 서버측 환경설정과 관련된 정보를 싣고 있다.
- encoding, cache 등 사용자 브라우저(User Agent)의 구동환경 정보를 담고 있다.

02) Arbitrary User-Specified META Information
- 사용자와 관련된 정보를 표시한다. (keywords for indexing, name of author etc.)


02. 속성 형식
- http-equiv : HTTP Response의 Header Name
- name : 메타정보의 이름
- content : http-equiv, name 속성과 관련된 내용 구성을 위한 정보 (#rquired 반드시 필요한 속성)
- scheme : 컨텐츠 형식 (예. ISBN)


03. 구성 예
01) 만든이 정보
<meta name="author" content="ian graham" />

02) HTML Editor 정보
<meta name="editor" content="html superpro" />
<meta name="generator" content="editplus" />

03) 서치엔진을 위한 정보 (SEO)
<meta name="keywords" lang="ko" content="지도,지역광고,지역정보" />
<meta name="keywords" lang="en" content="holiday, greece, sunshine" />
<meta name="robots" content="noindex,nofollow" />
[표준페이지 설정] <link rel="canonical" href="http://www.site.com" />

04) 문서 Encoding 정보
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />

05) 문서 유효기간 설정
<meta http-equiv="expires" content="tue, 20 aug 1996 14:25:27 gmt" />

06) Reloading Time 설정 (여기선 10초), Redirect 설정
<meta http-equiv="refresh" content="3;url=http://www.daum.net" />
<meta http-equiv="refresh" content="10" />

07) Cache 관련 정보
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />


08) 기타
<meta http-equiv="imagetoolbar" content="no" />
<meta name="revised" content="Hege Refsnes, 6/10/99" />
<meta scheme="isbn" name="identifier" content="0-8230-2355-9" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />


* [google] rel="canonical"

CSS를 활용하여 쉽게 제작하는 버튼입니다.
버튼 이미지 위에 표현되는 제목에 따라 버튼 이미지를 제작하기 보다는 사용을 위한 종류의 이미지 (버튼 밑그림) 에 Text 제목을 사용하여 만들어지는 버튼은 활용범위가 넓을 뿐 아니라 버튼 제작시간을 단축시켜 줍니다.  많은 예제중 활용도가 높아 보이는 방법을 소개합니다.
그러나 IE6에선 다소 문제가 있습니다. ㅠㅠ

01. CSS Sliding Door using only 1 image
URL : http://kailoon.com/css-sliding-door-using-only-1-image/
아쉬운점 : 이미지 모서리를 투명처리 하면 겹쳐 나타나게 되어 보기가 쩜 그렇다..

02. CSS Oval Buttons
URL : www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/

03. Rediscovering the Button Element
URL : particletree.com/features/rediscovering-the-button-element/

04. Bold CSS Buttons
URL#1 : www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/
URL#2 : www.dynamicdrive.com/style/csslibrary/item/vista_aero_buttons_menu/

05. Recreating the button
URL : stopdesign.com/archive/2009/02/04/recreating-the-button.html