슬라이드로 보는 CSS Inheritance 메뉴얼

Posted at 2009/07/29 18:21 // in 웹표준, 웹접근성™/CSS // by 블루비
슬라이드로 보는 CSS Inheritance 메뉴얼
자~~ 한번 시작해볼까요??

CSS Inheritance - a simple step-by-step tutorial
View more documents from Russ Weakley.
2009/07/29 18:21 2009/07/29 18:21

댓글을 남겨주세요.

[로그인][오픈아이디란?]

CSS 몇가지 팁(TIP)

Posted at 2009/07/23 13:07 // in 웹표준, 웹접근성™/CSS // by 블루비

1. focus, active 시 생기는 outline 제거(IE 제외)

a:active, a:focus{
outline:none;
}

2. 링크 태그 자동 줄 바꿈 막기

a {
white-space:nowrap;
}

3. 파이어폭스에서 스크롤바 항상 보이기

html{
overflow:-moz-scrollbars-vertical;
}

4. 프린트시 페이지 나누기

h2 {
page-break-before:always;
}



2009/07/23 13:07 2009/07/23 13:07

댓글을 남겨주세요.

[로그인][오픈아이디란?]

[CSS] 스크롤에 반응하지 않는 고정된 배너

Posted at 2008/10/10 11:42 // in 웹표준, 웹접근성™/CSS // by 블루비
브라우저의 하단(스타일속성에 따라 위치변경가능)에 고정된 배너를 사용할때 이 스타일을 쓰면 아주 유용할거 같습니다.
스크롤바가 생겨도 항상 같은 위치에 보여집니다..

미리보기

사용자 삽입 이미지
검정색 배너는 스크롤이 되어도 항상 고정된 상태로 보여진다..
(스크립트로 할경우 스크롤시 잔상이 남지만 스타일의 경우 잔상없이 깔끔하게 구현이 가능하다)




<!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>
<title> Position Fixed </title>
<style type='text/css'>
#content {
padding:10px;
font-size:9pt;
background:#FFFF00;
width:50%;
height:1000px;
}
#fix1 {
padding:10px;
font-size:9pt;
color:#fff;
background:#000;
width:100px;
height:100px;
position:fixed;
right:0;
bottom:0;

}
</style>
</head>
<body>
<div id="content">Scroll Layout</div>
<div id="fix1">Fixed</div>

</body>
</html>
2008/10/10 11:42 2008/10/10 11:42

댓글을 남겨주세요.

[로그인][오픈아이디란?]

CSS(Cascading Style Sheets) hack Table

Posted at 2008/05/29 15:27 // in 웹표준, 웹접근성™/CSS // by 블루비
CSS(Cascading Style Sheets) hack Table
사용자 삽입 이미지
2008/05/29 15:27 2008/05/29 15:27
  1. azki

    2008/05/30 13:41 [수정/삭제] [답글]

    ㅎㅎ 좋은 자료네요.

댓글을 남겨주세요.

[로그인][오픈아이디란?]

ul 태그와 CSS를 이용한 탭(Tab)코딩

Posted at 2008/05/08 09:46 // in 웹표준, 웹접근성™/CSS // by 블루비
IE6, IE7, FF2 브라우저에서 작동되는 ul 태그를 이용한 탭(Tab) style 코딩 입니다.
슬슬 웹표준 코딩을 준비하느라.
짬짬이 만들어 본 소스입니다.

미리보기

