왕초보10분 JQUERY

8개

select box 옆에 선택옵션별로 text 나타내기

2017. 7. 11. 10:41

상품별 안내 메세지 다르게 나타내기

select box 옆에 선택옵션별로 text 나타내기




<script language="javascript" src="costchange.asp"></script>

<script type="text/javascript"> 


function pro_img_change_nomal(){

    var frm = document.orderform;

   if (frm.paper_code[frm.paper_code.selectedIndex].text == "상품 1"){

        frm.product_img.src= "/common/images/product_1.jpg"

   }

   else if (frm.paper_code[frm.paper_code.selectedIndex].text == "상품 2"){

         frm.product_img.src=  "/common/images/product_2.jpg"

   }

   else if (frm.paper_code[frm.paper_code.selectedIndex].text == "상품 3"){

         frm.product_img.src=  "/common/images/product_3.jpg"

   }

}

</script>


<table border="0" cellpadding="0" cellspacing="0">

  <tr>

<th class="pdt12" valign="top"><p class="t_txt06"></p></th>

  <td class="pdt12">

           <select class='drop02' style="width:160px; float:left;" id="paper_code" name="paper_code" onChange="javascript:pro_img_change_nomal();costchange();chkcost();">

<option value='ppkh5' <%if paper_code="ppkh5" then %> selected<%end if %>>상품 1</option>

<option value='ppkh6' <%if paper_code="ppkh6" then %> selected<%end if %>>상품 2</option>

<option value='ppkh8' <%if paper_code="ppkh8" then %> selected<%end if %>>상품 3</option>

    </select>

<span id="out_msg" style="display:none;"> <span id="out_msg_detail" class="font12" style=" color:#ff0000; vertical-align: top; line-height: 0px; font-weight:bold; font-size:11px;" ></span>

</span> 

<span id="out_msg_01" style="display:none;"> <span id="out_msg_detail" class="font12" style=" color:#ff0000; vertical-align: top; line-height: 0px; font-weight:bold; font-size:11px;" >* 상품 1 메세지</span>

</span>

<span id="out_msg_02" style="color:#ff0000; vertical-align: top; line-height: 8px; font-weight:bold; font-size:11px; padding-left:114px; display:none;">

<span>* 남은 수량 10개</span></span>

  </td>

</tr>

 </table>



costchange.asp 파일에

function costchange()

{


    if (document.orderform.paper_code.value == "ppkh5" ){

        document.all.out_msg_01.style.display="block";

        document.all.out_msg_02.style.display="none";

    }

else if (document.orderform.paper_code.value == "ppkh6" ){

        document.all.out_msg_01.style.display="none";

        document.all.out_msg_02.style.display="block";

    }


    else{

        document.all.out_msg.style.display="none";

    }

}



'왕초보10분 JQUERY' 카테고리의 다른 글

select box 옆에 선택옵션별로 text 나타내기  (0) 2017.07.11
상담신청 입력폼  (0) 2017.06.20
transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
costchange, select, select box, 선택 메세지, 옵션 메세지, 옵션 박스

개의 댓글이 있습니다.

상담신청 입력폼

2017. 6. 20. 15:48


상담신청 입력폼 만들기





작성자가 입력하는 form 파일이 존재해야 합니다.
이건 일반적인 HTML 파일인데요...
내용은 대체로 다음과 같은 형식을 따릅니다.
이 파일의 이름은 아무거나 사용해도 됩니다.
여기선 test.html 이라고 가정합니다.

--------------------------------------------------------------------------------
<html>

<head>
<title>내용을 입력 받습니다.</title>
</head>

<body>

<form method="post" action="./sendme.php">
성명을 입력하세요 : <input type="text" name="iname" value="" size=10 maxlength=10><br>
전화번호 입력하세요 : <input type="text" name="itel1" value="" size=4 maxlength=4>-<input type="text" name="itel2" value="" size=4 maxlength=4>-<input type="text" name="itel3" value="" size=4 maxlength=4><br>
<input type="submit">
< / form >

</body>

