살아 숨 쉬는 웹

DIV 가로, 세로 가운데 정렬 스타일시트 소스

웹프로그래밍™/XHTML/CSS 2008/09/02 13:25 by 블루비 Total 340 : Today 1 : Yesterday 41

DIV 가로, 세로 가운데 정렬 스타일시트 소스

미리보기

<!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> Div Vertical Align </title>
</head>
<style type='text/css'>
/***
* author : blueb (http://blueb.net/blog/1292)
* date : 2008-09-02
*/
#wrap {
width:100%;
height:600px;
border:1px solid #000;
}
#body {
position: relative;
top:50%;
left:50%;
width:200px;
height:200px;
border:1px solid #000;
margin-top:-100px; /*** width 값의 1/2 ***/
margin-left:-100px; /*** height 값의 1/2 ***/
background:yellow;
}
</style>
<body>
<div id='wrap'>
<div id='body'>
</div>
</div>
</body>
</html>

TAG css, stylesheet, 가로, 세로, 스타일시트, 정렬

0 Trackback : 0 Comment

TRACKBACK :: http://blueb.net/blog/trackback/1292

멀티 엔진을 탑재한 IETester 브라우져

웹프로그래밍™/XHTML/CSS 2008/07/19 22:34 by 블루비 Total 984 : Today 1 : Yesterday 6

IE8 beta 1, IE7, IE6, IE5.5의 랜더링 엔진을 탑재한 브라우져(IETester) 입니다.
웹개발시 편하게 각버전별로 테스트할 수 있어 편할거 같습니다.

IETester

install-ietester-v0.2.2.exe

TAG IE, IE5.5, IE6, IE7, IE8, 멀티브라우져, 브라우져, 익스, 익스플로러

0 Trackback : 1 Comment

TRACKBACK :: http://blueb.net/blog/trackback/1267

CSS(Cascading Style Sheets) hack Table

웹프로그래밍™/XHTML/CSS 2008/05/29 15:27 by 블루비 Total 815 : Today 0 : Yesterday 5

CSS(Cascading Style Sheets) hack Table

TAG hack, stylesheet, 스타일시트, 핵

0 Trackback : 2 Comments

TRACKBACK :: http://blueb.net/blog/trackback/1239

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

웹프로그래밍™/XHTML/CSS 2008/05/08 09:46 by 블루비 Total 917 : Today 0 : Yesterday 4

IE6, IE7, FF2 브라우저에서 작동되는 ul 태그를 이용한 탭(Tab) style 코딩 입니다.
슬슬 웹표준 코딩을 준비하느라.
짬짬이 만들어 본 소스입니다.

미리보기

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>

TAG tab, 웹표준, 코딩, 탭

0 Trackback : 7 Comments

TRACKBACK :: http://blueb.net/blog/trackback/1224

이현국

지나가다가 그냥 한자 적고 갑니다.
현재 활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것 같네요.
또한(샘플이라서 그렇겠지만) a 태그에 title로 보다 상세한 메뉴의 설명이 있으면 더할나위 없이 좋겠어요 :-_ 2008/05/08 12:47
1. 블루비
  
  지적에 감사드립니다.
  지적하신 내용중 의아한 부분이 있어 혹시 보시거든 댓글 부탁드립니다.
  "활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것" 라고 말씀하셨는데 현재 bold 처리 되어 있는 상태이구여 string,em 태그는 추가가 어려울거 같습니다. css로만 컨트롤 되는 부분이기에.. 어떤 의미인지 알고 싶습니다.
  
  그리고 a 태그의 title 부분은 바로 수정해서 추가했습니다.
  아직 웹표준에 대한 인식이 부족한듯 합니다.
  
  좋은 하루 되십시오~!! 2008/05/08 13:26
이현국

style에서의 bold 처리가 아닌, html 에서의 강조 처리를 말하려던 것이었어요.
style에서의 bold로 강조도 좋겠지만, strong 이나 em으로 강조 구문을 추가해 주는것이 시맨틱에도 맞는것 같아요 ^^; 2008/05/08 13:45
1. 블루비
  
  음.. 접근성으로 봤을때는 strong 이나 em으로 처리 해주는것이 맞긴한데
  only css+xhtml 코드로는 어려울거 같네요..
  자바스크립트로 strong or em 엘러먼트를 추가하는 방법을 구현해야 한다는 의미 같은데 접근성을 위해서 꼭 그렇게 해야 하는 것일까요?? 2008/05/08 14:10
gilhyun

