블로그 이미지

calendar

1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
  • total
  • today
  • yesterday
2010. 1. 29. 11:14 HTML
posted by 천상의날개
2010. 1. 28. 17:58 HTML
출처 몽당연필's Dungeon | 몽당연필
원문 http://blog.naver.com/dionly/120068302071

ul(Unordered List) : 순서 없는 목록
ol(Ordered List) : 순서 있는 목록
li(List) : 목록

dl(Definition List) : 용어 정의 목록
dt(Definition Terms) : 용어
dd(Definition Description) : 용어의 설명

 

 

예시 1)

<p>무기 아이템 목록</p>
<ul type="circle">
    <li>지팡이</li>
    <li type="disc">도검</li>
    <li type="circle">둔기</li>
    <li type="square">단검</li>
</ul>

출력

무기 아이템 목록

    ○ 지팡이

    ● 도검

    ○ 둔기

    ■ 단검

 

예시 2)

<p>무기 아이템 목록</p>
<ol>
    <li>지팡이</li>
    <li>도검</li>
    <li>둔기</li>
    <li>단검</li>

    <li type="a">도끼</li>
    <li type="A">활</li>
    <li type="i">총</li>
</ol>

출력

무기 아이템 목록

     1. 지팡이

     2. 도검

     3. 둔기

     4. 단

     e. 도끼

     F.  활

     Ⅶ. 총


예시 3)

<p>무기 아이템 목록</p>
<dl>
    <dt>총</dt>
    <dd>원거리 무기, 데미지 약함, 양손</dd>
    <dt>단검</dt>
    <dd>근거리 무기, 데미지 중간, 한손</dd>
</dl>

출력

무기 아이템 목록

      원거리 무기, 데미지 약함, 양손

단검

      근거리 무기, 데미지 중간, 한손

 

posted by 천상의날개
2010. 1. 28. 17:12 HTML

**** 텍스트박스 한글 먼저

textbox의 입력문자 제어하기(영문/한글)
  

1. 영문만 입력가능  : style="ime-mode:disabled"
2. 한/영중 선택가능 : style="ime-mode:auto"
3. 디폴트 한글        : style="ime-mode:active"
4. 디폴트 영문        : style="ime-mode:inactive"

ex)  디폴트로 한글 입력이 되는 입력폼
      <input type="text" name="user_name" style="ime-mode:active" />

      <asp:TextBox ID="txtSerch" runat="server" style="ime-mode:active" >

 

**** 숫자만 받기

function onlyNumber(){
 if ((event.keyCode<48) || (event.keyCode>57)){
  event.returnValue=false;
 }
}

 

**** 다음 텍스트박스로 포커스 이동

function move_focus(form){
 if (form.jumin1.value.length ==6){
  form.jumin2.focus();
  return;
 }

}

 

**** 주민번호 체크

var jumin1 = form.jumin1.value;
 var jumin2 = form.jumin2.value;

 var f1=jumin1.substring(0,1);
 var f2=jumin1.substring(1,2);
 var f3=jumin1.substring(2,3);
 var f4=jumin1.substring(3,4);
 var f5=jumin1.substring(4,5);
 var f6=jumin1.substring(5,6);
 var hap=f1*2+f2*3+f3*4+f4*5+f5*6+f6*7;
 var l1=jumin2.substring(0,1);
 var l2=jumin2.substring(1,2);
 var l3=jumin2.substring(2,3);
 var l4=jumin2.substring(3,4);
 var l5=jumin2.substring(4,5);
 var l6=jumin2.substring(5,6);
 var l7=jumin2.substring(6,7);
 hap=hap+l1*8+l2*9+l3*2+l4*3+l5*4+l6*5;
 var rem=hap%11;
 rem=(11-rem)%10;
 if (rem != l7)
 {
  alert("주민등록번호가 맞지 않습니다.");
  form.jumin1.focus();
  return false;
 }

 

*********textbox style

