반응형
오늘은 다시 빈 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>
#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
첫번째 ^ 는 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;}
보시는 대로 세번째 줄만 녹색이 됐습니다.
p:nth-child(odd){color:green;} 이렇게 고치면 홀수 번째 줄만 녹색이 됩니다.
p:nth-child(even){color:red;} 이것까지 추가해 보세요.
이 기능은 아주 유용하겠죠?
다음 강좌에서도 계속 CSS에 대해 알아 보겠습니다. 6
반응형
'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 이해하기 (0) | 2011.12.08 |
| HTML5 시작하기 (0) | 2011.12.07 |