</html>
--------------------------------------------------------------------------------

잠시 설명을 하자면...
<form method="post" action="./sendme.php">
라인에서 method는 입력된 값을 PHP 파일로 넘기기 위한 방법을 설정합니다.
여기에 사용할 수 있는 값은 post 내지는 get 인데... 일반적으로 post를 사용하시기 바랍니다.
get은 넘길 수 있는 값의 길이에 제한이 있는데다가 넘기는 값이 노출되어서 주민등록번호나 카드번호등 민감한 정보엔 사용하지 않습니다.
action="./sendme.php" 는 같은 디렉토리 내의 sendme.php 라는 파일로 전송하라는 얘깁니다.
이 <form> tag는 < / form > tag로 마무리를 해 주어야 합니다.

<form> tag와 < / form > tag 사이에는 <input> tag가 있습니다.
이 <input> tag가 실제로 값을 입력받는 역할을 합니다.
<input type="text" name="iname" value="" size=10 maxlength=10>

1) type="text"
type은 형식을 말합니다.
text는 일반적으로 글자를 입력받을 수 있게 하구요.
다른 값이 올 수도 있습니다.(hidden, password, image 등등)

2) name="iname"
이건 변수명을 말합니다.
다른 입력값들의 name 과 중복되면 안됩니다.
나중 PHP파일에서 $_POST["iname"] 이라는 변수명으로 접근할 수 있습니다.

3) value=""
초기값을 말합니다.
여기에 value="이름을입력" 이라고 해 놓으시면 입력란에 "이름을입력"이라는 글자가 보이게 됩니다.

4) size=10
입력창의 길이를 말합니다.
영문 10자까지가 바로 보일정도의 길이 입니다.

5) maxlength=10
최대 입력길이를 말합니다.
역시 영문 10자까지 입력 받을 수 있는 길이입니다.
이 값이 더 크면 입력창의 범위를 넘어서도 입력 가능합니다.

<input type="submit">
이건 버튼을 만듭니다.
일반 버튼이 아니라 입력된 값을 <fomr> tag 중 action="./sendme.php" 에 지정된 파일로 전송하는 버튼입니다.
여기서는 값은 디렉토리 내의 sendme.php 라는 파일로 전송됩니다.

여기까지 간단한 입력폼을 설명 했구요.
이제 이걸 처리해서 메일로 보내는 PHP 파일을 설명 드리겠습니다.
이 파일의 이름은 sendme.php 가 됩니다.

우선 메일을 받을 주소가 admin@test.com 이라고 가정하고 설명 하겠습니다.
위의 html 파일에서 정상적으로 값을 입력했다면 이 php 파일에서 확인할 수 있는 변수는 다음과 같이 총 4개가 됩니다.

$_POST["iname"], $_POST["itel1"], $_POST["itel2"], $_POST["itel3"]

이 값들을 눈으로 확인하시려면 아래 source 에서 <? 하단에

print_r($_POST);

라고 입력 하시면 됩니다.
이제 넘어온 값을 메일로 전송합니다.

--------------------------------------------------------------------------------
<?
$_mailbody = "성명 : ".$_POST["iname"]."\n전화번호 : ".$_POST["itel1"]." - ".$_POST["itel2"]." - ".$_POST["itel3"]."\n";
mail("admin@test.com", "메일제목", $_mailbody);
?>
--------------------------------------------------------------------------------

설명을 드리면...
<? 는 여기서부터 PHP라는 선언정도가 되겠습니다.
시작이 있으면 끝이 있는법...
?> 는 PHP의 끝을 나타냅니다.

우선은 성명과 전화번호를 다음과 같은 형식의 문자열로 만들어 $_mailbody 라는 변수에 넣습니다.
첫번째 라인이 그와 같은 작업입니다.

성명 : 입력값
전화번호 : 입력값-입력값-입력값

