linuxism

여러개의 element 선택

h1, h2 { }

class 선택자

p.greentea { } /* class가 greentea인 <p/> 선택 */

.greentea{ } /* class가 greentea인 모든 태그 */

id 선택자

#footer { } /* id가 footer인 모든 태그 */

p#footer{}

자식(Child) element 선택

중첩이 2단계 이상 깊어지는 자손(자식의 자식)은 선택하지 않습니다. 오직 한 단계 바로 아래 포함된 자식만 선택합니다.

div>h2{ color:red} /* <div/> 하위에 있는<h2/> 선택  */

.detail>p {}   /* class가 "detail"로 지정되어 있는 하위의 <p/> 선택 */

자손(Descendant) element 선택

div h2{ color:red} /* <div/> 하위에 있는<h2/> 선택  */

.detail p {}   /* class가 "detail"로 지정되어 있는 하위의 <p/> 선택 */

상태에 따른 선택자

a:visited{}

a:link {}

상태는 active, hover, link, visited, first-child 등

의사(Psdudo) element 선택자

p:first-letter {} 

p:first-line {} 

속성(Attribute) 선택자

img[width] {border:black thin solid;} /* width 속성을 가진 모든 이미지 선택 */

img[height="300"] {border:red thin solid; } /* 값이 300인 height 속성을 가진 모든 이미지 선택 */

image[alt~="flowers"]  {border:red thin solid; }  /* "flowers"라는 단어를 포함하는 alt 속성을 가진 모든 이미지 */

형제(Sibling) element 선택자

선택자 결합

div#greentea > blockquote {}  /* <blockquote/>의 부모가 되어야하는 "greentea" id를 가진 <div/> 자손 선택자 */

div#greentea > blockquote p {} /* <blockquote/>의 자손이자 "greentea" id를 가진 <div/>의 자손인 <p/> 선택 */

div#greentea > blockquote p:first-line /* 그 <p/>의 첫 줄 */

공용 선택자(universal selector) 

* { … }

공용 선택자는 별표(*)로 표시합니다. 이 선택자는 모든 HTML 요소를 선택합니다. 웹 브라우저는 보통 HTML 요소마다 기본 CSS 양식을 지정해 두는데 이것을 동일한 값으로 초기화할 수 있습니다.

공용 선택자를 사용하면 페이지 표시 속도가 느려지므로 꼭 필요한 경우가 아니면 사용을 권장하지 않습니다.

가상 선택자(pseudo selector) 

a:focus { … }

가상 선택자는 다른 선택자 뒤에 콜롞(:)을 붙여 표시합니다. 요소의 상태를 선택하는 '가상 클래스 선택자'와 HTML 코드 속에 없는 가상의 요소를 선택하는 '가상 요소 선택자'가 있습니다. 다른 선택자들이 정적읶 상태의 HTML 요소를 선택하는 것에 반해서 가상 선택자는 HTML 요소의 동적읶 변화 상태를 선택하거나 HTML 코드에 없는 가상의 요소를 선택합니다.

가상 클래스 선택자  종류

:link    아직 방문한 적이 없는 링크를 선택합니다.

a:link   'a' 라는 타입 선택자와 결합해서 사용합니다.

:visited   이미 방문한 릿크를 선택합니다.

a:visited   a 라는 타입 선택자와 결합해서 사용합니다.

:hover   마우스 포인터가 가리키는 동안의 상태를 선택합니다.

a:hover

:active   마우스가 클릭되는 순갂 또는 엔터 키를 누른 순갂의 상태를 선택합니다.

a:active

:focus   포커스를 받은 요소의 상태를 선택합니다.

a:focus

:first-child   첫 번째 자식 요소를 선택합니다.

li:first-child

:lang(language)   언어 속성이 읷치하면 선택합니다.

p:lang(en)

주의

IE6 브라우저는 ':first-child, :lang()' 가상 클래스 선택자를 지원하지 않습니다. IE6 브라우저는 :hover, :active, :focus 가상 클래스 선택자를 'a' 이외의 요소에 지원하지 않습니다.

'a' 요소에 다양한 상태의 가상 클래스 선택자를 지정할 때는 :link(링크) :visited(방문 시) :hover(지나치게) :active(활동하면) :focus(주목받습니다) 순서를 유지하는 것이 좋습니다. 나중에 선얶된 클래스의 우선순위가 높기 때묷에 먼저 선얶된 것들을 모두 덮어쓰게 됩니다. 예를 들어, :hover 뒤에 a:visited를 쓰면 이미 방묷한 릿크 위에 맀우스를 올려도 :hover가 적용되지 않습니다. 이미 방묷한 릿크 위에 맀우스를 올렸을 때 반응하게 하려면 :visited 다음에 :hover 클래스가 오도록 작성해야 합니다.

가상 요소 선택자 종류

:first-line   첪 번째 행을 선택합니다. 블록 요소에만 적용할 수 있습니다.

p:first-line

:first-letter   첪 번째 묷자를 선택합니다. 블록 요소에만 적용할 수 있습니다.

p:first-letter

:before   요소 시작 지점 안쪽의 가상 요소를 선택합니다.

div:before{ content:"…" }   (div 요소 시작 지점 안쪽에 가상의 '…' 문자열을 생성하고 선택합니다.)

:after   요소 종료 지점 안쪽의 가상 요소를 선택합니다.

