*div
-
요소들을 묶어주는 용도로 사용합니다.
-
display에서 block 속성이 기본으로 적용 되어있습니다.
*클래스(CLASS)
-클래스는 중복하여 사용이 가능합니다. 그래서 여러 요소에 적용할 때 유용합니다.
-태그 중 특정 태그에만 다른 효과 적용하기 위해 사용합니다.
-css에서 '. 클래스명'으로 선택할 수 있습니다.
-
.div1 a{}: div1클래스를 갖고 있는 요소의 자식 중 모든 a 태그를 선택합니다.
-
.div1>i{}: div1클래스를 갖고 있는 요소의 직속 자식 중 모든 i태그를 선택합니다.
-
.two, .four{}: two 클래스 태그 가진 모두와 four 클래스 태그 가진 모두 선택합니다.
-
.outside .one{}: outside 클래스 중에서 one클래스 가진 태그를 선택합니다.
-
.div1 p:nth-child(3){}: div1의 자식인 p태그 중 3번째를 선택합니다.
-
.div1 p:first-child{}: div1의 자식인 p태그 중 첫 번째를 선택합니다.
-
:last-child{}: p태그 중 마지막을 선택합니다.
-
:not(:last-child){}: 마지막 자식이 아닌 p태그를 선택합니다.
<html>
<body>
<div class="porimp"><p>의미 없는 문장<p></div>
</body>
<style>
.porimp p {
color: black;
}
.porimp:first-child {
font-size: 13px;
}
</style>
</html>
*아이디(ID)
-
중복 사용이 불가능하여 여러 요소에 동시 적용이 불가능합니다. 그래서 단독으로 선택을 해야 하는 요소에 사용합니다.
-
css에서 '#아이디명'으로 선택할 수 있습니다.
<html>
<body>
<div id="porimp"><p>의미 없는 문장<p></div>
</body>
<style>
#porimp p {
color: black;
}
#porimp:first-child {
font-size: 13px;
}
</style>
</html>
'웹개발(웹퍼블리셔) > 프론트엔드(HTML, CSS, JAVASCRIPT)' 카테고리의 다른 글
| (HTML/CSS) 마우스 오버(hover), 상속, 명시도, display (6) (0) | 2019.08.16 |
|---|---|
| (HTML/CSS)box model과 background(5) (0) | 2019.08.14 |
| (HTML/CSS)텍스트, span (4) (0) | 2019.08.13 |
| (HTML/CSS)이미지, 픽셀, 하이퍼링크(2) (1) | 2019.08.11 |
| HTML과CSS 기초(1) (0) | 2019.08.11 |