반응형
1. 웹페이지 스타일 전용 언어는 무엇인가?
CSS
2. CSS 선택자란 무엇인가?
엘리먼트 관계를 이용해서 선택하는 방법
3. 선택자 종류 4가지
자손 선택자
자식 선택자
인접 형제 선택자
일반 형제 선택자
4. 자손 선택자 사용하기
5. 자식 선택자 사용하기
자손 선택자와의 구분을 위해
식별자를 사용하자
자손 선택자 식별자 id="descendant"
자식 선택자 식별자 id="child"
<!-- 자식 선택자 사용하기
<style>
선택자 > 선택자 {
CSS 코드
}
</style>
-->
<!-- 자손선택자와 자식 선택자비교 -->
<style>
div#descendant p {
color: red;
}
div#child > p {
color : blue;
}
</style>
<body>
<!-- 자손선택 해당되므로 div태그 밑의 모든 p태그에 적용-->
<div id="descendant">
<p> 자손 문단 태그</p>
<div>
<p> 자손 문단 태그의 내부 태그 </p>
</div>
</div>
<!-- 자식선택 해당되므로 div태그 바로 밑의 자식 p태그에만 적용 id -->
<div id="child">
<p> 자식 문단 태그 </p>
<div>
<p> 자식 문단 태그의 내부 태그</p>
</div>
</div>
</body>
6. 인접 형제 선택자
가장 인접해 있는 하위 형제태그를 변화시킴
<!-- 인접형제선택자
<style>
선택자 + 선택자 {
CSS 코드
}
</style>
-->
<!--
adjacent라는 id를 가진 div태그 안의 adj_p라는 id를 가진 p태그의 인접 형제 태그에 영향미침
고로 아이디가 adj_p인 p태그의 인접형제인 "인접형제 3번 문단"만 수정됨
-->
<style>
div#adjacent p#adj_p + p{
color : green;
}
</style>
<body>
<div id="adjacent">
<p>인접형제 1번 문단 </p>
<p id="adj_p">인접형제 2번 문단, id="adj_p" </p>
<p>인접형제 3번 문단 </p>
<p>인접형제 4번 문단 </p>
</div>
</body>
7. 일반 형제 선택자
<!-- 일반 형제 선택자
하위 선택자 전부에게 영향미침
<style>
선택자 ~ 선택자 {
CSS코드
}
</style>
-->
<style>
div#general p#gen_p ~ p{
color : yellow;
}
</style>
<div id="general">
<p>첫문단</p>
<p>두번째문단</p>
<p id="gen_p"> id="gen_p"인 문단</p>
<p>네번째문단</p>
<p>마지막문단</p>
</div>
반응형
'○ WEB > 19.03 FastCampus_CSS' 카테고리의 다른 글
| css rem, em 차이 (0) | 2019.07.23 |
|---|---|
| [FC] BootStrap 맛보기 (0) | 2019.06.09 |
| [FC] CSS 파일분리 / CSS 불러오기 (0) | 2019.06.08 |
| [FC] CSS 스타일 / 박스모델 / margin / border / padding (31) | 2019.06.08 |
| [FC] CSS 기본 정의 (0) | 2019.06.06 |
