/*
selector {
스타일명 : 값;
스타일명 : 값;
}
1. selector
- 스타일을 적용해야할 대상을 가르킴
1) 태그명
p {}
h1, h2 {...} // h1과 h2
2) 스타일 분류명(스타일 클래스명)
.클래스명 {...}
[html]
<div class="header">...</div>
<div class="content">...</div>
<span class="artist">홍길동</span>, 가을인가?, <span class="ent">비트음반</span>
<span class="artist">임꺽정</span>, 오호라, <span class="ent">강남음반</span>
<div class="tail">...</div>
[css]
.header {....}
.content {....}
.tail {....}
.artist {....}
3) 태그 아이디
[html]
<div id="header">...</div>
<div id="content">...</div>
<span class="artist">홍길동</span>, 가을인가?, <span class="ent">비트음반</span>
<span class="artist">임꺽정</span>, 오호라, <span class="ent">강남음반</span>
<div id="tail">...</div>
[css]
#header {....}
#content {....}
#tail {....}
.artist {....}
4) 여러개의 태그 지정
h1, h2, p {...}
5) 자식 태그 지정
부모 > 자식 {....}
[html]
<div>
<p>
<a>aaa</a>
</p>
<a>bbb</a>
<div>
div > a {,,,,}
6) 자속태그 지정
조상 자존 {...}
[html]
<div>
<p>
<a>aaa</a>
</p>
<a>bbb</a>
<div>
div a {,,,,}
7) 자식태그와 클래스의 합작
태그.클래스 > 자식태그 {...}
ex) div.c1 > a {...}
8) 자손태그와 클래스의 합작
조상태그.클래스 자손태그 {...}
ex) div.c1 a {...}
[html]
<div>
<a>aaa</a>
</div>
<div class="c1">
<a>bbb</a>
<p>
<a>okok</a>
</p>
</div>
<div class="c2">
<a>ccc</a>
</div>
*문제.
div#okok a {...}
2. pseudo-selector (별정 셀렉터)
div:first-child {...}
[html]
<body>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</body>
.c1 a {...}
3. 스타일 값 설정 방법
1) border: 1px; // 12시,3시,6시,9시(top, right, bottom, left)
2) border: 10px, 20px; // top/bottom, right/left
3) border: 10px, 20px, 30px; // top, right/left, bottom
4) border: 10px, 20px, 30px, 40px; // top, right, bottom, left
5) border-top: 1px; // top
6) border-width: 1px;
border-color: red;
border-style: sold;
border: 1px red solid;
border: red 1px solid;
border: solid 1px red;
4. 스타일의 상속
- 스타일의 일부는 자식 앨리먼트에 상속된다.(메뉴얼 확인 필요)
body {
font-size: 10px;
}
[html]
<body>
<div>
<p>...</p>
<p>...</p>
<p>...</p>
<p>
....
<a>...</a>
</p>
</div>
...
...
</body>
댓글 없음:
댓글 쓰기