프로그램/html,css2010. 4. 23. 16:31

[css-웹표준] div layout sample(샘플 예제)


[div_layout01.htm]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="t1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">Table Layout</div>
<div id="page">
<div id="menu">
<h1>Menu List </h1>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<div id="contents">
<h2>Page Title </h2>
<div id="text">Layout Test Page. </div>
</div>
<div id="links">
<h2>Links</h2>
</div>
</div>
<div id="copy">Copyright</div>
</body>
</html>


[div_layout01.css]
h1 { width:190px; padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#999999; border-bottom:3px solid #FFFFFF; margin:0}
h2 { padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#666666; border-bottom:3px solid #FFFFFF; margin:0}
#logo { font-family:Arial; font-size:100px; color:#FFFFFF; font-weight:bold; background:#000000; width:760px; padding:20px}
#page { position:relative; width:800px; overflow:visible}
#menu { position:relative; padding:20px; width:200px; background:#666666; float:left; height:400px }
#menu ul { margin:0; padding:0}
#menu li { width:190px; padding:5px; border-bottom:1px dotted #FFFFFF; font-family:Arial; font-size:14px; font-weight:bold; color:#FFFFFF; list-style:none}
#contents { position:relative; padding:20px; background: #999999; font-size:12px; font-family:Verdana; color:#FFFFFF; width:380px; float:left; height:400px}
#text { padding:5px; line-height:150%; font-family:Verdana; text-align:justify}
#links { position:relative; float:left; background:#CCCCCC; width:100px; padding:20px; clear:right; height:400px}
#copy { position:relative; clear:both; background: #333333; font-family: Verdana; font-size:50px; font-weight:bold; color:#FFFFFF; width:760px; padding:20px }

 

Posted by 은둔고수
프로그램/html,css2010. 2. 19. 11:40

[css] IE(익스플로러) 버전별 호환성 문제 해결 - Hack(핵)


[소스 예]
<!--[if lt IE 6]>
<script src="IE6.js" type="text/javascript">
<![endif]-->


[설명]
IE : [if IE] - IE일 경우에만 처리한다.
IE 버전 : [if IE 7] - 해당 버전의 IE일 경우에만 처리한다. (5, 5.5, 6, 7, 8)
! : [if !IE]  IE가 아닐 경우에만 처리한다.
lt : [if lt IE 5.5]  IE버전이 5.5미만일 경우에만 처리한다.
lte : [if lte IE 6]  IE버전이 6이하일 경우에만 처리한다.
gt : [if gt IE 5]  IE버전이 5초과일 경우에만 처리한다.
gte : [if gte IE 7]  IE버전이 7이상일 경우에만 처리한다.
() : [if !(IE 7)]  조건을 결합하여 처리한다. IE버전이 7이 아닐경우에만 처리한다.
& : [if (gt IE 5)&(lt IE 7)]  조건을 AND로 결합하여 처리한다. IE버전이 5초과 7미만일 경우에만 처리한다.
| : [if (IE 6)|(IE 7)]  조건을 OR로 결합하여 처리한다. IE버전이 6 또는 7일 경우에만 처리한다.

참고> CSS HACK(핵)을 사용하는 법도 있다. 

Posted by 은둔고수
프로그램/html,css2009. 12. 7. 13:38

ie(익스플로러) iframe 배경색상 변경하기?


ie에서 iframe 배경색상을 설정하기 위해
style="background-color:#000000;" 등 이런저런 방법을 다 동원해보지만
설정을 할 수가 없다.
다만 FF(fire fox:파이어폭스)에서는 가능하다.

그럼,
아이프레임(iframe) 배경색상을 어떻게 하면 바꿀 수 있을까?

iframe영역내 화면은 별도로 이루어져있으며 해당 화면의 영향을 받기 때문에
예를 들어 src="a.html" 이고 배경 색상이 빨간색이면 iframe 영역이 빨간색이 된다.
따라서 배경색상을 설정할 수 없으며 다만, iframe 페이지의 배경색을 투명하게
할 수 있는 속성을 지원을 하기 때문에 이 속성을 이용할 수 있다.

allowtransparency

소스 예>
<iframe src="a.html" allowtransparency="true"></iframe>
참고: Internet Explorer 5.5 버전 이상부터 지원 

Posted by 은둔고수
프로그램/html,css2009. 11. 2. 22:01

css table 만들기 3




[table3.html]
<html>
<head>
<link rel="stylesheet" type="text/css" href="table3.css" />
</head>

<body>

<table class="boardList">
<tr>
 <th class="number">번호</th>
 <th class="title">제목</th>
 <th class="writer">작성자</th>
 <th class="date">작성일</th>
 <th class="viewCnt">조회수</th>
</tr>
<tr>
 <td>1</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
<tr>
 <td>2</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
<tr>
 <td>3</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
</table>
</body>
</html>



[table3.css]
.boardList
{
 width:100%;
 border-top: 1px solid #666;
 border-left: 1px solid #666;
 text-align:center;
 border-collapse:collapse;
}

.boardList th, td
{
 padding:10px;
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;
}

.boardList th.number {width: 53px;}
.boardList th.title {width: *;}
.boardList th.writer {width: 70px;}
.boardList th.date {width: 90px;}
.boardList th.viewCnt {width: 60px;}


[설명]
아래는 가느다란 실선 테이블을 만들기에서의 핵심이다.

1. 테이블의 맨 윗쪽선과 왼쪽선을 만드는 부분
.boardList
{
 border-top: 1px solid #666;
 border-left: 1px solid #666;
}

2. th, td의 오른쪽과 아래쪽 선을 만드는 부분
.boardList th, td
{
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;
}

3. 1, 2번만 하면 선 사이의 간격(th, td)이 벌어져 있어서
간격을 붙여줘야 한다.
border-collapse:collapse;

Posted by 은둔고수
프로그램/html,css2009. 11. 2. 21:46

css table 만들기 2



[table2.htm]
<html>
<head>
<link rel="stylesheet" type="text/css" href="table2.css" />
</head>

<body>

<table class="boardList">
<tr>
 <th class="number">번호</th>
 <th class="title">제목</th>
 <th class="writer">작성자</th>
 <th class="date">작성일</th>
 <th class="viewCnt">조회</th>
</tr>
<tr>
 <td>1</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
<tr>
 <td>2</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
<tr>
 <td>3</td>
 <td>제목</td>
 <td>작성자</td>
 <td>작성일</td>
 <td>조회수</td>
</tr>
</table>
</body>
</html>


[table2.css]
.boardList
{
 clear: both;
 table-layout: fixed;
 font-size: 12px;
 width: 100%;
 border-collapse: collapse;
 color: #ff2d88;
 background-color: #fcfcfc;
 text-align: center;
 border-top: 2px solid #8f73d7;
 border-bottom: 1px solid #ececec;
}

.boardList th
{
 padding: 0;
 font-weight:bold;
 height:30px;
}

.boardList td
{
 padding: 5px 0px 0px 0px;
 font-weight:normal;
 color:#333;
 height:21px;
 border-top:1px solid #ececec;
}

.boardList th.number {width: 53px;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.title {width: *;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.writer {width: 70px;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.date {width: 55px;background: url('../images/menu_barbg.gif') right no-repeat;}
.boardList th.viewCnt {width: 55px;}

Posted by 은둔고수
프로그램/html,css2009. 9. 7. 14:26

투명png파일 ie6에서 사용하기

[파일 : iepngfix.htc]

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">
if (typeof blankImg == 'undefined') var blankImg = '/Common/blank.gif';
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m) {
    if(filters[f]) {
        filters[f].enabled = s ? true : false;
        if (s) with (filters[f]) { src = s; sizingMethod = m; }
    }
    else if(s) {
        style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'");';
    }
}

function doFix() {
    if(!/MSIE (5\.5|6\.)/.test(navigator.userAgent) || (event && !/(background|src)/.test(event.propertyName))) return;
    var bgImg = currentStyle.backgroundImage || style.backgroundImage;
    if(tagName == 'IMG') {
        if((/\.png$/i).test(src)) {
            if(currentStyle.width == 'auto' && currentStyle.height == 'auto')
                style.width = offsetWidth + 'px';
                filt(src, 'image');
                src = blankImg;
        }
        else if(src.indexOf(blankImg) < 0) filt();
    }
    else if(bgImg && bgImg != 'none') {
        if(bgImg.match(/^url[("']+(.*\.png)[)"']+$/i)) {
            var s = RegExp.$1;
            if(currentStyle.width == 'auto' && currentStyle.height == 'auto')
                style.width = offsetWidth + 'px';
                style.backgroundImage = 'none';
                filt(s, 'crop');
            for(var n = 0; n < childNodes.length; n++)
                if(childNodes[n].style) childNodes[n].style.position = 'relative';
        }
        else filt();
    }
}
doFix();

</script>
</public:component>

 

설명> 이 소스를 iepngfix.htc 파일로 만든다.

 

 

[파일:css에서 호출]

<style type="text/css">
.png24 { behavior: url('./iepngfix.htc'); }
</style>

 

설명> 이 소스를 처럼 iepngfix.htc 파일을 css로 호출해서 사용한다.

Posted by 은둔고수
프로그램/html,css2009. 8. 25. 23:33

css table cellspacing, cellpadding을 css로 사용하기

css table cellspacing, cellpadding을 css로 사용하기

<table cellpadding="0" cellspacing="0" border="0">
위 소스 중 cellpadding="0" cellspacing="0"을 css에서 사용하려면
다음과 같이 한다. 

1>
table{border-collapse:collapse;}
=> 이렇게 하는 경우 약간의 여백들이 생기게 된다. 

2>
table {padding:0; border-spacing:0px; border:0; border-collapse:collapse;}
th, td {padding:0px;}

Posted by 은둔고수
프로그램/html,css2009. 7. 25. 18:16

CSS repeat에 대해서 알아보자.


[css-tip]CSS repeat에 대해서 알아보자.


예>
background:url(이미지 지정) repeat-x bottom;

예>처럼 배경이미지를 사용할 때 전체 화면에 지정한 이미지를 사용하고 싶으면
background:url(이미지 지정) 만 지정하면 된다.

[속성]
repeat-x => 가로로 계속 반복되어 표시가 된다.
repeat-y => 세로로 계속 반복되어 표시가 된다.
no-repeat => 한 번만 표시하고 반복하지 않는다.
bottom => 배경이미지를 화면의 하단부터 채우기 시작한다.
 - bottom 대신 위치를 직접 지성할 수 있다.
   : 0 50% => 배경이미지를 왼쪽 0, 위에서부터 50% 위치부터 채우기 시작한다.
    예> 배경이미지를 한 번만 표시하고 왼쪽에 붙여서 세로 중앙에 위치시킨다.
    background:url(이미지 지정) no-repeat 0 50%;
Posted by 은둔고수
프로그램/html,css2009. 7. 25. 17:52

CSS 네비게이션 메뉴 만들기(세로형)

[css-tip]CSS 네비게이션 메뉴 만들기(세로형)


3개의 메뉴로 구성되어 있는 세로형 메뉴를 만들어 보자.
메뉸는 아래처럼 보여지게 된다.




[nav.htm]

<html>
<head>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>

<body>

<ul id="nav">
 <li><a href="http://okkks.tistory.com" target="_blank">여기는</a></li>
 <li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
 <li><a href="http://okkks.tistory.com" target="_blank">입니다.</a></li>
</ul>

</body>
</html>

메뉴에 주로 사용하는 ul, li 태그의 조합으로 구성을 한다.



[nav.css]
#nav
{
 list-style-type:none;
}

#nav li
{
 background:url(images/page_btn_next.gif) no-repeat 0 50%;
 padding-left:25px;
}
 
#nav a
{
 font-weight:bold;
 font-size:12px;
 text-decoration:none;
 color:#7878E1;
}

#nav a.active, #nav a:hover
{
 color:#00008C;
}



#nav 설명
list-style-type:none; => 블릿을 없앤다.


#nav li 설명
background:url(이미지 지정) no-repeat 0 50%;
=> 블롯을 대체할 다른 이미지 지정
no-repeat => 배경 이미지를 한 번만 출력하고 반복하지 않게 지정
0 50% => 왼쪽에서 0, 위에서부터 50%에 이미지를 위치 시킨다.(즉, 세로 중간에 위치)

보다 쉬운 방법으로 list-style-image:url(이미지 지정); 속성을 사용해 기본 불릿 이미지를 다른 이미지로 지정할 수 있다.
예>
ul
{
 list-style-image:url(이미지 지정);
}
하지만, 각종 브라우저와 버전에 따라 기본 이미지 위치가 다르기 때문에 <li>엘리먼트 배경이미지로 같은 효과를 줬다.

 
#nav a 설명
font-weight:bold; => 굵은 글자
font-size:12px; => 글자 크기
text-decoration:none; => 글자의 꾸미기를 보통 모양으로 지정.(밑줄을 없앤다.)
color:#7878E1; => 글자 색상


#nav a.active, #nav a:hover 설명
color:#00008C; => 글자 색상

a.active
=> <a>엘리먼트(a 태그)에 class="active" 형태로 사용한다.
메뉴를 선택하면 해당 메뉴를 선택했다는 효과를 주기위해 class에서 사용할 수 있게 active 라는 이름을 직접 만들었다. 선택한 메뉴는 class="active" 를 사용하고 그렇지 않은 메뉴들은 class="" 를 사용한다.
예:선택 안한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="">여기는</a></li>
예:선택한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>

a:hover
=> 마우스 오버시 글자 색상

이처럼 같은 속성을 여러군데에서 사용하려면 "," 를 이용해서 설정할 수 있다.

Posted by 은둔고수
프로그램/html,css2009. 7. 25. 12:08

CSS 블록레벨과 인라인?


CSS 블록레벨과 인라인?


HTML 엘리먼트는 블록레벨과 인라인으로 구분할 수 있다.
블록레벨 엘리먼트는 줄을 바꿔 각각 독립된 줄에 표시한다. 즉 한 줄에 이어서 표시가 되지 않고 다음 줄에 표시가 된다.
인라인 엘리먼트는 다른 인라인 엘리먼트와 같은 줄에 표시한다. 즉 한 줄에 이어서 표시가 된다.

블록레벨 엘리먼트는 블록레벨과 인라인 엘리먼트를 모두 포함할 수 있으나 인라인 일레먼트는 블록레벨 엘리먼트를 포함할 수 없다.


블록레벨 엘리먼트
<h1>~<h6>, <div>, <form> 등

인라인 엘리먼트
<strong>,<em>,<span>,<q> 등
Posted by 은둔고수

티스토리툴바