위에서 입력값에는 실제로 입력한 값들이 들어갑니다.
PHP에서는 문자열을 서로 붙이기 위해서 . 을 사용합니다. 즉 "김"."철수" 는 나중에 확인하면 "김철수"가 됩니다.
그 . 연산자를 사용해서 각 값들을 서로 붙였습니다.
중간 중간에 \n 이라는 문자열이 있는데 이건 여기서 줄을 바꾸란 얘깁니다.

이렇게 만들어진 값을 이제 메일로 보냅니다.
매일로 보낼땐 mail() 함수를 사용합니다.
복잡하게 하려면 한없이 복잡하게 쓸 수 있는 함수인 반면 간단하게 하려면 정말 간단해 질 수 있습니다.
첫번짼 메일을 받을 주소가 위치합니다.
"admin@test.com" 이 그 부분입니다.
그리곤 메일 제목이 위치합니다.
"메일제목" 이 그 부분입니다.
그리고 마지막으로 메일의 본문이 위치합니다.
메일의 본문은 위에서 작성한 $_mailbody 변수를 그대로 씁니다.

이 mail() 함수는 서버에 메일서버가 작동중이어야 사용할 수 있습니다.

이상이 없다면 이렇게 하면 원하는 주소로 메일을 받을 수 있습니다.
그런데... 실제로 쓸만하려면 입력된 값들을 확인하기 위해서 JavaScript도 써야 하구...
입력폼을 조금 더 예쁘게 꾸미려면 HTML Tag들과 CSS 등이 필요합니다.

'왕초보10분 JQUERY' 카테고리의 다른 글

select box 옆에 선택옵션별로 text 나타내기  (0) 2017.07.11
상담신청 입력폼  (0) 2017.06.20
transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
입력폼

개의 댓글이 있습니다.

transform matrix

2017. 1. 18. 11:02
transform matrix 

출처

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

: 이미지는 모두 위 페이지를 캡쳐한 것입니다.


- Why Should I Care?

: 다른 transform 함수를 조합해서 사용하는 것 보다 간결하다.

: 픽셀 단위까지 정확히 원하는 형태로 변형할 수 있다.

: object(element)의 변형 정보를 알려주는 javascript 함수, getComputedStyle()은 matrix() 함수를 결과로 반환한다.

: 출처 페이지에서 getComputedStyle(document.getElementById("exampleRotation")) 를 실행한 결과 중 transform에 관한 부분.



- What Does the Markup Look Like?


: 6개의 파라매터를 가지고 있다. firefox 만 마지막 두 파라매터에 "px"를 사용한다.


- Matrix

: CSS3 2D Transform 에서는 3x3 행렬만 사용하며 의미는 아래와 같다.


: 행렬 우 하단 값은 항상 1 이다. matrix 함수의 첫 번째 인자와 같은 것이 아니다.

: matrix 함수의 파라매터로 만들어진 행렬은 object의 각 모서리 좌표(벡터)와 곱해져서 옮겨질 위치가 결정된다.

: 예를 들어 벡터 (2, 3)에 대한 matrix(4, 5, 6, 7, 8, 9) transform은 아래 식으로 계산된다.



- Meaning of Numbers


: 행렬의 곱을 이용해서 변형을 조합할 수 있다. 

: 예를 들어 scale과 translate 를 하는 행렬을 만들려면 

  위 표에서 scale(a)하단 행렬과 translate 하단 행렬을 곱한 행렬을 사용하면된다.


- 기타 참고

http://www.answers.com/topic/transformation-matrix



'왕초보10분 JQUERY' 카테고리의 다른 글

select box 옆에 선택옵션별로 text 나타내기  (0) 2017.07.11
상담신청 입력폼  (0) 2017.06.20
transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22

개의 댓글이 있습니다.

CSS 강좌 | 그라데이션 만들기 > linear-gradient

2016. 10. 21. 10:05

CSS 강좌 | 그라데이션 만들기 > linear-gradient

linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만들 수 있습니다.

기본 문법은 다음과 같습니다.

linear-gradient( direction, color1, color2, …, color3 );