FF2, IE6, IE7 (ul+css) 탭 코딩
http://blueb.net/dev/css/tabs.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Tabs</title>
<!-- Description	: XHTML Tabs style code [ IE6 , IE7 , FF2]	-->
<!-- Author			: blueb(http://blueb.net/blog)						-->
<!-- Date			: 2008-05-08											-->
</head>
<body>
<script type='text/javascript'>
function tabs(idx){
	for(i = 1; i <= 3 ; i++ ){
		document.getElementById('tab'+i).className = "";
		document.getElementById('content'+i).className = "content hide";
	}
	document.getElementById('tab'+idx).className = "active";
	document.getElementById('content'+idx).className = "content show";
}
</script>

<!--[if IE 6]>
<style type='text/css'>
/* IE 6 */
div.tabs-area {
	position:relative;
	z-index:2;
	width:100%;
	height:48px;
	padding:0;margin:0;overflow:hidden;
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:0;
	top:-1px;
	border-top:1px solid #D3D9E6;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type='text/css'>
/* IE 7 */
div.tabs-area {
	position:relative;
	z-index:2;
	height:48px;width:100%;padding:0;margin:0
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:1px;
	top:-2px;
	border-bottom:1px solid #D3D9E6;
}
</style>
<![endif]-->
<!--[if !IE]>-->
<style type='text/css'>
div.tabs-area {
	position:relative;
	z-index:2;
	width:100%;
	height:45px;
	padding:0;margin:0;overflow:hidden;
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:1px;
	top:-1px;
	border-top:1px solid #D3D9E6;
}
</style>
<!--<![endif]-->
<style type='text/css'>

ul.tabs {
	padding:0px;margin:0px;
	z-index:2;
}

ul.tabs li {
	list-style:none;
	display:inline;
	height:50px;
}

ul.tabs li a {
	padding:5px 20px 3px 20px;
	border:1px solid #D3D9E6;
	text-decoration:none;   
	font-size:9pt;
	line-height:30px;
    color:#4B69AF; 
    background:#E9ECF2;
}

ul.tabs li a:hover {   
    background:#E8FFFF;
}

ul.tabs li a.active {   
    background:#fff;
    color:#4B69AF;   
    border:1px solid #D3D9E6;    
    border-bottom: 1px solid #ffffff;   
	padding:10px 20px 3px 20px;
	font-weight:bold;
	line-height:70px;
}

div.content {
	/* 컨텐츠 영역 박스 스타일 지정 하는곳 */
}
div.show		{ display:block;}
div.hide		{ display:none; }

</style>
<h3>IE6, IE7, FF2 Tabs</h3>
<div>
	<div class='tabs-area'>
		<ul class='tabs'>
		<li> </li>
		<li><a id='tab1' title="Tab1 Desc" href="javascript:tabs('1');" class='active'>Tab 1</a></li>
		<li><a id='tab2' title="Tab2 Desc" href="javascript:tabs('2');">Tab 2</a></li>
		<li><a id='tab3' title="Tab3 Desc" href="javascript:tabs('3');">Tab 3</a></li>
		</ul>
	</div>
	<div class='tabs-line'></div>
</div>


<div id='content1' class='content show'>
	<h1>Content 1</h1>
</div>
<div id='content2' class='content hide'>
	<h1>Content 2</h1>
</div>
<div id='content3' class='content hide'>
	<h1>Content 3</h1>
</div>

</body>
</html>
2008/05/08 09:46 2008/05/08 09:46
  1. 이현국

    2008/05/08 12:47 [수정/삭제] [답글]

    지나가다가 그냥 한자 적고 갑니다.
    현재 활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것 같네요.
    또한(샘플이라서 그렇겠지만) a 태그에 title로 보다 상세한 메뉴의 설명이 있으면 더할나위 없이 좋겠어요 :-_

    • 블루비

      2008/05/08 13:26 [수정/삭제]

      지적에 감사드립니다.
      지적하신 내용중 의아한 부분이 있어 혹시 보시거든 댓글 부탁드립니다.
      "활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것" 라고 말씀하셨는데 현재 bold 처리 되어 있는 상태이구여 string,em 태그는 추가가 어려울거 같습니다. css로만 컨트롤 되는 부분이기에.. 어떤 의미인지 알고 싶습니다.

      그리고 a 태그의 title 부분은 바로 수정해서 추가했습니다.
      아직 웹표준에 대한 인식이 부족한듯 합니다.

      좋은 하루 되십시오~!!

  2. 이현국

    2008/05/08 13:45 [수정/삭제] [답글]

    style에서의 bold 처리가 아닌, html 에서의 강조 처리를 말하려던 것이었어요.
    style에서의 bold로 강조도 좋겠지만, strong 이나 em으로 강조 구문을 추가해 주는것이 시맨틱에도 맞는것 같아요 ^^;

    • 블루비

      2008/05/08 14:10 [수정/삭제]

      음.. 접근성으로 봤을때는 strong 이나 em으로 처리 해주는것이 맞긴한데
      only css+xhtml 코드로는 어려울거 같네요..
      자바스크립트로 strong or em 엘러먼트를 추가하는 방법을 구현해야 한다는 의미 같은데 접근성을 위해서 꼭 그렇게 해야 하는 것일까요??

  3. gilhyun

    2008/05/14 16:54 [수정/삭제] [답글]

    꼭 그렇게 해야한다 라는 법(?) 은 없지만 접근성에 도움이 된다면 한번더 고려해볼만 하겠죠?? ㅎㅎ 현국님의 의견은 스타일이 지원안될경우,스크린리더기 사용자등에게 '어떠한메뉴가 현재 활성화 되어있음' 를 표현하고자 strong 으로 표현을 제시하셨던것 같네요

    • 블루비

      2008/05/14 20:31 [수정/삭제]

      스타일이 지원이 안된다면 저 탭은 무의미하기 때문에 컨테츠 영역에 어떤탭과 연결된것인지 대한 정보를 표시해줘야 할거 같네요..
      웹접근성까지 생각하려니깐 굉장히 어려워 지는거 같습니다.

    • 블루비

      2008/05/14 20:39 [수정/삭제]

      사이트 정말 좋은데요..
      직업 운영하시는건가요??

댓글을 남겨주세요.

[로그인][오픈아이디란?]

CSS !important 속성

Posted at 2007/12/13 10:07 // in 웹표준, 웹접근성™/CSS // by 블루비
!important 속성은 2중 선언된 스타일에 대해서 우선순위로 만들어준다.
다시 말해 같은 아이디,클래스,태그에 대한 2중선언이 있을시 !important 된것을 기준으로 스타일이 적용 되며,
이중 선언된 스타일에 대해서는 무시되어 진다.

아래의 예를 보면서 이해 하기 바란다.

!important 없이 #p2 아이디에 대해서 2중선언 되어 있다 첫번째 #p2의 글자 색상은 blueb 2번째 #p2의 색상은 color 아래의 결과에서 나타나듯이 마지막에 선언된 red 의 스타일이 적용되어 진다.
<style type="text/css">
#p1, #p2 { color: blue; }
#p2 {color:red;}
</style>

안녕. 나는 블루비야.

CSS 너무 어려워.

쉽게 배울 수 없을까?

안녕. 나는 블루비야.

CSS 너무 어려워.

쉽게 배울 수 없을까?



위코드와 다른 점은 !important가 추가 되었다.
결과에서 보듯시 마지막 #p5 의 글자 색상은 red 이다 하지만 결과는 blue 스타일이 적용되어있다.
<style type="text/css">
#p4, #p5 { color: blue !important; }
#p5 {color:red;}
</style>

안녕. 나는 블루비야.

CSS 너무 어려워.

쉽게 배울 수 없을까?

안녕. 나는 블루비야.

CSS 너무 어려워.

쉽게 배울 수 없을까?

2007/12/13 10:07 2007/12/13 10:07
  1. 감사합니다 ^^

    2008/02/08 13:13 [수정/삭제] [답글]

    아... !important;의 의미를 찾던중... 이런거였구나~~
    하고 알게됐네요 ^^;
    조촐하지만... 덧글이라도 감사의 말씀을 남김니다.

  2. 항상 행복

    2008/11/26 13:54 [수정/삭제] [답글]

    저도 알게 되어 기쁩니다. 항상 행복하세요.

  3. ㅎㅎ

    2009/07/20 14:11 [수정/삭제] [답글]

    감사합니다~ 잘보고 가요~~^^

댓글을 남겨주세요.

[로그인][오픈아이디란?]

[CSS] 배경 이미지 투명효과 적용

Posted at 2007/12/06 06:57 // in 웹표준, 웹접근성™/CSS // by 블루비
배경 이미지 투명효과 적용
/* IE Only */
#element-id {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[image url]', sizingMethod='scale'),alpha(opacity=85);
}
/* Other brower */
html>body #element-id {
    background:url([image url]) transparent; opacity:0.85; 
}
[/css]
2007/12/06 06:57 2007/12/06 06:57

