내 맘대로 보는 세상 » www http://b.mytears.org 평범한 일상 속의 보석찾기.. Wed, 18 Aug 2010 17:34:30 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 마우스 드래그, 마우스 오른쪽 버튼을 막아둔 것 풀어버리기 http://b.mytears.org/2009/08/2057 http://b.mytears.org/2009/08/2057#comments Sun, 23 Aug 2009 16:51:09 +0000 정태영 http://b.mytears.org/?p=2057 네이버 웹툰에 있는 만화에 링크를 걸려다 마우스 우클릭이 동작을 안하길래, 구글링을 했는데 거기서 나온 스크립트도 네이버 웹툰에서는 제대로 동작을 안했다.

조금 살펴보니 개선할 여지가 있길래 약간의 코드를 더해봤다. 절대 네이버 웹툰에 있는 이미지를 링크하기 위한 목적이었던 건 아니다.

그나저나 세상에 참 이상한 사람 많다. 자기도 어디서 퍼온 거를 자기 블로그에 적어놓는 정도 밖에 안되면서 마우스 우클릭을 막아놨다. ...

Read the rest of this entry...

Related Posts

]]> 네이버 웹툰에 있는 만화에 링크를 걸려다 마우스 우클릭이 동작을 안하길래, 구글링을 했는데 거기서 나온 스크립트도 네이버 웹툰에서는 제대로 동작을 안했다.

조금 살펴보니 개선할 여지가 있길래 약간의 코드를 더해봤다. 절대 네이버 웹툰에 있는 이미지를 링크하기 위한 목적이었던 건 아니다.

그나저나 세상에 참 이상한 사람 많다. 자기도 어디서 퍼온 거를 자기 블로그에 적어놓는 정도 밖에 안되면서 마우스 우클릭을 막아놨다. 드래그도 막아놨다. 그러면서 자기 블로그에는 마우스 우클릭을 막아놓은 것을 푸는 방법이라고 올려놨다. 난 그럼 그걸 보고 직접 쳐서 마우스 우클릭을 해제해야하는건가?

?View Code JAVASCRIPT
javascript:function r(d)
{
	d.oncontextmenu=null;
	d.onselectstart=null;
	d.ondragstart=null;
	d.onkeydown=null;
	d.onmousedown=null;
}
function travesal(item)
{
 	r(item);
	for( var i = 0; i < item.childNodes.length; i++ )
	{
		travesal(item.childNodes[i]);
	}
}
function unify(w)
{
	for(var i=0;i<w.frames.length;i++)
	{
		try
		{
			unify(w.frames[i].window);
		}
		catch(e)
		{
		}
	}
	if( w.document) travesal(w.document);
}
unify(top);
alert("해제 됐음.");

복사해서 즐겨찾기로 만들어두면 유용하게 이용이 가능할 듯…

덧: 이상하게 프레임 관련해서는 아직 오동작하는 것 같다. 좀 더 손을 봐야할 듯 ㅠ.ㅠ

Related Posts

]]> http://b.mytears.org/2009/08/2057/feed 1 CSS로 탭 내비게이션 구현하기… http://b.mytears.org/2009/08/2037 http://b.mytears.org/2009/08/2037#comments Mon, 10 Aug 2009 02:59:33 +0000 정태영 http://b.mytears.org/?p=2037 오랫만에 웹페이지 코딩을 할 일이 있었는데, 탭 내비게이션이 필요한 상황이라 html + css로 탭 내비게이션을 구현해보았습니다.

block 레벨 엘리먼트에 position 속성을 주게 될 경우 새로운 context가 시작되게 되므로 그 하위 엘리먼트에서 position: absolute를 사용할 경우 position을 속성을 지정해둔 상위 엘리먼트의 위치 기준으로 위치가 지정된다는 사실을 이용하는 방법입니다.

border만을 활용하다 보니 디자인 상으로 사소한 문제가 있지만 span 등을 ...