div:after{ content:"…" } (div 요소 종료 지점 안쪽에 가상의 '…' 문자열을 생성하고 선택합니다

출처 - http://blog.benelog.net/1456715

출처 - XE-Skin_Manual-ko(v1.1).pdf

:before, :after 사용

예제

<a href="#">1111</a>
<a href="#">222</a>
<a href="#">333</a>

미리보기

1111 222 333

여기에 :before를 이용해서, 혹은 :after를 이용해서 구분자를 만들어봅니다. 처음에는 :after를 사용하곘습니다.

예제 1 - after사용 (CSS)

a:after{content:" | "}

미리보기

a:after{content:" | "}
a:last-child:after{content:"";}

출처 - http://blog.wincomi.com/244

return true;return false; 이게 뭔가요? 
 
return; , return true; , return false;

이게 무엇인가요?

보통 함수 끝에 붙어서 나오던데.. 아래 예제처럼요.

아래는 return 만있는데.. 어떤건 트루, 폴스를 같이 리턴해주더라구요.

리턴은 뭐고, 트루나 폴스를 리턴해주면 어떤 현상이 일어나는건가요?

즉, 트루를 리턴해주면, 그 트루값이 어디로 리턴되는건가요?

function checkInput (form) {
 if (!form.name.value) {
 alert("이름을 입력하세요!");
 form.name.focus();
 return;
}

질문자가 선택한 답변  
[Re]자바스크립트 return true;return false; 이게 뭔가요?  
 
coffee0 (2004-02-07 04:47 작성, 2004-02-07 06:50 수정)  
 
 

♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧

return 은 단어 뜻 그대로 어떤 값을 반환하는 경우에 사용합니다.

true, false 외에 원하는 특정값을 return 할 수도 있습니다.

(return; 이렇게 값을 정해주지 않으면, null을 반환합니다.)

예를 들어 설명해 보겠습니다. 이게 쉽죠. ^^'

아래와 같은 소스가 있다고 합시다.

================================ 소스시작 ===================================

function fn_01(vn_name)
{
if ( fn_02(vn_name) == true ) { alert('이영애님 반갑습니다.'); }
if ( fn_02(vn_name) ==  false ) { alert('이영애님이 아니시군요.'); }
}

function fn_02(vn_name)
{
if ( vn_name == '이영애') { return true; }
if ( vn_name <> '이영애') { return false; }
}

================================= 소스끝 ====================================

1. 굳이 저렇게 사용하지 않아도 될 경우지만, 이해를 위해 저렇게 두개의 함수를 만들었습니다.

    fn_01함수가 다시 fn_02함수를 호출하고 있습니다.

2. fn_02는 vn_name이라는 변수로 받은 값이 '이영애'인지 아닌지를 체크하여, 각각 true false를 반환하고 있습니다.

3. fn_01은 fn_02가 반환한 값이 true인지 false인지에 따라 다른 메세지를 뿌리고 있습니다.

한가지 덭붓여 설명드리겠습니다. 아래와 같은 소스의 경우

================================ 소스시작 ===================================

function checkInput ()
{
 if ( frm01.title.value == '') { alert('제목을 입력하셔야 합니다.'); frm01.title.focus(); return;}
 frm01.submit();
}
================================= 소스끝 ====================================

4. 리턴값이 없는데, 리턴시키고 있습니다.

   여기서 return;을 뺀다면 어떻게 될까요. (반환하는 값이 없으니, 빼도 되겠지 하고 말입니다.)

   결론부터 말씀드리면, 안됩니다. 이유를 따져 봅시다.

    title이라는 이름의 제목을 넣는 박스에, 사용자가 제목에 글을 입력하고, "확인" 버튼(혹은 이미지)을 클릭했다고 합시다.

   클릭시 checkInput함수를 호출하여, if절에 걸리지 않고, 바로 submit가 발생하겠죠.

   이번엔 제목에 아무것도 입력하지 않고, 클릭했다고 합시다.

   그럼 if절에 걸리겠지요. 만약 if절 안에 return;이 없다면,

   메세지 띄우고, 포커스 이동후에, submit가 발생하게 됩니다.

   그렇게 되면, 제목이 없는 글이 써지게 되겠지요.

   이해 가시죠. 자바스크립트에서 return은 값의 반환뿐만 아니라, exit의 기능도 포함하는 것입니다.

   즉, "여기까지만 실행하고, 뒷부분은 실행을 안한다." 하는 것입니다.

채택율이 좋으셔서, 딴엔 자세히 답변한다고 했는데 도움이 되었는지 모르겠군요.

아무튼, 이해에 조금이나마 도움이 되었길 바라며 20000

♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧♧

----------------------------------------------------------------------------------------------------

<? if($use) { echo "name : " .$txtname ."<BR>"; } ?>

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=euc-kr"> 
<title>test</title>
<style>
td {font-size:9pt;} 
.frm_td { border-bottom:1px #E1E1E1 solid; text-align:right; } 
.frm_td2 { border-bottom:1px #E1E1E1 solid; } 
.frm_text { border:1px #B2B2B2 solid; } 
.frm_btn { cursor:hand; } 
</style> 
<script language="javascript"> 
function frm_check() { 
 document.tt.txtname.value = ex(); 
 return; 
}

function ex() { 
 return; 
} 
</script> 
</head>

<body class=mod_body> 
<form name="tt" action="test123.php"> 
 <input type="hidden" name="use" value="1"> 
 <input type="text" name="txtname" readonly> 
 <input type="submit" name="cmdOn" onclick="javascript:return frm_check()" value="test"> 
</form> 
</body>

요렇게 실행해 본결과.. 전송합니다. 즉 return, return false 의 차이점은 exit기능을 
사용을 하는지 않하는지와 거짓의 값을 리턴을 하는지 널(알수없는값)을 리턴하는지가 요점입니다 --;

출처 : http://cafe.naver.com/sharonstone.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=106

출처 - http://cafe.naver.com/jobstartgogo/1458