반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5 CSS 이해하기

2011. 12. 7. 14:55 | Posted by 솔웅


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 파일을 아래와 같이 바꾸세요.
          <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>
css는 아래와 같이 바꾸시구요.
  * {color:blue;}:
not(.bucky){color:red;}


css를 보시면 모든 색은 파란색으로 하는데 그 밑에 bucky가 아닌 것은 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 클래스 이면 효과를 적용하라는 명령어 입니다.

반응형

Comment