font-size:8pt  폰트크기를 8pt로 지정
background-color:transparent  박스내 배경색지정 (현재투명)
border-width:1px 테두리 값을 1넓이로지정
border-color:skyblue 1넓이로 지정한 테두리 색지정(현재색:skyblue) - skyblue대신색상값을넣으세요
border-style:solid 모양지정
height:15px 높이를 15px로지정

 

[출처] textbox 관련|작성자 비앙이

 

TextBox 자동스크롤생성

style="overflow-y:auto;" 

'HTML' 카테고리의 다른 글

html css 모움싸이트  (0) 2010.01.29
목록테그 (ul, ol, li, dl, dt,dd)  (0) 2010.01.28
a 테그 링크색 바꾸기  (0) 2010.01.28
form의 action을 각각 다르게가기  (0) 2010.01.28
a 테그 location  (0) 2010.01.28
posted by 천상의날개
2010. 1. 28. 14:09 HTML

헤드부분에 밑의 스타일 시트를 넣어주세요.

(pre 태그는 삭제해 주십시오. ^^;)

 

<pre>

<style type="text/css">

<!--

A:link { color:아무색이나 ;text-decoration:none ; }
A:visited { color:아무색이나 ;text-decoration:none ; }
A:active { color:아무색이나 ; text-decoration:none ; }
A:hover { color:아무색이나 ; text-decoration:none; }

-->

</style>

</pre>

 

A:link           -> 링크의 색

A:visited       -> 방문했던 링크의 색

A:active        -> 링크 클릭할 순간의 링크의 색

A:hover         -> 링크 텍스트에 마우스를 댔을때의 링크의 색

posted by 천상의날개
2010. 1. 28. 14:08 HTML

<HTML>
 <HEAD>
 <SCRIPT LANGUAGE="JavaScript">
 <!--
 function submitTest(mode){
  if(mode == "add"){
   alert("글등록처리");
   fm.action = "글등록처리.php";
  }else if(mode == "edit"){
   fm.action = "수정하기.php";
  }

  fm.submit();
 }
 //-->
 </SCRIPT>

 </HEAD>

 <BODY>

 <FORM METHOD=POST name="fm">
 <INPUT TYPE="text" NAME=""><br>
 <INPUT TYPE="text" NAME=""><br>
 <INPUT TYPE="text" NAME=""><br>
 <INPUT TYPE="text" NAME=""><br>


 <INPUT TYPE="button" value="글등록처리" onClick="submitTest('add')">
 <INPUT TYPE="button" value="수정하기" onClick="submitTest('edit')">
 </FORM>
 
 </BODY>
</HTML>

'HTML' 카테고리의 다른 글

목록테그 (ul, ol, li, dl, dt,dd)  (0) 2010.01.28
textbox style과 유효성검사  (0) 2010.01.28
a 테그 링크색 바꾸기  (0) 2010.01.28
a 테그 location  (0) 2010.01.28
&nbsp; &amp; &lt; &gt; &quot; 의 의미와 사용법은?  (0) 2010.01.28
posted by 천상의날개
2010. 1. 28. 14:03 HTML

1번페이지에서 2번페이지로와서 2번 페이지에서 링크를 클릭했다고 하자 링크는 2개이다.

location.replace("www.naver.com")과

location.href="www.naver.com"

이다.

replace의 경우 네이버에서 뒤로가기를 눌렀을경우 뒤로가는페이지는 1번페이지가 된다.

href의 경우 2번페이지이다.

replace는 히스토리를 덮어버리는 기능을 하는것이다.

history.length를 참조해보자.

 

 

----------  테스트 -------

<a href="#" onclick='document.location.replace("http://www.naver.com");return false;'> replcae</a>

<a href="#" onclick='document.location.href="http://www.naver.com";return false;'> href</a>

 

위에걸 html 페이지를 생성해서

넣은후 각각 클릭해보자

href는 누른후에 뒤로가기가 활성화돼지만

replace는 활성화가 돼지 않는다.

posted by 천상의날개
2010. 1. 28. 13:32 HTML

&nbsp;


