행간/자간 간격 조정
인터넷정보2007. 10. 17. 00:16
<p style="line-height:2" "letter-spacing:1.5pt"> 글 내용 삽입 </p> line-height는 행간, letter-spacing는 자간입니다. 테이블에도 적용해두 되구요. 다른 태그에도... |
'인터넷정보' 카테고리의 다른 글
| <td>를 간단하게하는 <col>태그 (0) | 2007.10.17 |
|---|---|
| 페이지여백 (0) | 2007.10.17 |
| MYSQL 의 root 비밀번호 변경 (0) | 2007.10.17 |
| 그라데이션 (Gradient) (0) | 2007.10.17 |
| 동영상+자막나오는 소스 (0) | 2007.10.17 |
| 해상도에 따라 레이어 위치 바뀌는 것 고정하기 (0) | 2007.10.17 |
| input, textarea 마우스 포커스시 테두리 하일라이트 (0) | 2007.10.17 |
| 반짝이는 버튼과 꼬마 버튼 (0) | 2007.10.17 |
| div와 span의 차이점 (0) | 2007.10.17 |
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
해상도에 따라 레이어 위치 바뀌는 것 고정하기
인터넷정보2007. 10. 17. 00:16
테이블에 이미지를 넣는 것보다 레이어에 넣으면 보기에도 깔끔하고 여러가지 좋은 점이 많습니다.
그러나 레이어의 절대좌표때문에 해상도가 바뀌면 레이어가 표밖으로 삐져나오거나 유저가 원하는 곳에 위치하지 않는 경우가 많이 있죠.
테이블과 부모 자식 레이어를 이용한 레이어의 위치를 고정하는 방법을 쓰겠습니다.
(부모자식 레이어를 이용하면 된다고 하는 분들은 많은데 상세하게 방법을 안 해주셔서 초보를 위한 ^^; 저도 초보지만 -.-;;)
간단히 설명하자면 (부모)레이어를 만들고 그 안에 (자식)레이어들을 넣어 (자식)레이어에 자신이 원하는 이미지 등을 넣으면 됩니다.
전 나모를 쓰는데 나모의 편집창에서(편집창, html창, 미리보기창 중에서) 부모레이어를 만들고 자식 레이어를 아무데나 만든다음에 드래그해서 부모레이어에 집어 넣으면 되더군요.
HTML 형식으로 보면 다음과 같이 나옵니다.
<div style="position:relative;left:-260px;top:-170px;">
<div id="layer1" style="width:314px; height:174px; position:absolute; left:689px; top:238px; z-index:-1;"> 이미지 또는 내용 </div>
<div id="layer2" style="width:389px; height:322px; position:absolute; left:640px; top:733px; z-index:-1;"> 이미지 또는 내용 </div>
<div id="layer3" style="width:389px; height:322px; position:absolute; left:640px; top:733px; z-index:-1;"> 이미지 또는 내용 </div>
</div>
첫번째 position:relative라고 한 것이 부모 레이어고 id=layer1, 2, 3...라고 한 것이 자식 레이어입니다.
자식 레이어는 4, 5, 6...계속 만들 수 있고요. id, width, height, left, top, z-index는 제가 임의적으로 준 것이고
중요한 것은 부모 레이어는 position을 relative로, 자식 레이어는 position을 absolute로 하는 것입니다.
제 홈페이지에도 레이어안에 이미지를 넣어서 만들었는데 위와 같은 방법으로 해서
해상도가 바뀌어도 제가 원하는 위치에 그대로 있습니다. ^.^v
그러나 레이어의 절대좌표때문에 해상도가 바뀌면 레이어가 표밖으로 삐져나오거나 유저가 원하는 곳에 위치하지 않는 경우가 많이 있죠.
테이블과 부모 자식 레이어를 이용한 레이어의 위치를 고정하는 방법을 쓰겠습니다.
(부모자식 레이어를 이용하면 된다고 하는 분들은 많은데 상세하게 방법을 안 해주셔서 초보를 위한 ^^; 저도 초보지만 -.-;;)
간단히 설명하자면 (부모)레이어를 만들고 그 안에 (자식)레이어들을 넣어 (자식)레이어에 자신이 원하는 이미지 등을 넣으면 됩니다.
전 나모를 쓰는데 나모의 편집창에서(편집창, html창, 미리보기창 중에서) 부모레이어를 만들고 자식 레이어를 아무데나 만든다음에 드래그해서 부모레이어에 집어 넣으면 되더군요.
HTML 형식으로 보면 다음과 같이 나옵니다.
<div style="position:relative;left:-260px;top:-170px;">
<div id="layer1" style="width:314px; height:174px; position:absolute; left:689px; top:238px; z-index:-1;"> 이미지 또는 내용 </div>
<div id="layer2" style="width:389px; height:322px; position:absolute; left:640px; top:733px; z-index:-1;"> 이미지 또는 내용 </div>
<div id="layer3" style="width:389px; height:322px; position:absolute; left:640px; top:733px; z-index:-1;"> 이미지 또는 내용 </div>
</div>
첫번째 position:relative라고 한 것이 부모 레이어고 id=layer1, 2, 3...라고 한 것이 자식 레이어입니다.
자식 레이어는 4, 5, 6...계속 만들 수 있고요. id, width, height, left, top, z-index는 제가 임의적으로 준 것이고
중요한 것은 부모 레이어는 position을 relative로, 자식 레이어는 position을 absolute로 하는 것입니다.
제 홈페이지에도 레이어안에 이미지를 넣어서 만들었는데 위와 같은 방법으로 해서
해상도가 바뀌어도 제가 원하는 위치에 그대로 있습니다. ^.^v
'인터넷정보' 카테고리의 다른 글
| 페이지여백 (0) | 2007.10.17 |
|---|---|
| MYSQL 의 root 비밀번호 변경 (0) | 2007.10.17 |
| 그라데이션 (Gradient) (0) | 2007.10.17 |
| 동영상+자막나오는 소스 (0) | 2007.10.17 |
| 행간/자간 간격 조정 (0) | 2007.10.17 |
| input, textarea 마우스 포커스시 테두리 하일라이트 (0) | 2007.10.17 |
| 반짝이는 버튼과 꼬마 버튼 (0) | 2007.10.17 |
| div와 span의 차이점 (0) | 2007.10.17 |
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
input, textarea 마우스 포커스시 테두리 하일라이트
인터넷정보2007. 10. 17. 00:16
input나 textarea에 마우스로 찍어보세요.<br><br>
<style>
.input_write {border:2px solid #DFDFDF;background-color:#FFFFFF;height:16px;font-family:TTche,Verdana,Tahoma;font-size:9pt}
.input_write_on {border:2px solid #88BE06;background-color:#FFFFEF;height:16px;font-family:TTche,Verdana,Tahoma;font-size:9pt}
.textarea_write {border:2px solid #DFDFDF;background-color:#FFFFFF;font-family:TTche,Verdana,Tahoma;font-size:9pt}
.textarea_write_on {border:2px solid #88BE06;background-color:#FFFFEF;font-family:TTche,Verdana,Tahoma;font-size:9pt}
</style>
<input type=text value="" size=61 maxlength=200 class=input_write onfocus=this.className='input_write_on' onblur=this.className='input_write'>
<textarea cols=60 rows=20 class=textarea_write onfocus=this.className='textarea_write_on' onblur=this.className='textarea_write'></textarea>
</font>
'인터넷정보' 카테고리의 다른 글
| MYSQL 의 root 비밀번호 변경 (0) | 2007.10.17 |
|---|---|
| 그라데이션 (Gradient) (0) | 2007.10.17 |
| 동영상+자막나오는 소스 (0) | 2007.10.17 |
| 행간/자간 간격 조정 (0) | 2007.10.17 |
| 해상도에 따라 레이어 위치 바뀌는 것 고정하기 (0) | 2007.10.17 |
| 반짝이는 버튼과 꼬마 버튼 (0) | 2007.10.17 |
| div와 span의 차이점 (0) | 2007.10.17 |
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
반짝이는 버튼과 꼬마 버튼
인터넷정보2007. 10. 17. 00:15
<html>
<head>
</head>
<body>
<button id=t1 style=background-color:#bfbfbf;cursor:hand;width:70 onMouseOver=setInterval('stCol(1,30,50,30)',1000); onMouseOut=reCol(1); onclick=alert('누꼬?');><span style="font-size:9pt;top:20px;border-style:none;height:5;font-weight:none;color:white;filter:shadow(color=gray,direction=135);">자바버튼</span></button>
<font size=2 face=돋움>
반짝거리는버튼!!옆버튼에 마우스를 올려보세요.1초만기다리세요^^
<br><p>
<BUTTON STYLE="background-color:#bfbfbf;cursor:hand;width:12;height:12;border:'1px outset'" onMouseOver="this.style.backgroundColor='red';this.style.border='1px inset'" onMouseOut="this.style.backgroundColor='#bfbfbf';this.style.border='1px outset'" onclick=alert('1번버튼클릭^^')></BUTTON>
<BUTTON STYLE="background-color:#bfbfbf;cursor:hand;width:12;height:12;border:'1px outset'" onMouseOver="this.style.backgroundColor='yellow';this.style.border='1px inset'" onMouseOut="this.style.backgroundColor='#bfbfbf';this.style.border='1px outset'" onclick=alert('2번버튼클릭^^')></BUTTON>
<BUTTON STYLE="background-color:#bfbfbf;cursor:hand;width:12;height:12;border:'1px outset'" onMouseOver="this.style.backgroundColor='green';this.style.border='1px inset'" onMouseOut="this.style.backgroundColor='#bfbfbf';this.style.border='1px outset'" onclick=alert('3번버튼클릭^^')></BUTTON>
꼬마버튼<p>
<script>
r=g=b=0;
var timerID=null;
function chCol(m,r2,g2,b2) {
r+=r2;
g+=g2;
b+=b2;
if (r>250||g>250||b>250) {
clearInterval(timerID);
reCol(m);
return;
}
str=r+','+g+','+b;
document.all('t'+m).style.background='rgb('+str+')';
}
function reCol(dest) {
r=g=b=0;
document.all('t'+dest).style.background='#bfbfbf';
clearInterval(timerID);
}
function stCol(n,r2,g2,b2) {
timerID=window.setInterval('chCol('+n+','+r2+','+g2+','+b2+')',200);
}
</script>
</body>
</html>
<head>
</head>
<body>
<button id=t1 style=background-color:#bfbfbf;cursor:hand;width:70 onMouseOver=setInterval('stCol(1,30,50,30)',1000); onMouseOut=reCol(1); onclick=alert('누꼬?');><span style="font-size:9pt;top:20px;border-style:none;height:5;font-weight:none;color:white;filter:shadow(color=gray,direction=135);">자바버튼</span></button>
<font size=2 face=돋움>
반짝거리는버튼!!옆버튼에 마우스를 올려보세요.1초만기다리세요^^
<br><p>
<BUTTON STYLE="background-color:#bfbfbf;cursor:hand;width:12;height:12;border:'1px outset'" onMouseOver="this.style.backgroundColor='red';this.style.border='1px inset'" onMouseOut="this.style.backgroundColor='#bfbfbf';this.style.border='1px outset'" onclick=alert('1번버튼클릭^^')></BUTTON>
<BUTTON STYLE="background-color:#bfbfbf;cursor:hand;width:12;height:12;border:'1px outset'" onMouseOver="this.style.backgroundColor='yellow';this.style.border='1px inset'" onMouseOut="this.style.backgroundColor='#bfbfbf';this.style.border='1px outset'" onclick=alert('2번버튼클릭^^')></BUTTON>
<BUTTON STYLE="background-color:#bfbfbf;cursor:hand;width:12;height:12;border:'1px outset'" onMouseOver="this.style.backgroundColor='green';this.style.border='1px inset'" onMouseOut="this.style.backgroundColor='#bfbfbf';this.style.border='1px outset'" onclick=alert('3번버튼클릭^^')></BUTTON>
꼬마버튼<p>
<script>
r=g=b=0;
var timerID=null;
function chCol(m,r2,g2,b2) {
r+=r2;
g+=g2;
b+=b2;
if (r>250||g>250||b>250) {
clearInterval(timerID);
reCol(m);
return;
}
str=r+','+g+','+b;
document.all('t'+m).style.background='rgb('+str+')';
}
function reCol(dest) {
r=g=b=0;
document.all('t'+dest).style.background='#bfbfbf';
clearInterval(timerID);
}
function stCol(n,r2,g2,b2) {
timerID=window.setInterval('chCol('+n+','+r2+','+g2+','+b2+')',200);
}
</script>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| 그라데이션 (Gradient) (0) | 2007.10.17 |
|---|---|
| 동영상+자막나오는 소스 (0) | 2007.10.17 |
| 행간/자간 간격 조정 (0) | 2007.10.17 |
| 해상도에 따라 레이어 위치 바뀌는 것 고정하기 (0) | 2007.10.17 |
| input, textarea 마우스 포커스시 테두리 하일라이트 (0) | 2007.10.17 |
| div와 span의 차이점 (0) | 2007.10.17 |
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
| 페이지 여백 없애기 (0) | 2007.10.17 |
div와 span의 차이점
인터넷정보2007. 10. 17. 00:15
| ■ div와 span태그는 서식에 관한 태그입니다. □ div태그는 문단 서식에 관한 태그입니다. 그래서 스타일을 이용해서 크기를 잡지 않는다면 기본적으로 줄바꿈이 됩니다. 즉, 라인 전체에 적용이되죠. □ span태그는 서식에 관한 태그이긴 하나 문단이 아닌 한줄에 관한 서식입니다. 그래서 span태그에 스타일로 크기를 잡아주지 않으면 태그가 쓰인곳 안에 내용까지만 적용이 됩니다. 예를 들어 <div style="background-color: blue"> 줄전체에 색상</div> 줄전체에 색상 위 경우는 라인전체에 해당(문단을 적용 하기 위해 자동으로 줄바꿈) <span style="background-color: blue">이글에만 색상</span> 이글에만 색상 위의 경우는 줄서식이므로 태그안에 쓰인 글에만 적용 됩니다. |
'인터넷정보' 카테고리의 다른 글
| 동영상+자막나오는 소스 (0) | 2007.10.17 |
|---|---|
| 행간/자간 간격 조정 (0) | 2007.10.17 |
| 해상도에 따라 레이어 위치 바뀌는 것 고정하기 (0) | 2007.10.17 |
| input, textarea 마우스 포커스시 테두리 하일라이트 (0) | 2007.10.17 |
| 반짝이는 버튼과 꼬마 버튼 (0) | 2007.10.17 |
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
| 페이지 여백 없애기 (0) | 2007.10.17 |
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
absolute 와 relative의 차이점
인터넷정보2007. 10. 17. 00:15
● absolute 와 relative의 차이점
포지션에 대한 속성에서 absolute와 relative를 보면
○ absolute(절대적 위치)
브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에
있다면 그 곳을 기준으로 합니다. 즉, 레이어 속성인 z-index를 쓸경우......
top, left, right, bottom을 통해서 좌표를 잡는데 실제 브라우저를 기준으로 위치하게 됩니다.
○ relative(상대적 위치)
객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상대값을 정해 줍니다.
즉, 포지션을 정하지 않은 상태에서 보면 그곳에 위치가 브라우저에 나올것입니다.
바로 그곳을 기준으로 포지션에 relative를 사용해서 top, left, right, bottom을 이용해서 위치를 정할수 있습니다.
ex 1.
<div style="position:relative;background:red;left:100px;top:200px;color:white;">relative</div>
<div style="position:absolute;background:blue;left:100px;top:200px;color:white;">absolute</div>
ex 2.
<div style="position:absolute;background:red;left:100px;top:200px;color:white;">relative</div>
<div style="position:relative;background:blue;left:100px;top:200px;color:white;">absolute</div>
포지션에 대한 속성에서 absolute와 relative를 보면
○ absolute(절대적 위치)
브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에
있다면 그 곳을 기준으로 합니다. 즉, 레이어 속성인 z-index를 쓸경우......
top, left, right, bottom을 통해서 좌표를 잡는데 실제 브라우저를 기준으로 위치하게 됩니다.
○ relative(상대적 위치)
객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상대값을 정해 줍니다.
즉, 포지션을 정하지 않은 상태에서 보면 그곳에 위치가 브라우저에 나올것입니다.
바로 그곳을 기준으로 포지션에 relative를 사용해서 top, left, right, bottom을 이용해서 위치를 정할수 있습니다.
ex 1.
<div style="position:relative;background:red;left:100px;top:200px;color:white;">relative</div>
<div style="position:absolute;background:blue;left:100px;top:200px;color:white;">absolute</div>
ex 2.
<div style="position:absolute;background:red;left:100px;top:200px;color:white;">relative</div>
<div style="position:relative;background:blue;left:100px;top:200px;color:white;">absolute</div>
'인터넷정보' 카테고리의 다른 글
| 행간/자간 간격 조정 (0) | 2007.10.17 |
|---|---|
| 해상도에 따라 레이어 위치 바뀌는 것 고정하기 (0) | 2007.10.17 |
| input, textarea 마우스 포커스시 테두리 하일라이트 (0) | 2007.10.17 |
| 반짝이는 버튼과 꼬마 버튼 (0) | 2007.10.17 |
| div와 span의 차이점 (0) | 2007.10.17 |
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
| 페이지 여백 없애기 (0) | 2007.10.17 |
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
윈앰방송 시작시 방송 시그널 넣기
인터넷정보2007. 10. 17. 00:14
시그널 넣기는 listen.pls 의 수정으로 할수 있습니다.
보통 일반 적인 listen.pls를 에디터로 열어 보면 아래와 같습니다.
[playlist]
NumberOfEntries=1
File1=http://아이피 또는 주소 : 포트
방송 시그널은 저것을 간단히 수정해서 이용이 가능 합니다.
수정하는 법을 알려드리겠습니다. 아래와 같이 하시면 됩니다.
[playlist]
NumberOfEntries=2
File1=http://청취시 처음 나올 메세지 또는 음악[ex : ttp://www.mnetv.com/opening.mp3 ]File2=http://아이피 또는 주소 : 포트
보통 일반 적인 listen.pls를 에디터로 열어 보면 아래와 같습니다.
[playlist]
NumberOfEntries=1
File1=http://아이피 또는 주소 : 포트
방송 시그널은 저것을 간단히 수정해서 이용이 가능 합니다.
수정하는 법을 알려드리겠습니다. 아래와 같이 하시면 됩니다.
[playlist]
NumberOfEntries=2
File1=http://청취시 처음 나올 메세지 또는 음악[ex : ttp://www.mnetv.com/opening.mp3 ]File2=http://아이피 또는 주소 : 포트
'인터넷정보' 카테고리의 다른 글
| 해상도에 따라 레이어 위치 바뀌는 것 고정하기 (0) | 2007.10.17 |
|---|---|
| input, textarea 마우스 포커스시 테두리 하일라이트 (0) | 2007.10.17 |
| 반짝이는 버튼과 꼬마 버튼 (0) | 2007.10.17 |
| div와 span의 차이점 (0) | 2007.10.17 |
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
| 페이지 여백 없애기 (0) | 2007.10.17 |
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
| 세로로 글쓰기 (0) | 2007.10.17 |
텍스트 박스에 이미지 넣기
인터넷정보2007. 10. 17. 00:14
<font style=font-size:9pt;>
요즘 유행하는 것이죠. 텍스트 박스에 이미지가 들어가 있구 마우스 클릭하면 사라지는 기능.<br>
두가지 방법을 알려드릴거구요. 첫번째는 포커스가 박스안에 있으면 새로고침 하더라도 다시 이미지가<br>
나타나지 안습니다. 포커스가 박스안에 없을 경우만 나타납니다. 두번째는 포커스가 인풋박스 안에 있더라도<br>
이미지가 나타납니다.<br><br>
첫번째 방법.<br>
<input type='text' size='38' style='height:20px;' style='background-image:url(./outlogin_skin/camelot_gray2/images/aa.gif);background-repeat:no-repeat;background-position:center; border-width:1px; border-top-color:black; border-right-color:black; border-bottom-color:black; border-left-color:black; border-style:solid;' onFocus="this.style.background='#ffffff'">
<br><br>
두번째 방법
<script language=JavaScript>
<!--
var c=false;
function ch () {
if ( c ) return;
document.search.q.style.backgroundImage="";
c=true;
}
//-->
</script>
<form name=search>
<input size=38 name=q style='background-image:url(./outlogin_skin/camelot_gray2/images/aa.gif);background-repeat:no-repeat;background-position:center; border-width:1px; border-top-color:black; border-right-color:black; border-bottom-color:black; border-left-color:black; border-style:solid;' onkeydown='return ch();' onmousedown='return ch();'>
</form>
</font>
'인터넷정보' 카테고리의 다른 글
| input, textarea 마우스 포커스시 테두리 하일라이트 (0) | 2007.10.17 |
|---|---|
| 반짝이는 버튼과 꼬마 버튼 (0) | 2007.10.17 |
| div와 span의 차이점 (0) | 2007.10.17 |
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
| 페이지 여백 없애기 (0) | 2007.10.17 |
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
| 세로로 글쓰기 (0) | 2007.10.17 |
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
페이지 여백 없애기
인터넷정보2007. 10. 17. 00:13
페이지의 <head>와 </head>사이에 아래와 같은 스타일시트 소스를 넣어주시면 페이지의 여백이 0으로 됩니다.
<style type='text/css'>
<!--
BODY { margin:0 0 0 0 }
-->
</style>
보시다시피 margin(여백)은 0 0 0 0 이라고 되어있는데.....
각각 상하좌우의 여백을 의미하는거겠죠 순서는 각각 수치를 바꿔 적용하면서 실행해보시면 아실수 있을겁니다.
<style type='text/css'>
<!--
BODY { margin:0 0 0 0 }
-->
</style>
보시다시피 margin(여백)은 0 0 0 0 이라고 되어있는데.....
각각 상하좌우의 여백을 의미하는거겠죠 순서는 각각 수치를 바꿔 적용하면서 실행해보시면 아실수 있을겁니다.
'인터넷정보' 카테고리의 다른 글
| 반짝이는 버튼과 꼬마 버튼 (0) | 2007.10.17 |
|---|---|
| div와 span의 차이점 (0) | 2007.10.17 |
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
| 세로로 글쓰기 (0) | 2007.10.17 |
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
리스트태그의 리스트아이템을 이미지로 바꾸기
인터넷정보2007. 10. 17. 00:13
리스트태그의 리스트아이템을 이미지로 바꾸기
<br><br>
▥ 일반적인 방법.
<br>
<ul type="disc">
<li>list 태그를 사용하면 이렇게 됩니다.</li>
<li>두번째 줄은 이렇게</li>
<li>세번째 줄은 이렇게</li>
</ul>
<br><br>
▥ 이미지를 사용했을 경우.
<br>
<ul style="list-style-image:url(../html/img/menuimg1.gif)">
<li>list 태그를 사용하면 이렇게 됩니다.</li>
<li>두번째 줄은 이렇게</li>
<li>세번째 줄은 이렇게</li>
</ul>
'인터넷정보' 카테고리의 다른 글
| div와 span의 차이점 (0) | 2007.10.17 |
|---|---|
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
| 페이지 여백 없애기 (0) | 2007.10.17 |
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
| 세로로 글쓰기 (0) | 2007.10.17 |
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
CSS(Cascading Style Sheet)의 구성요소
인터넷정보2007. 10. 17. 00:13
|
'인터넷정보' 카테고리의 다른 글
| absolute 와 relative의 차이점 (0) | 2007.10.17 |
|---|---|
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
| 페이지 여백 없애기 (0) | 2007.10.17 |
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
| 세로로 글쓰기 (0) | 2007.10.17 |
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
| 뒤로가기 금지! (0) | 2007.10.17 |
'인터넷정보' 카테고리의 다른 글
| 윈앰방송 시작시 방송 시그널 넣기 (0) | 2007.10.17 |
|---|---|
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
| 페이지 여백 없애기 (0) | 2007.10.17 |
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
| 뒤로가기 금지! (0) | 2007.10.17 |
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
플래시 백그라운드 투명처리
인터넷정보2007. 10. 17. 00:12
| 플래쉬 삽입소스에 <param name=wmode value=transparent> 이거를 추가하면 됩니다. 그러면 백그라운드가 투명처리되며, 플래쉬가 레이어 아래로 보이게 됩니다. |
'인터넷정보' 카테고리의 다른 글
| 텍스트 박스에 이미지 넣기 (0) | 2007.10.17 |
|---|---|
| 페이지 여백 없애기 (0) | 2007.10.17 |
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
| 세로로 글쓰기 (0) | 2007.10.17 |
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
| 뒤로가기 금지! (0) | 2007.10.17 |
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
폼에서 한글만 입력받기
인터넷정보2007. 10. 17. 00:12
| <INPUT type=text maxLength=5 size=10 name=name value="" onKeyPress="if((event.keyCode>90||event.keyCode<97)||event.keyCode>122)) event.returnValue=false;"> |
'인터넷정보' 카테고리의 다른 글
| 페이지 여백 없애기 (0) | 2007.10.17 |
|---|---|
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
| 세로로 글쓰기 (0) | 2007.10.17 |
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
| 뒤로가기 금지! (0) | 2007.10.17 |
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
| 이뿐거... (0) | 2007.10.17 |
BMP / JPG / GIF / PNG / PCX
인터넷정보2007. 10. 17. 00:12
| ① BMP 파일 MS-Windows의 기본 지원 이미지 파일입니다...즉 그림판에서 사용할 수 있는 매우 기본적인 파일 형식입니다...여러분의 윈도우 배경화면도 액티브 데스크톱이 아닌 이상 BMP로 되어있을 겁니다...게다가 이 형식은 이미지 그대로 저장합니다...따라서 편집이 용이하고 원본으로 보관하기에 가장 좋습니다...하지만 앞에서 말씀드렸다시피 압축하지 않기 때문에 그림이 커질수록 용량이 늘어납니다...보통 1~2메가가 되는 파일들이 대다수입니다...따라서 속도를 중시하는 인터넷에서는 다운로드 속도가 오래걸리는 BMP를 보여주지 못합니다... ② JPG 파일 현재 GIF와 더불어 가장 많이 쓰이고 있는 형식입니다...압축률을 조정할 수 있을 정도로 압축 기능이 뛰어나구요...(이 압축률과 그림의 품질은 반비례합니다)주로 사진 등에 많이 쓰입니다...이 형식을 글자에 적용할 경우 글자 옆에 먼지같은게 끼어 자세한 표현을 하지 못합니다...따라서 메뉴 등은 대부분 GIF로 만들어져 있습니다...JPG는 압축을 해야할 사진에 필요한 형식입니다...이 형식이 발생한 원인으로는...사진파일의 크기 때문입니다...JPG가 나오기 전 GIF도 있었습니다...하지만 GIF는 256색밖에 지원이 되지 않습니다...따라서 사진을 표현하는데 한계가 있져...사진을 표현하려면 BMP로는 너무 비대해지기 때문에 JPG가 나오게 된 것입니다... ③ GIF 파일 JPG와 함께 가장 많이 쓰이고 있는 형식입니다...픽셀 등은 건드리지 않고 그대로 보여주나, 256색밖에 보여주지 않는다는 결점이 있습니다...하지만 애니매이션도 지원하고, 그림의 변형이 일어나지 않는다는 장점이 있습니다...따라서 사진 등에는 잘 쓰이지 않으며, 주로 메뉴 등의 이미지에 사용합니다. 컴퓨서브라는 회사에서 이미지의 효율적 다운로드를 위해 256색으로 제한된 파일 규격을 만든데에서 시작합니다... ④ PNG 파일 JPG와 GIF의 결점을 보완하기 위해 만들어진 그림형식입니다...8비트와 24비트짜리가 있구요...당연히 24비트가 표현할 수 있는 색상도 많고, 용량도 크겠지요...그림변형도 크지 않으면서 256색 이상을 지원하는 장점이 있습니다...일부 구형 브라우저에서는 보여지지 않는다는 결점이 있습니다... ⑤ PCX 파일 현재는 거의 쓰이지 않는 형식이지만, 도스용 프로그램에서 많이 썼던 형식입니다...압축률이 낮습니다... 저 형식 중 웹에서 쓰이는 형식은 JPG,GIF,PNG밖에 없습니다...PNG도 완벽하게 지원되지 않습니다...주로 JPG와 GIF만 지원됩니다...저 세 형식만 사용되는 까닭은, 다른 이유도 있겠지만 압축률이 다른 형식에 비해 높기 때문이지요...웹은 인터넷에서 다운로드받아 HTML과 그림을 전부 PC에서 해석하는 과정을 거칩니다. 지금 보여지는 그림들은 전부 인터넷에서 다운로드받아져서, 사용자의 컴퓨터에서 해석과정을 거친후 보여지는 것이기 때문에 다운로드 속도가 크게 좌우합니다. 물론 다운로드 속도를 빠르게 할 수 있지만 그 전에 서버에 있는 자료의 용량을 최소화하는 일도 필요합니다...따라서 저 세 종류의 파일밖에 지원되지 않는 것입니다. 웹에서 사용되는 저 세 형식의 장단점을 표로 알아볼까요? | |||
|
GIF |
JPG |
PNG | |
|
압축률 |
높음 |
조정 가능 |
높음 |
|
색상지원 |
256색 |
3만색 |
3만색 |
|
그림변형 |
없음 |
있음 |
없음 |
저 표의 결과를 토대로 웹에 알맞은 적당한 그림파일 형식을 사용하는 것이 중요하겠지요...예를 들면 사진 등은 JPG가 좋으며, 256색으로 충분하지만 변형이 되지 않아야할 글자나 폰트 등은 GIF로 편집하시는게 좋습니다...굳이 원본의 품질을 그대로 유지하려면 PNG 파일을 사용하셔야 할겁니다... | |||
'인터넷정보' 카테고리의 다른 글
| 리스트태그의 리스트아이템을 이미지로 바꾸기 (0) | 2007.10.17 |
|---|---|
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
| 세로로 글쓰기 (0) | 2007.10.17 |
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
| 뒤로가기 금지! (0) | 2007.10.17 |
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
| 이뿐거... (0) | 2007.10.17 |
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
mypage.html 에서 뒤로가기를 막으려면,
<body onunLoad="window.location.replace('mypage.html')">
도구모음의 뒤로, 키보드의 백스페이스키,즐겨찾기의 다른사이트로가기 등등 모든 종류의 뒤로가기는 물론 다른 페이지로 가기까지 금지시킵니다.
다른페이지로 가려면 현재창을 두고 가는 수밖에..
<body onunLoad="window.location.replace('mypage.html')">
도구모음의 뒤로, 키보드의 백스페이스키,즐겨찾기의 다른사이트로가기 등등 모든 종류의 뒤로가기는 물론 다른 페이지로 가기까지 금지시킵니다.
다른페이지로 가려면 현재창을 두고 가는 수밖에..
'인터넷정보' 카테고리의 다른 글
| CSS(Cascading Style Sheet)의 구성요소 (0) | 2007.10.17 |
|---|---|
| 세로로 글쓰기 (0) | 2007.10.17 |
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
| 이뿐거... (0) | 2007.10.17 |
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
| 순서대로 포커스 주기 (0) | 2007.10.17 |
버튼 클릭으로 숫자를 증가/감소 시킵니다
인터넷정보2007. 10. 17. 00:10
<form>
<input type=text name=amount value=500>
<input type=button value="증가" onClick="javascript:this.form.amount.value++;">
<input type=button value="감소" onClick="javascript:this.form.amount.value--;">
</form>
<input type=text name=amount value=500>
<input type=button value="증가" onClick="javascript:this.form.amount.value++;">
<input type=button value="감소" onClick="javascript:this.form.amount.value--;">
</form>
'인터넷정보' 카테고리의 다른 글
| 세로로 글쓰기 (0) | 2007.10.17 |
|---|---|
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
| 뒤로가기 금지! (0) | 2007.10.17 |
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
| 이뿐거... (0) | 2007.10.17 |
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
| 순서대로 포커스 주기 (0) | 2007.10.17 |
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
폼에서 숫자만 입력받기
인터넷정보2007. 10. 17. 00:10
input 태그 안에 ONKEYPRESS="if ((event.keyCode<48)||(event.keyCode>57)) event.returnValue=false;"
또는 onkeypress="onlynumber();" 추가!
또는 onkeypress="onlynumber();" 추가!
'인터넷정보' 카테고리의 다른 글
| 플래시 백그라운드 투명처리 (0) | 2007.10.17 |
|---|---|
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
| 뒤로가기 금지! (0) | 2007.10.17 |
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
| 이뿐거... (0) | 2007.10.17 |
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
| 순서대로 포커스 주기 (0) | 2007.10.17 |
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
| <div id="layer1" style="position:absolute; left:120px; top:28px; width:180px; height:330px; z-index:1;"> <marquee behavior=alternate direction=up scrolldelay="100" width="150" height="200"> <marquee behavior=alternate direction=left scrolldelay="100"> <table width=70 height=70 border=0> <tr> <td style="filter:alpha(style=2);background-color:blue;" align="center"> <span style="font-size:12pt;color:white"><b>카</b></span> </td> </tr> </table> </marquee> </marquee> <marquee behavior=alternate direction=up scrolldelay="100" width="130" height="120"> <marquee behavior=alternate direction=left scrolldelay="100"> <table width=70 height=70 border=0> <tr> <td style="filter:alpha(style=2);background-color:FF33CC;" align="center"> <span style="font-size:12pt;color:white"><b>멜</b></span> </td> </tr> </table> </marquee> </marquee> <marquee behavior=alternate direction=up scrolldelay="100" width="75" height="90"> <marquee behavior=alternate direction=right scrolldelay="100"> <table width=60 height=60 border=0> <tr> <td style="filter:alpha(style=2);background-color:#238E23;" align="center"> <span style="font-size:14pt;color:white"><b>롯</b></span> </td> </tr> </table> </marquee> </marquee> <marquee behavior=alternate direction=up scrolldelay="100" width="120" height="150"> <marquee behavior=alternate direction=right scrolldelay="100"> <table width=50 height=50 border=0> <tr> <td style="filter:alpha(style=2);background-color:#3232CD;" align="center"> <span style="font-size:14pt;color:white"><b>의</b></span> </td> </tr> </table> </marquee> </marquee> <marquee behavior=alternate direction=up scrolldelay="100" width="130" height="130"> <marquee behavior=alternate direction=right scrolldelay="100"> <table width=70 height=70 border=0> <tr> <td style="filter:alpha(style=2);background-color:#FFFF00;" align="center"> <span style="font-size:14pt;color:white"><b>소</b></span> </td> </tr> </table> </marquee> </marquee> <marquee behavior=alternate direction=up scrolldelay="100" width="75" height="90"> <marquee behavior=alternate direction=right scrolldelay="100"> <table width=60 height=60 border=0> <tr> <td style="filter:alpha(style=2);background-color:#238E23;" align="center"> <span style="font-size:14pt;color:white"><b>스</b></span> </td> </tr> </table> </marquee> </marquee> <marquee behavior=alternate direction=up scrolldelay="100" width="120" height="120"> <marquee behavior=alternate direction=right scrolldelay="100"> <table width=50 height=50 border=0> <tr> <td style="filter:alpha(style=2);background-color:#3232CD;" align="center"> <span style="font-size:14pt;color:white"><b>천</b></b></span> </td> </tr> </table> </marquee> </marquee> <marquee behavior=alternate direction=up scrolldelay="100" width="130" height="200"> <marquee behavior=alternate direction=right scrolldelay="100"> <table width=70 height=70 border=0> <tr> <td style="filter:alpha(style=2);background-color:#FF00FF;" align="center"> <span style="font-size:14pt;color:white"><b>국</b></b></span> </td> </tr> </table> </marquee> </marquee> </div> |
'인터넷정보' 카테고리의 다른 글
| 폼에서 한글만 입력받기 (0) | 2007.10.17 |
|---|---|
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
| 뒤로가기 금지! (0) | 2007.10.17 |
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
| 순서대로 포커스 주기 (0) | 2007.10.17 |
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
IE6.0에서 추가된 스타일
인터넷정보2007. 10. 17. 00:09
http://oxtag.com/html/ex/text22.html
| 1. min-height 웹 사이트를 개발할 때에 우선은 제대로 보여주는 것이지만 이제는 방문자가 기다리는 시간을 얼마나 짧게 하느냐도 신경을 써야 할것입니다. <table border="1" style="table-layout:fixed; width:300;"> <tr><td style="height:103px; background-color:lightgreen"> 여기는 테이블(td)의 높이를 height로 내용보다 작게 지정한 경우 입니다. 물론 table-layout을 fixed로 사용하는 경우입니다. 보통은 이 fixed를 지정하지 않고 자동(auto)으로 사용하는데, 편리하지만 무척이나 느립니다. </td></tr> <tr><td style="min-height:40px; background-color:lightblue"> 여기는 테이블(td)의 높이를 min-heignt로 내용보다 작게 지정한 경우 입니다. 비록 table-layout을 fixed로 사용하였다 하더라도 적어도 안의 내용은 다 보여줍니다. 마치 table-layout을 auto로 사용한 것 처럼이요. </td></tr> </table> 2. text-overflow 박스나 테이블안에서 글이 너무길어 잘리는 경우가 발생할 수 있다. 이 경우에 쓰는 스타일로 새로 생긴 것이다. 매우 많은 태그에서 사용할 수 있으니 기억해 두는 것도 좋을 것입니다. 사용가는 태그: A, ACRONYM, ADDRESS, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, currentStyle, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, hn, I, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TEXTAREA, TT, U, UL, VAR, XMP 사용할 수 있는 값은 아래와 같다. "clip"이 기본값으로 넘어가는 부분은 가차없이 잘라버린다. "ellipsis" 요것때문에 새로 생긴 것으로 뒤에 생략기호(...)를 보여준다. <b>style="text-overflow:clip; overflow:visible; width=120"</b> <div style="width:120px; height:50px; border:1px solid blue; overflow:visible; text-overflow:clip"> <nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr> </div><br> <b>style="text-overflow:ellipsis; overflow:visible; width=120"</b> <div style="width:120px; height:50px; border:1px solid blue; overflow:visible; text-overflow:ellipsis"> <nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr> </div><br> <b>style="text-overflow:clip; overflow:hidden; width=120"</b> <div style="width:120px; height:50px; border:1px solid blue; overflow:hidden; text-overflow:clip"> <nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr> </div><br> <b>style="text-overflow:ellipsis; overflow:hidden; width=120"</b> <div style="width:120px; height:50px; border:1px solid blue; overflow:hidden; text-overflow:ellipsis"> <nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr> </div><br> 3.word-spacing 단어간의 간격을 조정합니다. <style> span.spacing{word-spacing: 10;} </style> <script> function fnChangeSpace(){ oSpan.style.wordSpacing=oSelSpace.options[oSelSpace.selectedIndex].text; } </SCRIPT> <select id="oSelSpace" onchange="fnChangeSpace()"> <option>1 <option>2 <option>7 <option selected>10 <option>15 <option>20 <option>25 <option>30 <option>35 </select> <span id="oSpan" class="spacing">단어간에 간격을 원문을 수정하지 않고 조정하는 조정합니다. 잘 될까요?</span> |
'인터넷정보' 카테고리의 다른 글
| BMP / JPG / GIF / PNG / PCX (0) | 2007.10.17 |
|---|---|
| 뒤로가기 금지! (0) | 2007.10.17 |
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
| 이뿐거... (0) | 2007.10.17 |
| 순서대로 포커스 주기 (0) | 2007.10.17 |
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
순서대로 포커스 주기
인터넷정보2007. 10. 17. 00:09
http://oxtag.com/html/ex/tabindex.html
미리보기 참고하세요. 인풋 태그가 아니더라도 기타 태그에도 사용할 수 있습니다.
로그인 같은 경우...
탭을 누르면 ID -> PASSWORD -> LOGIN 순으로 가야 입력하기 편하죠.
<input type=text name=user_id value='' size=9 class=input>
<input type=password name=password value='' size=9 class=input>
<input type=checkbox name=auto_login value=1 onclick=check_autologin()>
이렇게 되었을때 간혹 탭키를 누르면 포커스가 이상한 곳으로 가는 경우가 있습니다.
이럴때는 tabindex 속성을 사용합니다.
<input type=text name=user_id value='' size=9 class=input tabindex=1>
<input type=password name=password value='' size=9 class=input tabindex=2>
<input type=checkbox name=auto_login value=1 onclick=check_autologin() tabindex=3>
'인터넷정보' 카테고리의 다른 글
| 뒤로가기 금지! (0) | 2007.10.17 |
|---|---|
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
| 이뿐거... (0) | 2007.10.17 |
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우.
인터넷정보2007. 10. 17. 00:09
| 많은 분들이 아시는 것이지만. 그냥 혹시나 모르시는 분들을 위해서...^^ 인터넷 익스플로러 5.x 이상에서 한글로 된 URL 및 파일명을 표시하지 못할 수도 있습니다. 웹브라우저의 설정을 확인해 보세요. 인터넷 익스플로러 메뉴의 [도구] -> [인터넷 옵션] -> [고급] 으로 이동합니다. [고급] 항목 중 [탐색 설정] 부분의 "URL을 항상 UTF-8로 보냄(다시 시작필요)" 의 체크를 제거 하고. [확인] 버튼을 누릅니다. 실행되어 있는 인터넷 익스플로러를 모두 닫은 후, 다시 인터넷 익스플로러를 실행합니다. ※ UTF (Universal Transformation Format) UTF는 16 비트 유니코드 문자들을 7비트 혹은 8 비트 문자로 변환하기 위한 방법 입니다. UTF-7은 7 비트메일 시스템을 통한전송을 위해 7 비트 아스키 문자로 변경하는 것이고, UTF-8은 유니코드를 8 비트 문자로 변경하는 것입니다. 한글URL을 사용하는 사이트의 서버가 대부분 UTF-8로 인코딩된 URL을 처리할 수 없으므로 한글 버전에서는 기본적으로 이표준 사용을 해제합니다. |
'인터넷정보' 카테고리의 다른 글
| 버튼 클릭으로 숫자를 증가/감소 시킵니다 (0) | 2007.10.17 |
|---|---|
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
| 이뿐거... (0) | 2007.10.17 |
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
| 순서대로 포커스 주기 (0) | 2007.10.17 |
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
마우스 오버시 소리나게 하기(사운드)
인터넷정보2007. 10. 17. 00:09
| <bgsound src="#" ID=music loop=1 AUTOSTART=true> <a href="#" onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</a> <span onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</span> 앵커태그 및 스판태그등.. 여러가지 태그에 위 소스를 사용하시면 됨니다. 테스트는 드래그 복사 후 태그연습장에서.... |
'인터넷정보' 카테고리의 다른 글
| 폼에서 숫자만 입력받기 (0) | 2007.10.17 |
|---|---|
| 이뿐거... (0) | 2007.10.17 |
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
| 순서대로 포커스 주기 (0) | 2007.10.17 |
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
음악재생시 윈미플에서 나오는 시각화 효과
인터넷정보2007. 10. 17. 00:08
음악재생시 윈미플에서 나오는 시각화 효과 <object id="player" width="300" height="100" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="URL" value="mms://211.216.46.21/wma/23000/23387.wma"> <!--소스URL--> <param name="autoStart" value="true"><!--자동재생--> <param name="uiMode" value="none"><!--User Interface 모드--> <embed name="player" width="0" height="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="mms://211.216.46.21/wma/23000/23387.wma"> </embed> <!--미디어플레이어7.1 이하를 사용하고 있을경우 embed 태그로 플레이--> </object> |
'인터넷정보' 카테고리의 다른 글
| 이뿐거... (0) | 2007.10.17 |
|---|---|
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
| 순서대로 포커스 주기 (0) | 2007.10.17 |
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
알아두시면 유용한 간단한 스타일 시트
인터넷정보2007. 10. 17. 00:08
style="border-width: 1px 1px 1px 1px;border-style:none solid none solid;border-color: #ff0000 #ff0000 #ff0000 #ff0000;"
BORDER 4곳을 길게 쭉~~~ 써서 적을 필요없이 나타내는것 입니다..
각각 차례대로 top,right,bottom,left 입니다. 끝에 색상을 지정하지않으시면 기본적으로 회색비스무리한 색
아시죠? 기본적인보더색상..그걸로 나타납니다..^^
그리고 음...margin 이나 padding 쓸때도 이같은 방법을
이용할수 있습니다..
아래와 같이.^^
style="margin: 10px 0px 0px 0px;"
style="padding: 6px 12px 16px 12px;"
이 방법은 익스플로러6/넷스게이프7프리뷰/모질라1.0/오페라6.01에서 테스트해본결과 모두 잘됩니다.
<html>
<head>
</head>
<body>
<table style="border-width: 1px 1px 1px 1px;border-style:none solid none solid;border-color: #ff0000 #ff0000 #ff0000 #ff0000;">
<tr>
<td>
가나다라아자차카타파하
</td>
</tr>
</table>
</body>
</html>
BORDER 4곳을 길게 쭉~~~ 써서 적을 필요없이 나타내는것 입니다..
각각 차례대로 top,right,bottom,left 입니다. 끝에 색상을 지정하지않으시면 기본적으로 회색비스무리한 색
아시죠? 기본적인보더색상..그걸로 나타납니다..^^
그리고 음...margin 이나 padding 쓸때도 이같은 방법을
이용할수 있습니다..
아래와 같이.^^
style="margin: 10px 0px 0px 0px;"
style="padding: 6px 12px 16px 12px;"
이 방법은 익스플로러6/넷스게이프7프리뷰/모질라1.0/오페라6.01에서 테스트해본결과 모두 잘됩니다.
<html>
<head>
</head>
<body>
<table style="border-width: 1px 1px 1px 1px;border-style:none solid none solid;border-color: #ff0000 #ff0000 #ff0000 #ff0000;">
<tr>
<td>
가나다라아자차카타파하
</td>
</tr>
</table>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| IE6.0에서 추가된 스타일 (0) | 2007.10.17 |
|---|---|
| 순서대로 포커스 주기 (0) | 2007.10.17 |
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음)
인터넷정보2007. 10. 17. 00:08
익스플로러6에 등장한 이미지 툴바란 기능이 홈페이지 브라우징에 방해가 될때가 있죠?
특히 소스보기 금지 태그를 사용하는 사이트나 마우스 오른쪽 금지를 시키는 사이트에서....
이미지 툴바란 이미지 위에 마우스가 올라가면 저장,프린트,메일 등의 아이콘이 뜨는 기능입니다.
물론 앵커 태그로 둘러싸여 있거나 작은 사이즈일 경우는 나타나지 않지만......
어쨌든 이 기능을 disable 시켜주는 태그를 소개합니다.
첫번째는 메타 태그로 head 태그 내에 다음과 같이 써줍니다.
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
두번째는 이미지 태그의 속성으로 다음과 같이 써줍니다.
<IMG src="무지잘생긴내사진.jpg" width="500px" height="450px" GALLERYIMG="no">
이미지 전체에 적용하려면 첫번째 방법을 특정 이미지에만 적용하려면
두번째 방법을 쓰시면 되겠죠..
메타태그에 사용 후... 특정 이미지에 이미지 도구 모음이 나오게 하려면...
<img src="무지잘생긴내사진.jpg" width="500px" height="450px" galleryimg="yes">
특히 소스보기 금지 태그를 사용하는 사이트나 마우스 오른쪽 금지를 시키는 사이트에서....
이미지 툴바란 이미지 위에 마우스가 올라가면 저장,프린트,메일 등의 아이콘이 뜨는 기능입니다.
물론 앵커 태그로 둘러싸여 있거나 작은 사이즈일 경우는 나타나지 않지만......
어쨌든 이 기능을 disable 시켜주는 태그를 소개합니다.
첫번째는 메타 태그로 head 태그 내에 다음과 같이 써줍니다.
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
두번째는 이미지 태그의 속성으로 다음과 같이 써줍니다.
<IMG src="무지잘생긴내사진.jpg" width="500px" height="450px" GALLERYIMG="no">
이미지 전체에 적용하려면 첫번째 방법을 특정 이미지에만 적용하려면
두번째 방법을 쓰시면 되겠죠..
메타태그에 사용 후... 특정 이미지에 이미지 도구 모음이 나오게 하려면...
<img src="무지잘생긴내사진.jpg" width="500px" height="450px" galleryimg="yes">
'인터넷정보' 카테고리의 다른 글
| 순서대로 포커스 주기 (0) | 2007.10.17 |
|---|---|
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
글자 또는 배경등에 그라데이션 적용하기.
인터넷정보2007. 10. 17. 00:08
http://oxtag.com/html/ex/gradient.html
http://oxtag.com/html/ex/gradient_filter.html
소스와 미리보기는 링크를...
※ 간단한 옵션값 설명 ※
opacity : 투명 적용 시작부분의 투명도를 설정하는 부분입니다.
finishopacity : 투명도가 끝나는 지점의 투명도를 설정하는 부분입니다.
style :
1으로 설정하시면 fade 효과가 직선형으로 적용됩니다.
2으로 설정하시면 fade 효과가 타원형으로 적용됩니다.
3으로 설정하시면 fade 효과가 원추형으로 적용됩니다.
startX, startY :: 효과가 시작되는 X지점(가로)과 Y지점(세로)의 위치를 설정하는 곳입니다.
finishX, finishY :: 효과가 끝나는 끝지점을 나타냅니다.
height, weight 옵션을 반드시 px 단위로만 조절하시길....
% 단위로 하면 효과가 이상하게 적용됩니다.
'인터넷정보' 카테고리의 다른 글
| 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우. (0) | 2007.10.17 |
|---|---|
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
글자 사이 중간 점 찍기 (ex. O·S·T)
인터넷정보2007. 10. 17. 00:08
| <font style=font-family:돋움;font-size:9pt>글 작성시 마침표가 아닌 중간에 dot 가 필요할때가 있을것입니다. O·S·T 이것과 같이 가운데 점이 보이죠? 이럴때는 · 라는 것을 삽입시켜 주세요. O·S·T 또는 ㄱ 입력하시고 한자 누르면 화살표로 고를수 있습니다.</font> |
'인터넷정보' 카테고리의 다른 글
| 마우스 오버시 소리나게 하기(사운드) (0) | 2007.10.17 |
|---|---|
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
input 태그에 공지글 미리 넣기
인터넷정보2007. 10. 17. 00:07
| 좀 길죠. 공지글 미리 집어넣고 마우스 오버시 사라짐니다. 글 쓰기 전까지 유지. 아래 소스를 마우스 드래그 후 Ctrl + C 로 복사해서 태그연습장에서 실행해보세요. <input type=="Text" value="공지글 미리 집어넣기!" size="26" style="border:1 solid #595959; font-size:9pt; background-color:#EAFE7C;" onKeyDown="if (this.value=='공지글 미리 집어넣기!') this.value='';" onMouseOver="this.style.backgroundColor='#C4FF38'; if (this.value=='공지글 미리 집어넣기!') this.value='';" onMouseOut="this.style.backgroundColor='#EAFE7C'; if (this.value=='') this.value='공지글 미리 집어넣기!';" onClick="this.focus()"> |
'인터넷정보' 카테고리의 다른 글
| 음악재생시 윈미플에서 나오는 시각화 효과 (0) | 2007.10.17 |
|---|---|
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
감췄다... 보여줬다... -_-;; - display:hidden / display:visibility
인터넷정보2007. 10. 17. 00:07
| 텍스트나 input 또는 div 또는 span등... 을 적용할때 감추고자 싶을때 사용하는 것입니다. display와 visibility를 이용해서 보였다 안보였다하게 할 수 있습니다. display의 none에 대응하는 visibilty의 값은 hidden입니다. 반대는 visible이구요. display와 visibility의 차이점이라면, display는 none인 상태에서는 화면을 잡아먹지 않습니다. visibility는 hidden인 상태에서도 화면을 잡아먹습니다. 즉, visibility를 hidden으로 해놓더라도 화면상에는 안보이는 부분이 차지하는 공백이 그대로 나타난다는거죠. 적용 방법은 <div style=display:hidden>내용</div> 이런식으로 하시면 됨니다. 또는 <div style=visibility:hidden>내용</div> 이렇게... div 대신 다른 것을 적용해두 되구요. |
'인터넷정보' 카테고리의 다른 글
| 알아두시면 유용한 간단한 스타일 시트 (0) | 2007.10.17 |
|---|---|
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
