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

최근에 받은 트랙백

글 보관함

HTML5 두번째 CSS 이해하기 (pseudo-class)

2011. 12. 6. 11:55 | Posted by 솔웅



오늘은 다시 빈 body 태그서부터 시작하겠습니다.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
   
</body>
</html>
일단 body 태그 안에 아래 세줄을 채워 넣으세요.
    <p> 1st practice with css</p>
    <p> What is CSS?</p>
    <p> You don't know CSS?</p>

이 상태로 브라우저로 html파일을 불러오세요.

이렇게 나올 겁니다.
이런 연습때 사용했던 캡쳐 화면이네요. 이렇게 나오지는 않구요. 그냥 저 위에 있는 세 문장이 모두 검은 색으로 나올 겁니다.... 미쳐 캡쳐 받아 두질 못했습니다. ;;

이젠 main.css를  만들겁니다.
여러분이 사용하는 에디터로 main.css 파일을 만드세요.
그리고 아래 한줄을 넣어 보세요.
#tuna{color:red;}
이건 tuna라는 id를 가진 태그안의 내용 색을 붉은 색으로 하라는 내용입니다.
main.css를 저장하시고 아까 body안에 있던 내용을 아래와 같이 바꿔보세요.
    <p id="tuna"> 1st practice with css</p>
    <p> What is CSS?</p>
    <p> You don't know CSS?</p>

이렇게 하면 id가 tuna인 첫번째 줄이 빨간색으로 표시 됩니다.

#tuna{color:red;} -> .tuna{color:red'}
<p class="tuna">
이렇게 해도 똑같은 결과가 나옵니다.

첫번째는 id이고 두번째는 class 입니다.
main.css의 내용을 아래와 같이 바뀌면 어떻게 될까요?
p.tuna{color:red'}
이 경우 p 태그안의 클래스가 tuna인 경우만 적용 됩니다.
아래와 같이 해 보세요.
p[name]{color:blue}  -> main.css
    <p id="tuna"> 1st practice with css</p>
    <p name="larry"> What is CSS?</p>
    <p> You don't know CSS?</p>
이러면 두번째 라인만 파란색으로 표시 됩니다.
이 css코드 의미는 name이 있는 태그 내의 내용에 적용하라는 겁니다.

p[name="bucky"]{color:blue}  -> main.css
    <p name="sally"> 1st practice with css</p>
    <p name="larry"> What is CSS?</p>
    <p name="bucky"> You don't know CSS?</p>
이러면 세번째 줄만 이 css가 적용 됩니다. (attribute selector)

이렇게 css를 적용하는 여러 방법이 있습니다.
이 외에도 더 있습니다. 한번 볼까요?

p[name^="bacon"]{color:blue}  -> main.css
    <p name="baconsub"> 1st practice with css</p>
    <p name="mybacon"> What is CSS?</p>
    <p name="omgbacontuna"> You don't know CSS?</p>


p[name$="bacon"]{color:blue}  -> main.css

p[name*="bacon"]{color:blue}  -> main.css


첫번째 ^ 는 name이 bacon으로 시작되는 태그에만 적용합니다.
두번째 $는 name이 bacon으로 끝나는 태그에만 적용합니다.
세번째 * 는 name에 bacon이 들어가는 모든 태그에 적용합니다.

CSS를 제대로 활용하려면 1. 이런 기능이 있다는 것을 알아야 하고 2. 이런 기능을 많이 사용해서 숙달 돼 있어야 합니다. 3. 그래서 웹 화면을 디자인 할 때 CSS의 어떤 기능들을 적용할 지 설계할 수 있어야 합니다.
이 외에도 여러가지 기능들이 있는데요.. 나머지는 각자 Research 해 보세요.

이제 다시 body태그를 비워보겠습니다.

그 안에 아래 내용을 아래와 같이 넣어 보세요.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<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를 아래와 같이 고쳐 보세요.
p:nth-child(3){color:green;}

이 css는 p 태그의 3번째 child에 내용을 적용하라는 의미입니다.
보시는 대로 세번째 줄만 녹색이 됐습니다.
p:nth-child(odd){color:green;} 이렇게 고치면 홀수 번째 줄만 녹색이 됩니다.
p:nth-child(even){color:red;} 이것까지 추가해 보세요.


이 기능은 아주 유용하겠죠?

다음 강좌에서도 계속 CSS에 대해 알아 보겠습니다. 6
반응형

Comment

  1. 쿠미야 2012.01.25 17:50

    좋은 자료 잘 보고 갑니다.
    내용중에 아아디를 클래스 변경할때
    #tuna -> .tuna 로 변경되어야 하는데
    #tuna -> .class 로 선언을 하셔서 오타가 아닌가 해서
    코멘트 남깁니다 ^^

    • 솔웅 2012.01.26 04:51 신고

      아.. 예.. 그러네요.
      수정해 놨습니다.
      이렇게 바로 잡아 주셔서 감사합니다 :)