" " : 공백(스페이스 한 칸)을 의미.
띄어쓰기를 할 때는 키보드의 스페이스키(가장 길쭉한 키)를 한 번 눌러 "공백 문자" 즉 빈 칸을 한 개 삽입합니다. 그런데 HTML 문법에서는, 일반 텍스트 편집에서와 달리, 공백 2개를 연속으로 사용해도 2칸을 띄어쓸 수 없습니다. 공백을 아무리 많이 삽입해도 공백 1개로 간주됩니다. 그래서 공백을 여러 개 사용해야 할 때는, 빈 칸을 &nbsp; 이렇게 표현해 줍니다. 그러면 브라우저가 &nbsp; 기호를 빈 칸으로 표시해 줍니다.

예제:
aaa    bbb

이렇게 aaa와 bbb 사이에 공백을 4칸 넣어줄 때에는

aaa&nbsp; &nbsp; bbb

이렇게 합니다. 진짜 공백과 &nbsp; 기호를 번갈아서 쓰면 됩니다.




&lt;


부등호(<)
괄호로 사용되기도 하고, 수식에서 "무엇보다 적다(Less Than)"는 의미로 사용되기도 하는 기호입니다. 그런데 < 기호는 HTML 파일에 직접 사용할 수 없습니다. (물론 사용해도 브라우저가 알아서 자동으로 처리해 주지만 나중에 에러가 날 수 있습니다.) 왜냐하면 < 기호는 HTML태그를 둘러싸는 기호이기 때문입니다.

제목이 <여기에> 표시됩니다 라는 문자열을 <h1></h1> 태그 안에 넣을 때,

<h1>제목이 <여기에> 표시됩니다</h1>

라고 하면 <여기에> 라는 것도 하나의 HTML태그로 간주되어 버립니다. <여기에> 라는 태그는 없기에 이것은 오류입니다.

따라서 < 기호를, &lt; 이렇게 표기하면 태그와 혼동되지 않고 부등호가 잘 표현됩니다.



&gt;


부등호(>)
위의 경우와 같습니다. 닫는 괄호 또는, "무엇에 비해 크다(Greater Than)"는 뜻.




&amp;


앰퍼샌드(&) 기호는, 위의 경우들에서 보는 것과 같이 이미 특수한 용도로 사용되고 있습니다. 그래서 & 기호 자체를 표현해 주기 위해서는 & 를, &amp; 이렇게 표기해 주어야 합니다.



&quot;


이것은 쌍따옴표(") 하나를 표현하는 것입니다.

<a href="http://www.google.co.kr/">구글 "검색" 홈페이지</a>

가량 이런 링크가 있다고 할 때, 링크를 표현하는 <a> 태그 안에 속성을 나타내기 위해 href="" 이 부분에서 쌍따옴표가 사용되었습니다. 그런데 <a> 태그 안에 자바스크립트를 집어넣을 때, 자바스크립트의 쌍따옴표들이 태그 속성의 쌍따옴표와 겹쳐져 서로 충돌할 수 있습니다. 이때는 아주 심각한 에러가 납니다. 그럴 경우에는 자바스크립트 안의 쌍따옴표들을 &quot; 이렇게 표현하면 해결됩니다.

그러나 링크 제목 안에서는 구글 "검색" 홈페이지 이렇게 따옴표를 사용해도 괜찮습니다. 자바스크립트가 아닌 평범한 문자열에서는 쌍따옴표든 홑따옴표든 따옴표를 따옴표 그대로 사용하면 되고 굳이 &quot; 이렇게 바꾸지 않아도 됩니다.

요약하자면, &quot; 는, 태그 내부의, 쌍따옴표로 둘러싸인 곳 안에서 다시 쌍따옴표를 사용할 때 필요한 것입니다.

즉 &quot; 는 따옴표 충돌의 문제가 있을 때에만 사용하고 보통의 경우에는 사용하지 않습니다

'HTML' 카테고리의 다른 글

목록테그 (ul, ol, li, dl, dt,dd)  (0) 2010.01.28
textbox style과 유효성검사  (0) 2010.01.28
a 테그 링크색 바꾸기  (0) 2010.01.28
form의 action을 각각 다르게가기  (0) 2010.01.28
a 테그 location  (0) 2010.01.28
posted by 천상의날개