'HTML'에 해당되는 글 2건
- 2010.05.15 :: table 태그 대체
- 2010.05.15 :: 화면효과
HTML
2010. 5. 15. 14:35
<div class="table_style">
<ul class="header">
<li class="column1">1</li>
<li class="column2">2</li>
<li class="column3">3</li>
<li class="column4">4</li>
</ul>
<ul>
<li class="column1">내용2-1</li>
<li class="column2">내용2-22</li>
<li class="column3">내용2-33</li>
<li class="column4">내용2-44</li>
</ul>
<ul>
<li class="column1">내용3-1</li>
<li class="column2">내용3-2</li>
<li class="column3">내용3-3</li>
<li class="column4">내용3-3</li>
</ul>
</div>
<style type="text/css">
.table_style {
width:400px; /* 전체 테이블 폭 지정 */
}
.table_style ul {
clear: left;
margin: 0; /*ul 에 대한 ie, ff 차이를 없애기 위해 0 으로 설정 */
padding: 0; /*ff 는 속성에 기본 margin, padding 이 설정된 경우가 았음*/
list-style-type: none; /* ul li 태그 사용으로 인한 disc 를 안보이도록*/
}
/*
테이블 상단 보더를 만들때 아래와 같이 :first-child 선택자를 사용하는것이
좀더 범용적인 방법이지만 IE는 IE7 이후부터만 이를 제공합니다.
.table_style ul:first-child{
border-top: 1px solid #000;
}
*/
.table_style .header {
font-weight: bold; /*th 와 같은 볼드 효과를 만듬*/
text-align: center; /*th 와 같은 중앙 정렬 효과를 만듬*/
border-top: 1px solid #000; /*테이블의 상단 보더를 만듬*/
}
/*
만약 첫 컬럼에 th와 같은 제목 효과를 주고자 한다면
위에 th 속성을 구현하기 위해 사용한 두개의 속성을 없애고
.table_style ul li:first-child {
font-weight: bold;
text-align: center;
}
와 같이 사용하면 됩니다.
*/
.table_style ul li {
float: left;
margin: 0; /* 테이블 속성에 사용하던 cellspacing 과 동일 */
padding: 2px 1px; /* 테이블 속성에 사용하던 cellpadding 과 동일 */
border-bottom: 1px solid #000; /*테이블의 하단 보더를 만듬*/
border-left: 1px solid #000; /*테이블의 좌측 보더를 만듬*/
}
/*
각 컬럼에의 개별 폭을 지정함
총 합(padding 과 margin 포함)이 테이블의 총 폭보다 넓으면 디자인이 깨짐
적절하게 보일수 있도록 조정이 필요함(다른 트릭이 있을법도 한대 아직..;;;;)
*/
.table_style ul .column1 {
width: 60px;
}
.table_style ul .column2 {
width: 160px;
}
.table_style ul .column3 {
width: 70px;
border-right: 1px solid #000; /*테이블의 우측 보더를 만듬*/
}
.table_style ul .column4 {
width: 70px;
border-right: 1px solid #000; /*테이블의 우측 보더를 만듬*/
}
</style>
////////////////////////////////////////////////////////////////////
<!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" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Daum - 우리들의 UCC 세상, 다음</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,form,fieldset,p,button{margin:0;padding:0;}
body,div,dl,dt,dd,h1,h2,h3,h4,form,fieldset,p,th,td,input{color:#333;font-family:dotum,돋움,sans-serif;font-size:12px;font-weight:normal;}
#left_wrap{width:400px;position:absolute;top:10px;left:2;}
#navibest_area2{height:121px;overflow:hidden;border-left:#e2e2e2 1px solid;border-right:#e2e2e2 1px solid;}
#navibest_area{height:121px;overflow:hidden;border:#e2e2e2 1px solid;border-right:#e2e2e2 1px solid;}
#navibest_area .sub{display:inline;float:left;margin:5px 0 0 9px;border-right:#f3f3f3 1px solid;}
#navibest_area .sub.f1{width:31px;margin:5px 0 0 17px;}
#navibest_area .sub.f2{width:41px;}
#navibest_area .sub.f3{width:31px;}
#navibest_area .sub.f4{width:41px;margin:5px 0 0 9px;border:none;}
#navibest_area .sub li{display:inline;height:18px;overflow:hidden;line-height:18px;white-space:nowrap;}
#navibest_area .sub li a{font-size:12px;color:#858585;letter-spacing:-1px;}
#navibest_area .sub li a:hover{color:#4559E9;text-decoration:underline;}
hr{display:none;}
img,fieldset{border:0 none;}
ul,ol,li{list-style:none outside;}
a {color:#444;text-decoration:none;}
a:hover{color:#4559E9;text-decoration:underline;}
strong{font-weight:bold;}
.ir:hover{text-decoration:none;}
.ir span{display:block;overflow:hidden;height:11px;position:relative;z-index:-1;font-size:11px;}
</style>
</head>
<body>
<div id="left_wrap">
<div id="navibest_area">
<ul class="sub f1">
<li><a href="http://movie.daum.net/?t__nil_bestservice=movie">영화</a></li>
<li><a href="http://stock.daum.net/?t__nil_bestservice=stock">증권</a></li>
<li><a href="http://book.daum.net/?t__nil_bestservice=book">책</a></li>
<li><a href="http://cook.miznet.daum.net/?t__nil_bestservice=cook">요리</a></li>
</ul>
<ul class="sub f2">
<li><a href="http://movie.daum.net/play/?t__nil_bestservice=perform">공연</a></li>
<li><a href="http://realestate.daum.net/?t__nil_bestservice=estate">부동산</a></li>
<li><a href="http://k.daum.net/qna/?t__nil_bestservice=kin">지식</a></li>
<li><a href="http://miznet.daum.net/?t__nil_bestservice=miznet">미즈넷</a></li>
</ul>
<ul class="sub f3">
<li><a href="http://tv.media.daum.net/?t__nil_bestservice=tv">텔존</a></li>
<li><a href="http://home.finance.daum.net/?t__nil_bestservice=finance">금융</a></li>
<li><a href="http://comic.daum.net/?t__nil_bestservice=comic">만화</a></li>
<li><a href="http://fortune.daum.net/?t__nil_bestservice=fortune">운세</a></li>
</ul>
<ul class="sub f4">
<li><a href="http://music.daum.net/?t__nil_bestservice=music">뮤직</a></li>
<li><a href="http://front.mobile.daum.net/message/Sms?t__nil_bestservice=sms">문자</a></li>
<li><a href="http://tvpot.daum.net/?t__nil_bestservice=tvpot">동영상</a></li>
</ul>
</div>
HTML
2010. 5. 15. 13:50
메타태그
<meta http-equiv="Page-Enter" content="revealtrans(duration=3, transition=23)">
<meta http-equiv="Page-Exit" content="revealtrans(duration=3, transition=23)">
<meta>태그가 <html>태그 앞에 와야 함.
transition=23은 랜덤효과, duration=3은 3초간 지속됨을 의미함.
transition 효과
0 : 가운데로 모으기(박스형태)
1 : 밖으로 펼치기(박스형태)
2 : 가운데로 모으기(원형태)
3 : 밖으로 펼치기(원형태)
4 : 위로 닦아내기
5 : 아래로 닦아내기
6 : 오른쪽으로 닦아내기
7 : 왼쪽으로 닦아내기
8 : 세로 블라인드
9 : 가로 블라인드
10 : 가로 체크 무늬
11 : 세로 체크 무늬
12 : 흩어 뿌리기
13 : 수직 안쪽으로 나누기
14 : 수직 바깥쪽으로 나누기
15 : 수평 안쪽으로 나누기
16 : 수평 바깥쪽으로 나누기
17 : 왼쪽 아래로 계단모양
18 : 왼쪽 위로 계단모양
19 : 오른쪽 아래로 계단모양
20 : 오른쪽 위로 계단모양
21 : 가로 실선 무늬
22 : 세로 실선 무늬
23 : 0~22까의 효과를 랜덤으로 전환