반응형
negation pseudo-class
어제 썼던 HTML 코드 그대로 쓰겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Dougy's HTML5 </title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="mommy">
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
</div>
</body>
</html>
여기에 일단 main.css에는 아래와 같이 넣으세요.
* {color:blue;}
그럼 전부 파란색으로 나오겠죠?
*표는 all 을 뜻하는 거라는 걸 어제 다뤘었습니다.
HTML 파일을 아래와 같이 바꾸세요.
어제 썼던 HTML 코드 그대로 쓰겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Dougy's HTML5 </title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="mommy">
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
</div>
</body>
</html>
여기에 일단 main.css에는 아래와 같이 넣으세요.
* {color:blue;}
그럼 전부 파란색으로 나오겠죠?
*표는 all 을 뜻하는 거라는 걸 어제 다뤘었습니다.
HTML 파일을 아래와 같이 바꾸세요.
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
css는 아래와 같이 바꾸시구요.
* {color:blue;}:
not(.bucky){color:red;}
그래서 클래스 이름이 bucky가 아니고 sally인 것은 모두 빨간 색이 됐습니다.
CSS3 Selectors
이제 main.css에 있는 내용을 다 지우고 아래 내용을 넣어 보세요.
div> p {color:green}
브라우저를 실행하면 모두 녹색으로 돼 있을 겁니다.
이건 div 를 parent로 갖는 모든 요소에 적용하라는 내용입니다.
<div id="mommy">
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
</div>
이 div 태그 내에 있는 모든 내용에 적용되기 때문에 전부 녹색이 됩니다.
그러면 div의 parent는 뭘까요?
* {color:blue;}:
not(.bucky){color:red;}
그래서 클래스 이름이 bucky가 아니고 sally인 것은 모두 빨간 색이 됐습니다.
CSS3 Selectors
이제 main.css에 있는 내용을 다 지우고 아래 내용을 넣어 보세요.
div> p {color:green}
브라우저를 실행하면 모두 녹색으로 돼 있을 겁니다.
이건 div 를 parent로 갖는 모든 요소에 적용하라는 내용입니다.
<div id="mommy">
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
</div>
이 div 태그 내에 있는 모든 내용에 적용되기 때문에 전부 녹색이 됩니다.
그러면 div의 parent는 뭘까요?
<body>
<div id="mommy"> ....
이렇게 돼 있으니까 body가 div의 parent 이죠?
body> p {color:green}
이렇게 해 보세요.
그러면 녹색이 아니라 전부 검정색으로 나옵니다.
무슨 의미일까요?
body>는 body를 parent로 같는 요소들입니다. div는 p의 parent 이지만 body는 아닙니다. grand parent 라고 해야 할까요?
그래서 p에 이 css가 적용되지 않은 겁니다.
그러면 이제 다 지우고 css를 아래와 같이 넣어보세요.
p.bucky+p{color:blue;}
이렇게 나옵니다.
이 내용은 p 태그로 시작하는 것 중 bucky 가 아이디인 태그의 다음 태그에 내용을 파란색으로 하라는 겁니다.
좀 헛갈리나요?
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
html 이 이랬으니까
보시면 첫번째는 그 이전에 아무런 p 태그가 없었으니까 당연히 p태그 다음에 나오는 p가 아니라서 검정색
두번째는 bucky라는 클래스 다음에 오는 p태그가 아니죠? sally라는 클래스 다음에 오는 p 태그입니다. 그래서 검정색
세번째는 bucky 라는 클래스를 가지고 있는 p태그 다음에 오는 p 태그네요. 그래서 당연히 글자 색이 파란색으로 됩니다.
이제 이 + 의 의미가 뭔지 아시겠죠?
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<span> testtesttest </span>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
위와 같이 하면 어떻게 될까요? 이러면 밑에서 두번째 줄의 p 태그는 bucky 클래스를 가진 p 태그의 바로 다음줄이 아니기 때문에 검정색이 됩니다.
그럼 이 상태에서 css 의 +를 ~로 바꿔 보세요.
그럼 밑에서 두번째줄도 파란색으로 됩니다.
~는 중간에 뭐가 있던지 그 이전에 있던 p 태그가 bucky 클래스 이면 효과를 적용하라는 명령어 입니다.
<div id="mommy"> ....
이렇게 돼 있으니까 body가 div의 parent 이죠?
body> p {color:green}
이렇게 해 보세요.
그러면 녹색이 아니라 전부 검정색으로 나옵니다.
무슨 의미일까요?
body>는 body를 parent로 같는 요소들입니다. div는 p의 parent 이지만 body는 아닙니다. grand parent 라고 해야 할까요?
그래서 p에 이 css가 적용되지 않은 겁니다.
그러면 이제 다 지우고 css를 아래와 같이 넣어보세요.
p.bucky+p{color:blue;}
이 내용은 p 태그로 시작하는 것 중 bucky 가 아이디인 태그의 다음 태그에 내용을 파란색으로 하라는 겁니다.
좀 헛갈리나요?
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
html 이 이랬으니까
보시면 첫번째는 그 이전에 아무런 p 태그가 없었으니까 당연히 p태그 다음에 나오는 p가 아니라서 검정색
두번째는 bucky라는 클래스 다음에 오는 p태그가 아니죠? sally라는 클래스 다음에 오는 p 태그입니다. 그래서 검정색
세번째는 bucky 라는 클래스를 가지고 있는 p태그 다음에 오는 p 태그네요. 그래서 당연히 글자 색이 파란색으로 됩니다.
이제 이 + 의 의미가 뭔지 아시겠죠?
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<p class="sally"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
<span> testtesttest </span>
<p class="bucky"> tuna and bacon...</p>
<p class="bucky"> tuna and bacon...</p>
위와 같이 하면 어떻게 될까요? 이러면 밑에서 두번째 줄의 p 태그는 bucky 클래스를 가진 p 태그의 바로 다음줄이 아니기 때문에 검정색이 됩니다.
그럼 이 상태에서 css 의 +를 ~로 바꿔 보세요.
그럼 밑에서 두번째줄도 파란색으로 됩니다.
~는 중간에 뭐가 있던지 그 이전에 있던 p 태그가 bucky 클래스 이면 효과를 적용하라는 명령어 입니다.
반응형
'WEB_APP > HTML5' 카테고리의 다른 글
| HTML5로 비디오 보여주기 Video Tag (0) | 2011.12.17 |
|---|---|
| JavaScript 맛보기 (0) | 2011.12.16 |
| HTML5 CSS Animation 효과 (5) | 2011.12.15 |
| HTML5 CSS Text shadow, translate 효과 등등 (0) | 2011.12.14 |
| CSS3 Rounded Corner, 그림자 효과 사용하기 (0) | 2011.12.12 |
| webkit-box 좀 더 알아보기 (Flexible Box Model) (6) | 2011.12.10 |
| HTML5 화면 Layout 잡기 -2 (Flexible Box Model) (2) | 2011.12.09 |
| HTML5 화면 Layout 잡기 -1 (6) | 2011.12.09 |
| HTML5 두번째 CSS 이해하기 (pseudo-class) (2) | 2011.12.07 |
| HTML5 시작하기 (0) | 2011.12.07 |