direction에는 그라데이션 방향을 입력합니다.

  • to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값)
  • to top : 아래에서 위로 그라데이션을 만듭니다.
  • to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다.
  • to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다.
  • ndeg : n도의 방향으로 그라데이션을 만듭니다.

색은 여러개 입력할 수 있습니다. 입력한 순서로 설정한 방향으로 그라데이션을 만듭니다.

예를 들어

linear-gradient( to right, yellow, red );

는 왼쪽에서 오른쪽으로 노란색과 빨간색 순서로 그라데이션을 만듭니다.

예제 1

http://book.cmsfactory.net/CSS/V01/lecture/gradient-01.html

방향에 따라 그라데이션이 어떻게 만들어지는지 비교하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Gradient</title>
    <style>
      div {
        width: 100%;
        height: 100px;
        margin-bottom: 10px;
      }
      .jbGrad01 {
        background: linear-gradient( to bottom, yellow, red );
      }
      .jbGrad02 {
        background: linear-gradient( to top, yellow, red );
      }
      .jbGrad03 {
        background: linear-gradient( to right, yellow, red );
      }
      .jbGrad04 {
        background: linear-gradient( to left, yellow, red );
      }
      .jbGrad05 {
        background: linear-gradient( 45deg, yellow, red );
      }
    </style>
  </head>
  <body>
    <div class="jbGrad01">to bottom</div>
    <div class="jbGrad02">to top</div>
    <div class="jbGrad03">to right</div>
    <div class="jbGrad04">to left</div>
    <div class="jbGrad05">45deg</div>
  </body>
</html>

색만 입력했을 때는 색을 균등하게 배분하여 그라데이션을 만듭니다. 색 뒤에 백분율 또는 픽셀 등으로 길이를 입력하면 그 길이까지 해당 색을 사용합니다.

예를 들어

linear-gradient( to right, yellow 50%, red 60%, purple );

은 해당 요소의 왼쪽에서 50%까지는 노란색, 50% 초과 60% 이하에는 빨간색, 나머지는 보라색으로 그라데이션을 만듭니다.

예제 2

http://book.cmsfactory.net/CSS/V01/lecture/gradient-02.html

색 뒤에 길이를 정하여 그라데이션을 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Gradient</title>
    <style>
      div {
        width: 100%;
        height: 100px;
        margin-bottom: 10px;
      }
      .jbGrad01 {
        background: linear-gradient( to right, yellow, red, purple, blue );
      }
      .jbGrad02 {
        background: linear-gradient( to right, yellow 50%, red, purple, blue );
      }
      .jbGrad03 {
        background: linear-gradient( to right, yellow 50%, red 60%, purple, blue );
      }
      .jbGrad04 {
        background: linear-gradient( to right, yellow 50px, red 300px, purple 90%, blue );
      }
    </style>
  </head>
  <body>
    <div class="jbGrad01">to right, yellow, red, purple, blue</div>
    <div class="jbGrad02">to right, yellow 50%, red, purple, blue</div>
    <div class="jbGrad03">to right, yellow 50%, red 60%, purple, blue</div>
    <div class="jbGrad04">to right, yellow 50px, red 300px, purple 90%, blue</div>
  </body>
</html>

repeating-linear-gradient는 그라데이션을 반복합니다.

예제 3

http://book.cmsfactory.net/CSS/V01/lecture/gradient-03.html

그라데이션을 반복하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Gradient</title>
    <style>
      div {
        width: 100%;
        height: 400px;
      }
      .jbGrad01 {
        background: repeating-linear-gradient( yellow, red 10%, purple 20% );
      }
    </style>
  </head>
  <body>
    <div class="jbGrad01"></div>
  </body>
</html>

웹브라우저 호환성

웹브라우저 prefix 없이 linear-gradient를 사용할 수 있는 웹브라우저 버전은 다음과 같습니다.

  • Chrome : 26.0+
  • Firefox : 16.0+
  • Internet Explorer : 10.0+
  • Opera : 12.1+
  • Safari : 6.1+
Category


'왕초보10분 JQUERY' 카테고리의 다른 글

