순지난
RSS
'Html &CSS'에 해당되는 글 6건
- 2011.06.28
- 2011.06.25
- 2011.06.25
- 2011.06.25
- 2011.06.25
- 2011.06.25
텍스트 갤러리 소스로
이미지 갤러리처럼 특정 제목을 선택하면 그 제목에 해당하는
내용이 나옵니다..
<style>
<!--
.gallerycontroller{width: 250px;}
.gallerycontent{width: 250px; height: 200px; border: 1px solid black; background-color: #DFDFFF; padding: 3px; display: block;}
//-->
</style>
<script language="javascript">
<!--
var tickspeed = 3000; // auto시 바뀌는 시간 - 1000 = 1초
var displaymode = 'auto';
if(document.getElementById) {
document.write('<style type="text/css">\n');
document.write('.gallerycontent{display:none;}\n');
document.write('</style>\n');
}
var selectedDiv = 0;
var totalDivs = 0;
function getElementbyClass(classname) {
partscollect = new Array();
var inc = 0;
var alltags = document.all? document.all.tags("DIV") : document.getElementsByTagName('*');
for(i=0; i<alltags.length; i++) {
if(alltags[i].className == classname) {
partscollect[inc++] = alltags[i];
}
}
}
function contractall() {
var inc = 0;
while(partscollect[inc]) {
partscollect[inc].style.display = 'none';
inc++;
}
}
function expandone() {
var selectedDivObj = partscollect[selectedDiv];
contractall();
selectedDivObj.style.display = 'block';
temp.options[selectedDiv].selected = true;
selectedDiv = (selectedDiv<totalDivs-1)? selectedDiv+1 : 0;
if(displaymode == 'auto') {
autocontrolvar = setTimeout("expandone()",tickspeed);
}
}
function populatemenu() {
temp = document.gallerycontrol.menu;
for(m=temp.options.length-1; m>0; m--) {
temp.options[m] = null;
}
for(i=0; i<totalDivs; i++) {
var thesubject = partscollect[i].getAttribute('subject');
thesubject = (thesubject == '' || thesubject == null)? 'HTML Content '+(i+1) : thesubject;
temp.options[i] = new Option(thesubject,'');
}
temp.options[0].selected = true;
}
function manualcontrol(menuobj) {
if(displaymode == 'manual') {
selectedDiv = menuobj;
expandone();
}
}
function preparemode(themode) {
displaymode = themode;
if(typeof autocontrolvar != 'undefined') {
clearTimeout(autocontrolvar);
if(themode == 'auto') {
document.gallerycontrol.menu.disabled = true;
autocontrolvar = setTimeout('expandone();',tickspeed);
} else {
document.gallerycontrol.menu.disabled = false;
}
}
}
function startgallery() {
document.getElementById('controldiv').style.display = 'block';
getElementbyClass('gallerycontent');
totalDivs = partscollect.length;
populatemenu();
for(i=0; i<document.gallerycontrol.mode.length; i++){
if(document.gallerycontrol.mode[i].checked) {
displaymode = document.gallerycontrol.mode[i].value;
}
}
if(displaymode == 'auto') {
document.gallerycontrol.menu.disabled = true;
}
expandone();
}
//-->
</script>
<body onload="startgallery();">
<!--
<div subject="select폼에 option값으로 들어갈 제목">
보여질 내용
</div>
//-->
<div class="gallerycontent" subject="제목 1">
Example 1 - Example 1 - Example 1 - Example 1 - Example 1 - Example 1 -
</div>
<div class="gallerycontent" subject="제목 2">
Example 2 - Example 2 - Example 2 - Example 2 - Example 2 - Example 2 -
</div>
<div class="gallerycontent" subject="제목 3">
Example 3 - Example 3 - Example 3 - Example 3 - Example 3 - Example 3 -
</div>
<div class="gallerycontent" subject="제목 4">
Example 4 - Example 4 - Example 4 - Example 4 - Example 4 - Example 4 -
</div>
<div class="gallerycontent" subject="제목 5">
Example 5 - Example 5 - Example 5 - Example 5 - Example 5 - Example 5 -
</div>
<!-- 컨트롤러 부분 //-->
<div id="controldiv" class="gallerycontroller">
<form name="gallerycontrol">
<select class="gallerycontroller" size="5" name="menu" onChange="manualcontrol(this.options.selectedIndex);">
<option>Blank form</option>
</select>
Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')">
Manual: <input type="radio" name="mode" value="manual" onClick="preparemode('manual')">
</form>
</div>
'Html &CSS' 카테고리의 다른 글
| 문단서식 방향바꾸기 (0) | 2011.06.25 |
|---|---|
| 링크에 여러가지 효과 주기 (0) | 2011.06.25 |
| CSS를 이용한 마우스 커서 모양 지정 (0) | 2011.06.25 |
| 테이블의 선을 단선으로 border-collapse 속성 (0) | 2011.06.25 |
| table-layout 속성을 이용하여 테이블 고정하기 (0) | 2011.06.25 |
sample.html<html>
<head>
<title>문단 서식 방향 바꾸기</title>
<style type="text/css">
<!--
#MoveDirection1, #MoveDirection2, #MoveDirection3 {
border: #000000 1px solid; padding: 5px
}
/*모든 아이디에 테두리와 테두리로 부터의 공간*/
#MoveDirection1 {direction: LTR}
/*왼쪽부터 오른쪽으로 정렬*/
#MoveDirection2 {direction: RTL}
/*오른쪽부터 왼쪽으로 정렬*/
#MoveDirection3 {direction: INHERIT}
/*기본값 상속*/
-->
</style>
</head>
<body>
<div id=MoveDirection1>
동해 물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세<br>
무-궁화 삼-천리 화려강산<br>
대한 사람 대한으로 길이 보전하세<br><br>
남산위에 저소나무 철갑을 두른 듯<br>
바람 서리 불변함은 우리 기상일세<br>
무-궁화 삼-천리 화려강산<br>
대한 사람 대한으로 길이 보전하세
</div>
<div id=MoveDirection2>
동해 물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세<br>
무-궁화 삼-천리 화려강산<br>
대한 사람 대한으로 길이 보전하세<br><br>
남산위에 저소나무 철갑을 두른 듯<br>
바람 서리 불변함은 우리 기상일세<br>
무-궁화 삼-천리 화려강산<br>
대한 사람 대한으로 길이 보전하세
</div>
<div id=MoveDirection3>
동해 물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세<br>
무-궁화 삼-천리 화려강산<br>
대한 사람 대한으로 길이 보전하세<br><br>
남산위에 저소나무 철갑을 두른 듯<br>
바람 서리 불변함은 우리 기상일세<br>
무-궁화 삼-천리 화려강산<br>
대한 사람 대한으로 길이 보전하세
</div>
</body>
</html>
'Html &CSS' 카테고리의 다른 글
| 텍스트 갤러리 소스 (0) | 2011.06.28 |
|---|---|
| 링크에 여러가지 효과 주기 (0) | 2011.06.25 |
| CSS를 이용한 마우스 커서 모양 지정 (0) | 2011.06.25 |
| 테이블의 선을 단선으로 border-collapse 속성 (0) | 2011.06.25 |
| table-layout 속성을 이용하여 테이블 고정하기 (0) | 2011.06.25 |
<html>
<head>
<title>링크에 여러가지 효과 주기</title>
<!--
BORDER는 전체 적인 곳에 적용 되고 왼쪽, 오른쪽, 위, 아래에 적용 할 때에는 BORDER-(TOP/BOTTOM/LEFT/RIGHT) 원하시는 것을 사용 하시면 됩니다.
그리고 BORDER 스타일을 준 곳에 마우스 오버시 약간 흔들리죠^^ 그건 처음에는 BORDER 값이 없다가 오버시에 BORDER 값이 생겨서 그렇습니다.
그걸 방지 하시려면 처음에도 BORDER 값을 주셔야 하는데 여기에서 중요 한 것은 앵커 태그에 직접 주시면 안된 다는 것입니다.
직접 줄 경우에 스타일 정의가 무시 됩니다.
또한 앵커 태그 안에 폰트에 줄경우에는 BORDER 값이 적용되고 그 위에 다시 스타일에 BORDER값이 또 한번 적용 되어 결과 적으로는 2px solid 가 되어 버립니다.
- X -
(처음부터 앵커태그 스타일만 적용/스타일 정의가 무시 됩니다)
스타일 정의 부분
A:hover
{BORDER: #000000 1px solid}
본문중 앵커 태그 부분
<a href="#" style="BORDER: #000000 1px solid">aaaaa</a>
- X -
(결과적 2px solid/앵커 태그에서 1px 그리고 또 다시 스타일 정의에서 1px)
스타일 정의 부분
A:hover
{BORDER: #000000 1px solid}
본문중 앵커 태그 부분
<a href="#"><span style="BORDER: #000000 1px solid">aaaa</span></a>
- O -
스타일 정의 부분
A:hover
{BORDER: #000000 1px solid}
SPAN A
{BORDER: 바탕색 1px solid}
본문중 앵커 태그 부분
<span><a href="#">aaaa</a></span>
위와 같은 경우 처음부터 바탕색으로 1px가 존재 하기 때문에 보이지 않다가 마우스 오버시 보이지 않던 1px에 바탕색외에 색을 주어서 보이게 합니다.
몇가지 예제를 통해서 효과를 주었지만 스타일만으로도 수없이 많은 효과를 만들수 있습니다.
-->
<style type="text/css">
<!--
.FONTS
{FONT-FAMILY: verdana, arial, sans-serif; font-size: 11px}
A:hover.A
{TEXT-DECORATION: none}
/*링크된 곳에 밑줄 효과를 주지 않습니다*/
A:hover.B
{TEXT-DECORATION: overline}
/*링크된 곳에 윗줄 효과를 줍니다*/
A:hover.C
{TEXT-DECORATION: line-through}
/*링크된 곳에 가운데줄 효과를 줍니다*/
A:hover.D
{TEXT-DECORATION: overline underline}
/*링크된 곳에 윗줄과 밑줄을 동시에 줍니다*/
A:hover.E
{TEXT-DECORATION: none; FONT-STYLE: italic}
/*글체가 이탤릭체로 변합니다*/
A:hover.F
{TEXT-DECORATION: none; BACKGROUND-COLOR: #FFF5B7}
/*링크된 곳에 배경색을 줍니다*/
A:hover.G
{TEXT-DECORATION: none; BORDER: #000000 1px solid}
/*링크된 곳에 보더를 주어 박스를 형성 합니다*/
A:hover.H
{TEXT-DECORATION: none; BORDER: #000000 1px solid; BACKGROUND-COLOR: #FFF5B7}
/*링크된 곳에 박스를 형성 하고 그안에 배경색을 줍니다*/
A:hover.I
{TEXT-DECORATION: none; FONT-WEIGHT: bold}
/*링크된 곳에 글자가 굵게 나타 납니다*/
A:hover.J
{TEXT-DECORATION: none; FONT-WEIGHT: bold; COLOR: #FF0000}
/*링크된 곳에 글자 굵기와 함께 글자 색이 변합니다*/
SPAN A
{TEXT-DECORATION: none; BORDER: #FFFFFF 1px solid}
/*바탕색과 같은색의 보더를 미리 앵커에 줍니다*/
-->
</style>
</head>
<body>
<div class="FONTS">
<a href="#">CSS</a><br><br>
<a href="#" class="A">CSS</a><br><br>
<a href="#" class="B">CSS</a><br><br>
<a href="#" class="C">CSS</a><br><br>
<a href="#" class="D">CSS</a><br><br>
<a href="#" class="E">CSS</a><br><br>
<a href="#" class="F">CSS</a><br><br>
<a href="#" class="G">CSS</a><br><br>
<a href="#" class="H">CSS</a><br><br>
<a href="#" class="I">CSS</a><br><br>
<a href="#" class="J">CSS</a><br><br>
<span><a href="#" class="G">CSS</a></span>
</div>
</body>
</html>
'Html &CSS' 카테고리의 다른 글
| 텍스트 갤러리 소스 (0) | 2011.06.28 |
|---|---|
| 문단서식 방향바꾸기 (0) | 2011.06.25 |
| CSS를 이용한 마우스 커서 모양 지정 (0) | 2011.06.25 |
| 테이블의 선을 단선으로 border-collapse 속성 (0) | 2011.06.25 |
| table-layout 속성을 이용하여 테이블 고정하기 (0) | 2011.06.25 |
cursor 속성을 이용하면 마우스 커서의 형태를 지정할 수 있습니다. 아주 간단하므로 예제를 보시면 금방 이해가 됩니다.
| <p style="cursor:auto">Auto</p> <p style="cursor:crosshair">Crosshair</p> <p style="cursor:default">Default</p> <p style="cursor:pointer">Pointer</p> <p style="cursor:move">Move</p> <p style="cursor:e-resize">e-resize</p> <p style="cursor:ne-resize">ne-resize</p> <p style="cursor:nw-resize">nw-resize</p> <p style="cursor:n-resize">n-resize</p> <p style="cursor:se-resize">se-resize</p> <p style="cursor:sw-resize">sw-resize</p> <p style="cursor:s-resize">s-resize</p> <p style="cursor:w-resize">w-resize</p> <p style="cursor:text">text</p> <p style="cursor:wait">wait</p> <p style="cursor:help">help</p> |
아래 예제에서 글자위에 마우스를 올리면 모양이 변합니다.
|
Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
'Html &CSS' 카테고리의 다른 글
| 텍스트 갤러리 소스 (0) | 2011.06.28 |
|---|---|
| 문단서식 방향바꾸기 (0) | 2011.06.25 |
| 링크에 여러가지 효과 주기 (0) | 2011.06.25 |
| 테이블의 선을 단선으로 border-collapse 속성 (0) | 2011.06.25 |
| table-layout 속성을 이용하여 테이블 고정하기 (0) | 2011.06.25 |
border-collapse는 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성입니다.
속성값으로는 collapse와 separate를 사용할 수 있습니다.
- collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다.
- separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다.
| <table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;"> <tr> <td>border-collapse:collapse;</td> </tr> </table> |
위와 같이 border-collapse 속성갑을 collapse로 지정하고 border 속성을 추가적으로 지정하면 아래와 같이 깔끔한 테이블을 출력할 수 있습니다.
|
border-collapse 속성은 테두리선의 표시방법만 지정하므로 반드시 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 합니다.
테이블의 셀이 많을때는 IE와 Firefox에서 조금 다른 모습으로 출력됩니다. IE에서는 추가적으로 TD element에 border 속성을 추가적으로 지정하면 됩니다.
| <table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;"> <tr> <td style="border:1px gray solid;">HTML</td> <td style="border:1px gray solid;">Hypertext Markup Language</td> </tr> <tr> <td style="border:1px gray solid;">CSS</td> <td style="border:1px gray solid;">Cascading Style Sheet</td> </tr> </table> |
|
'Html &CSS' 카테고리의 다른 글
| 텍스트 갤러리 소스 (0) | 2011.06.28 |
|---|---|
| 문단서식 방향바꾸기 (0) | 2011.06.25 |
| 링크에 여러가지 효과 주기 (0) | 2011.06.25 |
| CSS를 이용한 마우스 커서 모양 지정 (0) | 2011.06.25 |
| table-layout 속성을 이용하여 테이블 고정하기 (0) | 2011.06.25 |
table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지합니다.
보통 셀안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어납니다.
| <table width="200" cellpadding="5" cellspacing="2" border="1" align="center"> <tr> <td>셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.</td> </tr> </table> |
테이블의 너비가 200픽셀로 셀안의 내용에 비해서 좁더라도 아래와 같이 자연스럽게 줄바꿈이 일어납니다.
|
반면 홈페이지 주소와 같이 영문으로 공백이 없는 경우는 셀을 밀어버리는 현상이 발생합니다.
| <table width="200" cellpadding="5" cellspacing="2" border="1" align="center"> <tr> <td>http://www.homejjang.com/09/border_collapse.php</td> </tr> </table> |
위의 테이블과 똑같이 200픽셀로 너비를 지정했음에도 테이블이 밀려나는 걸 확인할 수 있습니다.
|
table-layout 속성값을 fixed로 지정하면 테이블의 너비가 200픽셀로 고정됩니다.
| <table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed;"> <tr> <td>http://www.homejjang.com/09/border_collapse.php</td> </tr> </table> |
그러나 아래와 같이 200 픽셀까지만 보이고 그 이상은 화면에 출력되지 않는 현상이 발생합니다.
|
줄바꿈이 일어나게 할려면 word-break:break-all; 속성을 추가적으로 지정해 주면 됩니다.
| <table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed; word-break:break-all;"> <tr> <td>http://www.homejjang.com/09/border_collapse.php</td> </tr> </table> |
그러면 아래와 같이 테이블은 고정되고 자연스럽게 줄바꿈이 일어납니다.
|
'Html &CSS' 카테고리의 다른 글
| 텍스트 갤러리 소스 (0) | 2011.06.28 |
|---|---|
| 문단서식 방향바꾸기 (0) | 2011.06.25 |
| 링크에 여러가지 효과 주기 (0) | 2011.06.25 |
| CSS를 이용한 마우스 커서 모양 지정 (0) | 2011.06.25 |
| 테이블의 선을 단선으로 border-collapse 속성 (0) | 2011.06.25 |