댓글을 남겨주세요.

[로그인][오픈아이디란?]

하단 고정 레이어 스타일(CSS) 따라하기

Posted at 2007/11/30 14:21 // in 웹표준, 웹접근성™/CSS // by 블루비
Ray Of Light for TT - darklight ver.1.1(사용자 수정본) 의 스킨을 보시면 하단에 메뉴 레이어가
위치하고 스크롤이 되어도 위치가 고정되어 있습니다.

이와 같은 하단에 고정된 레이어를 사용하고자 하시는 분들을 위해 샘플소스를 만들어 봤습니다.
꼭 하단에만 위치할 필요는 없죠.. 소스를 고치면 상단 고정도 가능합니다.

샘플보기


<!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=euc-kr" />
<title> new document </title>
<style type='text/css'>
* {
margin:0;
padding:0;
}

html {
height:100%;
width:100%;
overflow:hidden;
}

body {
margin:0;
padding:0;
}

#header {
color:#fff;
position:absolute;
bottom:0pt;
height:50px;
background-color:#000;
width:90%;
z-index:99;
}
#body {
width:100%;
position:absolute;
height:100%;
overflow-y:scroll;
}
</style>
</head>

<body>
<div id='header'>
하단 고정 레이어
</div>

<div id='body'>
<div style='height:400px;background-color:#660000;width:300px'>
</div>
<div style='height:400px;background-color:#FF6600;width:300px'>
</div>
<div style='height:400px;background-color:#00FF66;width:300px'>
</div>
</div>