상담신청 입력폼  (0) 2017.06.20
transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
jquery - for구문  (0) 2016.07.21

개의 댓글이 있습니다.

패밀리사이트

2016. 7. 29. 20:51
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>하단 패밀리사이트 만들기</title>
<style>
.rel{position:relative}
.center{ width:1000px; margin:0 auto}
.fl{ float:left}
.clear{ clear:both}


footer.fn{ border-top:1px solid #ccc; }
footer.fn  div.bottom{ background:#ccc; padding:20px 0}


</style>
</head>

<body>
<footer class="fn rel ">
<div class="center rel">
    <!--div.fl.rel(>h3.fl.rel{삼양타이틀}+div.rel.txt.fl{삼양컨텐츠}+div.fr.rel.more{more}+div.clear)+div.fl.rel#family(>a[href=#none]{패밀리사이트})+div.clear-->
<div class="fl rel">
<h3 class="fl rel">삼양타이틀</h3>
<div class="rel txt fl">삼양컨텐츠</div>
<div class="fr rel more">more</div>
<div class="clear"></div>
</div>
<div class="fl rel" id="family"><a href="#none">패밀리사이트</a></div>
<div class="clear"></div>
    </div>
<div class="bottom rel"></div>
</footer>
</body>
</html>


'왕초보10분 JQUERY' 카테고리의 다른 글

transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
jquery - for구문  (0) 2016.07.21
제이쿼리 다운로드 jquery CDN  (0) 2016.07.20

개의 댓글이 있습니다.

jquery 기본 CSS 선택자

2016. 7. 22. 09:01

http://wickedmagic.tistory.com/trackback/251

01) 기본 CSS 선택자

 -. DOM API부분 중 document.querySelector( ), querySelectorAll( ) 메서드와 같은 기본 CSS 선택자와 필터 등을 이용할 수 있다.

     (jQuery만의 고유한 선택자도 지원)

선택자

설                  명

 *

 -. 모든 엘리먼트를 선택한다.

 E

 -. 태그 이름이 E인 모든 엘리먼트를 선택한다.

 E F

 -. E의 자손이면서 태그 이름이 F인 모든 엘리먼트를 선택한다.

 E > F

 -. E의 바로 아래 자식이면서 태그 이름이 F인 모든 엘리먼트를 선택한다.

 E + F

 -. E의 형제 엘리먼트로 바로 다음에 나오는 모든 엘리먼트 F를 구한다.

 E ~ F

 -. E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F를 구한다.

 E:has(F)

 -. 태그 이름이 F인 자손을 하나 이상 가지는 태그 이름이 E인 모든 엘리먼트를 선택한다.

 E.C

 -. 클래스 이름이 C를 가지는 모든 엘리먼트 E를 선택한다. (E를 생략하면 *.C와 같다.

 E#I

 -. 아이디가 I인 엘리먼트 E를 선택한다. E를 생략하면 *.#I와 같다.

 E[A]

 -. 속성 A를 가지는 모든 엘리먼트 E를 선택한다.

 E[A=V]

 -. 값이 V인 속성 A를 가지는 모든 엘리먼트 E를 선택한다.

 E[A~=V]

 -. 값이 V로 끝나는 속성 A를 가지는 모든 엘리먼트 E를 구한다.

 E[A*=V]

 -. 값에 V를 포함하는 속성 A를 가지는 모든 엘리먼트 E를 선택한다.

 



02) 위치기반 선택자(필터)

 -. 선택자를 이용해 위치를 정해주게 되면 손쉽게 위치를 기반으로 하여 선택할 수 있을 뿐 아니라 모든 엘리먼트를 검색하지 않아도 된다.

    (페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관도니 관계를 기반으로 엘리먼트를 선택해야 한다.)

선택자

설                  명

 :first

 -. 페이지에서 처음으로 일치하는 엘리먼트이다.
 -. li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
 :last

 -. 페이지에서 마지막으로 일치하는엘리먼트이다.

 -. li a:list는 아이템의 마지막 링크를 반환한다.

 :fist-child

 -. 첫 번째 자식 엘리먼트이다.

 -. li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.

 :last-child

 -. 마지막 자식 엘리먼트이다.

 -. li:last-child는 각 리스트의 마지막 아이템을 반환한다.

 :only-child

 -. 형제가 없는 모든 엘리먼트를 반환한다.

 :ntn-child(n)

 -. n번째 자식 엘리먼트이다.

 -. li:nth-child(2)는 각 리스트의 두 번쨰 리스트 아이템을 반환한다.

 :ntn-child(even | odd)

 -. 짝수(even) 또는 홀수(odd) 자식 엘리먼트이다.

 -. li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.

 :ntn-child(Xn + Y)

 -. 전달된 공식에 따른 n번째 자식 엘리먼트이다.

 -. Y는 0인 경우 생략 가능하다.

 -. li:nth-child(3n)은 3의 배수 번쨰 아이템을 반환한다.

 -. li:nth-child(5n + 1)은 5의 배수 + 1번째 아이템을 반환한다.

 :even / :odd

 -. 페이지 전체의 짝수 / 홀수 번째 아이템을 반환한다.

 :eq(n)  -. n번쨰로 일치하는 엘리먼트를 반환한다.

 :gt(n)

 -. n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트를 반환한다.

 :lt(n)

 -. n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트를 반환한다.

 



03) 정의 필터 선택자

 -. CSS 명세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 할 경우 사용한다.

