CSS_조합선택자

DATA 분석 교육 과정 (2024.02~08)/CSS
CSS_조합선택자

글로리아-89 2024. 4. 5. 13:48
728x90
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
/*<<< 계층선택자 >>>>*/

/* 
1. 자손 선택자
 - 기호: 띄어쓰기 (공백)
    1-1) BODY 기준으로 자손인 span 색을 tomato
    1-2) BODY 기준으로 자손은 li 색을 blue

 */
body span {color: tomato;
}

body li {
    color: blue;
}

/* 
2. 자식 선택자  
 - 기호 :  >
  2-1) ol기준으로 자식인 span의 색을 hotpink 
 */
ol>span {
    color: hotpink;
}

/* 
3. 형제 선택자 (후행선택자)
- 기호 : ~ 
 3-1) li를 기준으로 형제 관계 li 색을 lime
  태그 이름으로 하면 모든 경우를 다 반영하기 때문에 특정 클래스를 부여해서 \
스타이를 적용하면 좋음

ex) class가  item인 요소의 li 동생들: .item ~ li 
ex) class가  item인 요소의 모든동생들: .item ~ *
*/
 li~li {
    color: lime;
 }


/* 
4. 인접형제 선택자(근접후행선택자)
- 기호: +
 (바로 옆에 있어야 한다. , 중간에 다른게 끼어있으면 안된다.)
 li 기준으로 인접형제은 li의 색을 green
*/

li+li {
    color: green;
}

/*  5.추가
5-1) rule이라는 class 를 가지고 있는 요소들 중, 
h1 태그에 해당하는 것만 선택
 > h1.rule

5-2) rule이라는 id 를 가지고 있는 요소들 중, 
h1 태그에 해당하는 것만 선택
 > h1#rule

*/


/* <<가중치>>> 
여기서 블랙을 하면 색 변경이 안된다.~!!!!! 
각자의 선택자 마다 중요도를 설정해주었다. ~!!!!
 */
*{
    color: black;
}
/* 
 [선택자별 명시도(가중치)] 
 전체 태그 / 0 
 일반 태그 / 1
 class / 10
 id / 100
 인라인스타일 / 1000
 !important / 10000

 만약 복합적으로 있을 경우 명시도를 더해서 판단하면된다. !!!
*/

/* 
[만약에 명시도를 못 올릴 경우, 선택자를 못 찾을 경우]
h1 {
color : red !important ;
}

*** important를 이용!!! 명시도는 무한대!!!
*/

*{
    color: black !important;
}
/* 모든 출력 글자색이 black 으로 변한다.  */

/* 
[인라인 스타일]
 - 태그에 스타일을 정의하는 방법 중 '인라인 스타일'은 명시도 1000정도
 - 인사인 스타일 : 태그에 직접 스타일속성 정의
<h1 style = 'color : red !important ;'>인라인 스타일 꾸미기</h1>
*/

/* 
<<<반응선택자>>>
1)    :hover
 - 요소에 마우스를 올릴때 
/*  
*/
h2:hover {
    background-color: skyblue;
}
span:hover {
    background-color: skyblue;
}

/* 2)    :active 
 - 요소를 클릭하고 있는 동안
*/

h3:active {
    color: blueviolet;
}

h3:hover {
    color: cadetblue;
}


/* 
<<<그룹선택자>>>
: 원하는 요소끼리 콤마로 묶어서 한번에 선언
h1,p, span {
    color = yellow;
}
*/

</style>



</head>

<body>
    <h1 style = 'color : red !important ;'> 레시피을 알아보자 </h1>
    <strong>나만의 간계밥 레시피</strong>
    <ol>
        <li> 계란을 안 뒤집고 굽는다.</li>
        <li> 밥에 간장이랑 참기름을 넣는다.</li>
        <li> 밥에 간장이랑 참기름을 넣는다.</li>
        <span>짜게 만들어지지 않도록 주의할것</span>
        <li>깨뿌리기</li>
        <li>깨뿌리기</li>

    </ol>

    <h2>가입하기</h2>
    <span>가입하기</span>
    <h3>접속하기</h3>

</body>
출처: 스마트인재개발원
728x90