Read the rest of this entry...

Related Posts

]]> 오랫만에 웹페이지 코딩을 할 일이 있었는데, 탭 내비게이션이 필요한 상황이라 html + css로 탭 내비게이션을 구현해보았습니다.

block 레벨 엘리먼트에 position 속성을 주게 될 경우 새로운 context가 시작되게 되므로 그 하위 엘리먼트에서 position: absolute를 사용할 경우 position을 속성을 지정해둔 상위 엘리먼트의 위치 기준으로 위치가 지정된다는 사실을 이용하는 방법입니다.

border만을 활용하다 보니 디자인 상으로 사소한 문제가 있지만 span 등을 활용할 경우 충분히 이쁘게 만들 수도 있을거라 생각합니다.

?View Code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab navigation: css sample</title>
<style>
<!--
 
.tab-navigation {
	position: relative;
	*zoom:1;
}	
 
.tab-navigation li {
	float: left;
}
 
.tab-navigation h2 {
	float: left;
	padding: 7px;
	height: 30px;
	border: 1px solid #ccc;
	border-bottom: 1px solid #000;
}
 
.tab-navigation .selected h2 {
	border: 1px solid #000;
	border-bottom: 1px solid #fff;
}
 
.tab-navigation li:hover h2 {
	background-color: #ccc;
	border: 1px solid #000;
	border-bottom: 1px solid #fff;	
}
 
.tab-navigation li {
	list-style: none;
	margin: 0;
	padding: 0;
}
 
.tab-navigation li li {
	float: none;
}
.tab-navigation ol {
		display: none;
		width: 250px;
		height: 150px;
		background-color: #fff;
}
 
.tab-navigation .selected ol {
	display: block;
	position: absolute;
	left: 0px;
	top:  48px;
}
 
.tab-navigation li:hover ol {
	display: block;
	position: absolute;
	left: 0px;
	top:  48px;
	z-index: 255;
}
 
-->
</style>
</head>
<body>
 
<div id="container">
 
	<h1 id="toc-tab-navigation-css-sample">tab navigation: css sample</h1>
 
	<ul class="tab-navigation">
		<li class="selected">
			<h2 id="toc-tab1">tab1</h2>
			<ol>
				<li>1-1</li>
				<li>1-2</li>
				<li>1-3</li>
				<li>1-4</li>
			</ol>
		</li>
 
		<li>
			<h2 id="toc-tab2">tab2</h2>
			<ol>
				<li>2-1</li>
				<li>2-2</li>
				<li>2-3</li>
				<li>2-4</li>
			</ol>
		</li>
 
		<li>
			<h2 id="toc-tab3">tab3</h2>
			<ol>
				<li>3-1</li>
				<li>3-2</li>
				<li>3-3</li>
				<li>3-4</li>
			</ol>
		</li>
	</ul>
 
</div>
 
</body>
</html>

결과: http://mytears.org/resour...rc/html+css/css-navi.html

다만 absolute를 활용하다보니 부모 엘리먼트의 크기가 하위 엘리먼트에 맞춰 확장되지 않기 때문에 높이를 강제로 고정해야하는 문제가 있는데, 이 부분을 해결하는 것도 고민해봐야겠네요.

확인해본 결과 IE6에서는 li에만 float을 주게 될 경우 h2 때문인지 li의 너비가 100%로 설정되는 문제가 있었습니다. 그걸 피하기 위해 h2에도 float: left를 지정해줘야 했으며, position: relative가 제대로 역할하지 못하는 버그를 해결하기 위해 *zoom: 1;(css hack)을 추가해줘야 했습니다.

덧: IE6에서는 li:hover를 제대로 처리하지 못하므로 약간의 자바스크립트를 이용해야할 것으로 보입니다. 그리고 IE5.5에서 sub contents의 여백이 조금 다르게 보이는 문제가 있네요.

Related Posts

]]> http://b.mytears.org/2009/08/2037/feed 1