선택자

설                  명

 :animated

 -. 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.

 :button

 -. 모든 버튼을 선택한다.

     <input [type = submit]>, <input [type = reset]>, <input [type = button]>, <button>

 :checkbox

 -. 확인란 엘리먼트만 선택한다.

     <input [type = checkbox]>

 :checked

 -. 선택된 확인란이나 라디오 버튼만을 선택한다.(CSS에서 지원)

 :contains(foo)

 -. 텍스트 foo를 포함하는 엘리먼트만 선택한다.

 :disabled  -. 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
 :enabled

 -. 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.

 :file

 -. 모든 엘리먼트를 선택한다.

     <input [type = file]>

 :header

 -. 헤더 엘리먼트만 선택한다.

     (예를 들어 <h1>부터 </h6>까지의 엘리먼트를 선택한다.

 :hidden  -. 감춰진 엘리먼트만 선택한다.
 :image

 -. 폼 이미지를 선택한다.

     <input [type = image]>

 :input

 -. 폼 엘리먼트만 선택한다.
     <input>, <select>, <textarea>, <button>

 :not(selector)

 -. selector가 아닌 것을 선택한다.

 -. 괄호 안의 조건이 아닌 것을 선택한다.

 :parent

 -. 빈 엘리먼트를 제외하고 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
 :password

 -. 비밀번호 엘리먼트만 선택한다.

     <input [type = password]>

 :radio

 -. 라디오 버튼 엘리먼트만 선택한다.

     <input [type = radio]>

 :reset

 -. 리셋 버튼을 선택한다.
     <input [type = reset]>이나 <button [type = reset]>

 :selected  -. 선택된 엘리먼트만 생각한다.
 :submit  -. 전송 버튼을 선택한다.
    <button [type = submit>이나 <input [type = submit]>
 :text  -. 텍스트 엘리먼트만 선택한다.
    <input [type = text]>
 :visible

 -. 보이는(visible) 엘리먼트만 선택한다.

'왕초보10분 JQUERY' 카테고리의 다른 글

transform matrix  (0) 2017.01.18
CSS 강좌 | 그라데이션 만들기 > linear-gradient  (0) 2016.10.21
패밀리사이트  (0) 2016.07.29
jquery 기본 CSS 선택자  (0) 2016.07.22
jquery - for구문  (0) 2016.07.21
제이쿼리 다운로드 jquery CDN  (0) 2016.07.20

개의 댓글이 있습니다.

1 2

총 3,103,618명이 방문했어요.

오늘 0명 | 어제 251명

Blogger is 세미짱 & Simplify v1.1 made by OPNay