꼭 그렇게 해야한다 라는 법(?) 은 없지만 접근성에 도움이 된다면 한번더 고려해볼만 하겠죠?? ㅎㅎ 현국님의 의견은 스타일이 지원안될경우,스크린리더기 사용자등에게 '어떠한메뉴가 현재 활성화 되어있음' 를 표현하고자 strong 으로 표현을 제시하셨던것 같네요 2008/05/14 16:54
1. 블루비
  
  스타일이 지원이 안된다면 저 탭은 무의미하기 때문에 컨테츠 영역에 어떤탭과 연결된것인지 대한 정보를 표시해줘야 할거 같네요..
  웹접근성까지 생각하려니깐 굉장히 어려워 지는거 같습니다. 2008/05/14 20:31
2. 블루비
  
  사이트 정말 좋은데요..
  직업 운영하시는건가요?? 2008/05/14 20:39

IE conditional comment hack

웹프로그래밍™/XHTML/CSS 2008/02/13 14:30 by 블루비 Total 1007 : Today 0 : Yesterday 7

Conditional comment syntax

The conditional comment is just a specially formatted HTML comment that is picked up only by various flavors of Internet Explorer for Windows. You could for instance use this to apply the PNG Behavior

The following conditional comment is being picked up by IE5, IE5.5 and IE6:

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

Targeting IE5

If you need to target IE5 specifically, you do so by appending a version number:

<!--[if IE 5.0]>
  <link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<![endif]-->

Targeting IE5.5

If you specifically need to target IE5.5, it’d look like this:

<!--[if IE 5.5]>
  <link rel="stylesheet" type="text/css" href="ie-5.5.css" />
<![endif]-->

Targeting IE6

The same goes for IE6:

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

IE5 and IE5.5 - box model hacking

If you need to work around IE5’s broken box model, using conditional comments, you can use several alternative syntaxes.

The first syntax will apply the stylesheet to any version of IE whose version number starts with 5:

<!--[if IE 5]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Alternatively, you could say that stylesheets should be applied to any IE version whose version number is less than 6:

<!--[if IE lt 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Order

If you don’t want your IE-specific styles to be overridden by your regular stylesheet, source order is significant; you’d want to specify the common stylesheet first, with the IE-specific versions following:

<link rel="stylesheet" type="text/css" href="common.css" />
 
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
 
<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->
 
<!--[if IE lt  6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

http://www.quirksmode.org/css/condcom.html

http://virtuelvis.com/archives/2004/02/css-ie-only

CSS hacks and filters

TAG IE, stylesheet, 스타일, 주석

0 Trackback : 0 Comment

TRACKBACK :: http://blueb.net/blog/trackback/1092

CSS !important 속성

웹프로그래밍™/XHTML/CSS 2007/12/13 10:07 by 블루비 Total 1375 : Today 1 : Yesterday 2

!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 너무 어려워.

쉽게 배울 수 없을까?

TAG css, important, stylesheet, 스타일

0 Trackback : 1 Comment

TRACKBACK :: http://blueb.net/blog/trackback/1001

HTML5 미리 보기

웹프로그래밍™/XHTML/CSS 2007/12/07 02:15 by 블루비 Total 415 : Today 0 : Yesterday 2

http://www.alistapart.com/articles/previewofhtml5

HTML 4의 구조는 아래와 같지만

HTML5 에서는 ?? 새로운 Tag

TAG HTML5

0 Trackback : 0 Comment

TRACKBACK :: http://blueb.net/blog/trackback/978

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

웹프로그래밍™/XHTML/CSS 2007/12/06 06:57 by 블루비 Total 724 : Today 3 : Yesterday 4

배경 이미지 투명효과 적용

/* 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]

TAG 투명

0 Trackback : 0 Comment

TRACKBACK :: http://blueb.net/blog/trackback/975

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

웹프로그래밍™/XHTML/CSS 2007/11/30 14:21 by 블루비 Total 1037 : Today 1 : Yesterday 3

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>

살아 숨 쉬는 웹 - 블루비 :: Web Developer

'웹프로그래밍™/XHTML/CSS'에 해당되는 글 41건

DIV 가로, 세로 가운데 정렬 스타일시트 소스

TRACKBACK :: http://blueb.net/blog/trackback/1292

멀티 엔진을 탑재한 IETester 브라우져

TRACKBACK :: http://blueb.net/blog/trackback/1267

CSS(Cascading Style Sheets) hack Table

TRACKBACK :: http://blueb.net/blog/trackback/1239

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

TRACKBACK :: http://blueb.net/blog/trackback/1224

IE conditional comment hack

Conditional comment syntax

Targeting IE5

Targeting IE5.5

Targeting IE6

IE5 and IE5.5 - box model hacking

Order

TRACKBACK :: http://blueb.net/blog/trackback/1092

CSS !important 속성

TRACKBACK :: http://blueb.net/blog/trackback/1001

HTML5 미리 보기

TRACKBACK :: http://blueb.net/blog/trackback/978

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

TRACKBACK :: http://blueb.net/blog/trackback/975

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