</body>
</html>
2007/11/30 14:21 2007/11/30 14:21
  1. ggo

    2008/03/12 16:50 [수정/삭제] [답글]

    세상에..ㅠㅁㅠ 님 정말 감사해요
    완전 몇시간동안 해매고 있었는데,,
    구글에서 살짝 검색하니,
    바로 첨에 님 글 봤습니다..
    완전 금방 해결하고 감사합니다.
    복받으실꺼에요~~!!!ㅎ

  2. 우우우

    2010/04/19 17:57 [수정/삭제] [답글]

    IE8에서는 잘되는데, IE7에서는 마우스로 스크롤이 안되고, IE6에서는 스크롤자체가 안됩니다.

댓글을 남겨주세요.

[로그인][오픈아이디란?]

Safari CSS Reference

Posted at 2007/11/30 02:09 // in 웹표준, 웹접근성™/CSS // by 블루비
사용자 삽입 이미지
http://developer.apple.com/documentatio ··· dex.html

사파리 브라우져 CSS(StyleSheet) 레퍼런스


2007/11/30 02:09 2007/11/30 02:09

댓글을 남겨주세요.

[로그인][오픈아이디란?]

CSS hack

Posted at 2007/06/06 14:07 // in 웹표준, 웹접근성™/CSS // by 블루비
ie6와 ff 같은 display를 보여주기 위해서 스타일 hack을 사용할 수 있다.
ff는 표준을 따른지만 ie6은 그렇지 못하기 때문에 더욱 신경을 써야 한다.
사실 display는 ie6이 깔끔하게 잘 처리 해준다. 웹표준이라고 다 좋지많은 않은 느낌이랄까~!

두가지 방법이 있지만 첫번째 방법은 이상하게 잘 안되는 경우도 있더라.
왜 그런지 아직은 알지 못하지만, 첫번째 방법이 안되면 두번째 방법으로 하면 해결이 되어 그나마 다행이다.


첫번째 방법

/* 여기까지는 모든 브라우저에서 실행됨 */
voice-family: "\"}"";
voice-family: inherit;

/* 여기서부터는 IE6에서는 실행안됨 */




두번째 방법

#header {margin-bottom:3em} /* ie는 여기 스타일 적용*/
html>body #header {margin-bottom:1em} /* 다른 브라우저는 여기 스타일 적용 */




관련 글 링크
http://www.nmindplus.com/2006/06/28/css-hack/

2007/06/06 14:07 2007/06/06 14:07

댓글을 남겨주세요.

[로그인][오픈아이디란?]

input 한/영 변환 style

Posted at 2007/04/13 12:50 // in 웹표준, 웹접근성™/CSS // by 블루비

<input type="text" name="" value="" style="ime-mode:disabled;">

-----------------------------------------------------------------

ime-mode의 옵션

auto : 한/영 변환이 자유롭게 된다. 지정안한것과 똑같다..

active : ime를 거치기 때문에 기본에서 한/영키를 한번 누른것 같은.. 즉 한글기본이된다. 그리고 이또한 한/영변환이 자유롭다.

inactive : ime를 거치지 않고 입력이 된다. 즉 영문기본이고 한/영변환이 자유롭다.

disabled : 영문기본으로 한/영변환이 안된다. 즉 영문, 숫자만 입력되고 한글입력은 불가능.

------------------------------------------------------------------


Syntax

HTML { ime-mode : sMode }
Scripting [ sMode = ] object.style.imeMode

Possible Values

sMode String that specifies or receives one of the following values.
auto Default. IME is not affected. This is the same as not specifying the ime-mode attribute.
active All characters are entered through the IME. Users can still deactivate the IME.
inactive All characters are entered without IME. Users can still activate the IME.
disabled IME is completely disabled. Users cannot activate the IME if the control has focus.


출처 : http://cafe.naver.com/expand82/32
2007/04/13 12:50 2007/04/13 12:50

댓글을 남겨주세요.

[로그인][오픈아이디란?]

IE7 CSS Hack

Posted at 2006/10/11 22:28 // in 웹표준, 웹접근성™/CSS // by 블루비

원문 : 행복한고니@블로그

관련내용출처 : http://nanobox.chipx86.com/blog/2006/04/easy-css-hacks-for-ie7.php

IE6 이하에 대해서는
* html { … } 와 같이 사용합니다.

IE7 이하에 대해서는
*:first-child+html { … } * html { … } 와 같이 HTML 을 선택합니다.
(두개 같이 쓰라는 말 같습니다)

IE7 에만 적용되게 하려면
*:first-child+html { … } 와 같이 HTML 을 선택합니다.

IE7 과 기타 최신의 브라우저를 위해서는 (IE6 제외)
html>body { … } 와 같이 body 를 선택합니다.

IE7 을 제외한 최신의 브라우저에는
html>/**/>body { … } 와 같이 body를 선택합니다.


2006/10/11 22:28 2006/10/11 22:28
,

댓글을 남겨주세요.

[로그인][오픈아이디란?]

폰트 사이즈 px/em/%/pt 비교표

Posted at 2006/09/12 23:36 // in 웹표준, 웹접근성™/CSS // by 블루비

Approximate Conversion from Points to Pixels

(and Ems and %)

Here's a chart that converts points to pixels (and ems and %). It's an approximation, which will depend on font, browser and OS, but it's a good starting point.



PointsPixelsEmsPercent
6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%


출처 : http://www.reeddesign.co.uk/test/points-pixels.html
2006/09/12 23:36 2006/09/12 23:36

댓글을 남겨주세요.

[로그인][오픈아이디란?]

display & visiblity 차이점 과 속성

Posted at 2006/08/31 21:44 // in 웹표준, 웹접근성™/CSS // by 블루비

출처 : http://blog.naver.com/cf54e/110007901264

DIV레이어를 보임/숨김 속성을 지정하는데 있어 display 와 visiblity 두 가지 모두를 사용한다.
그런데 속성의 차이, 즉 display 와 visiblity 의 차이는 극명하게 달라진다.

[CODE] <div style="display:;"> [/CODE] 의 경우에는 div 레이어 위치값을 지정하지 않더라도, div레이어가 있는 위치에서 지정되어진 크키만큼 보임/숨김을 나타내지만,

display 스타일 속성은 개체가 표현되는가를 나타내는 문자열이다.

block개체가 블럭엘레멘트로 표현된다.
none개체가 디스플레이되지 않는다.
inline디폴트이며, 개체가 내용의 크기에따라 인라인 엘레멘트로 표현된다.
inline-block개체가 인라인으로 표현되지만, 개체의 내용은 블럭 엘레멘트로 표현된다. 인접 인라인 엘레멘트는 간격을 허용하며 같은 라인에 표현된다.
list-itemIE6 이후, 개체가 블럭엘레멘트로 표현되고 목록항목 마크가 추가된다.
table-header-group테이블의 머릿부분(header)이 항상 모든 줄과 줄의 구룹보다 먼저, 그리고 윗 제목(caption) 아래 디스플레이된다. 이 머릿부분은 테이블이 확장된 각 페이지에 디스플레이된다.
table-footer-group테이블의 바닥부분(footer)이 항상 모든 줄과 줄의 구룹 다음, 그리고 바닥 제목(caption) 위에 디스플레이된다. 이 바닥부분은 테이블이 확장된 각 페이지에 디스플레이된다.

[CODE] <div style="visiblity:;"> [/CODE] 의 경우엔 display값과는 다르게 div레이어가 나타내져야 하는 위치값을 반드시 지정해야만 한다는 것이다.

inheritIE NS디폴트이며, 다음 모체 개체의 속성로부터 상속받는디.
hiddenIE개체가 감춰진다.
hideNS감춘다.
showNS보인다.
visibleIE개체가 보인다.

display 속성의 경우엔 div 레이어 자체가 주어진 공간에 나타내어지지만, visiblity 속성의 경우엔 지정한 위치값에 오버랩되어 나타나기 때문이다.

2006/08/31 21:44 2006/08/31 21:44

댓글을 남겨주세요.

[로그인][오픈아이디란?]

IE 전용 - 그림자 CSS filter

Posted at 2006/04/11 00:11 // in 웹표준, 웹접근성™/CSS // by 블루비

<style>
#box {
background-color:#FF3300;
left:10px;
top:10px;
position: absolute;
width: 250px;
height:100px;
border: 1px Solid WindowFrame;
background: Infobackground;
color: InfoText;
font: StatusBar;
font: Status-Bar;
padding: 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color="#777777", Direction=135, Strength=3);
z-index: 10000;
}
</style>

<div id=box>&nbsp;</div>

2006/04/11 00:11 2006/04/11 00:11

댓글을 남겨주세요.

[로그인][오픈아이디란?]