WebDevelop 수업 - Day5 CSS 선택자, CSS 속성(1)

김지원·2022년 6월 15일

WebDevelop2

목록 보기

6/34

그룹 선택자

: 서로 다른 두 개 이상의 선택자에게 동일한 CSS 속성을 적용하기 위해 사용.

'선택자A', '선택자B', '선택자C', ... {
	...
}

<style>
     a, b, strong, sup, sub {
         color: red;
     }
</style>
<div>
	<a>I'm a.</a>
	<b>I'm b</b>
	<strong>I'm strong</strong>
	<sup>I'm sup</sup>
	<sub>I'm sub</sub>
</div>

인접 형제 선택자

: '선택자 A'에 의해 선택된 요소 바로 뒤에 붙어서 나오는
'선택자 B'에 해당하는 요소를 선택한다.
'선택자 A' + '선택자 B' {
	...
}
<style>
	a + b {
		color: red;
	}
</style>
<div>
    <a>1</a>
    <b>2</b>
    <b>3</b>
</div>

<div>
    <a>1</a>
    <strong>0</strong>
    <b>2</b>
    <b>3</b>
</div>

이렇게 되면 아무런 변화가 없다. a뒤에 바로 붙어서 오는 b가 없기 때문이다.

형제 선택자

: 위 선택자는 '선택자 A'애 의해 선택된 요소 뒤에 바로 오는 '선택자 B'애 해당하는 요소를 선택한다.
'선택자 A' ~ '선택자 B' {
	...
}
<style>
   a ~ b {
      background-color: yellow;
   }
</style>
<div>
    <b>0</b>
    <a>1</a>
    <strong>11</strong>
    <b>2</b>
    <b>3</b>
</div>

클래스 선택자

: HTML 태그에 부여된 class 속성(Attribute)을 기준으로 선택
.'클래스 이름' {
...
}

<style>
    .color-red {
        color: red;
        background-color: yellow;
    }
</style>
<div>
    <a>1</a>
    <a class="color-red">2</a>
    <a>3</a>
</div>

<style>
    a.color-red {
        color: red;
    }
	<!-- a태그 이면서 color-red 클래스를 가지는 것 -->
    a.back-yellow {
        background-color: yellow;
    }
    <!-- a태그 이면서 back-yellow클래스를 가지는 것 -->
</style>
<div>
    <a>1</a>
    <a class="color-red back-yellow">2</a>
    <a>3</a>
</div>

<style>
    a.color-red {
        color: red;
    }
    a.back-yellow {
        background-color: yellow;
    }
    a.color-red.back-yellow {
        text-decoration: underline;
    }
</style>
color-red와 back-yellow 두 개의 클래스를 모두 가진 애만 적용이 된다.

❗️띄워쓰기를 하면 안된다!
a .color-red .back-yellow
이렇게 되버리면 전혀 다른 의미가 되버리기 때문이다.

의사클래스

hover

: 마우스를 올리면...

active

: 마우스를 누르고 있으면...

<style>
    a {
        color: red;
    }
    a:hover {
        color: blue;
    }
   a:active {
            text-decoration: underline;
   }
</style>
<body>
    <a>I'm a</a>
</body>

아무것도 하지 않은 상태
hover시

nth-chlid(x)

: 같은 부모를 가지는 요소 전체 중 x번째. x는 1부터
div > b:nth-child(1) {
	color: red;
}
<div>
    <b>A</b>
    <a>B</a>
    <b>C</b>
    <a>D</a>
    <b>E</b>
</div>
= div의 자식 전체 중 첫번째 이면서 b인 요소

nth-child(odd)

: 홀수번째

nth-chlid(even)

: 짝수번쨰

x:nth-of-type(y)

: 같은 부모를 가지는 x요소 중 y번째

div > b:nth-of-type(2) {
    color: red;
}
<div>
    <b>A</b>
    <a>B</a>
    <b>C</b>
    <a>D</a>
    <b>E</b>
</div>

x:last-of-type

: 같은 부모를 가지는 x요소 마지막

x:last-child

: x요소 이면서 마지막
div > a:last-child {
    color: orange
}
-> 얘는 아무런 변화가 없다. 마지막 요소 이면서 a태그는 존재하지 않기 때문이다.

:last-chlid

: 마지막 요소만 선택
div > :last-child {
     color: orange
 }

:first-chlid

: last-chlid 와 속성같다.

! 부정의사

:not(:last-chlid) <-> :not(:first-chlid)

div > :not(:last-child) {
    color: orange
}
<div>
    <b>A</b>
    <a>B</a>
    <b>C</b>
    <a>D</a>
    <b>E</b>
</div>

checked

: 어떤 요소가 체크되었을 때..

<style>
    a {
        color: red;
    }
    input:checked + a {
        color: black;
    }
</style>
<body>
    <input type="checkbox">
    <a>Hi!</a>
</body>

check시 검은색으로 변화

visibility

hideen : 보이지 않음.
visible : 보임.

<style>
    a {
        color: red;
        visibility: hidden;
    }
    input:checked + a {
        color: black;
        visibility: visible;
    }
</style>
<body>
    <input type="checkbox">
    <a>Hi!</a>
</body>

checkbox 체크시 보인다.

< 활용 예제 >

<style>
    .read {
    color: red;
    visibility: visible;
    }

    input:checked ~ .read {
    visibility: hidden;
    }

    .a {
    background-color: black;
    color: #fff;
    }
    .b {
    visibility: hidden;
    }

    .a:hover + .b{
    visibility: visible;
    }
</style>
<body>
    <input type="checkbox">
    <span class="agree">이용 약관에 동의합니다.</span><br>
    <span class="read">이용약관을 읽고 동의해주세요!</span>
    <br><br>
    <div class="a">이용약관 보기</div>
    <div class = b>이용약관이용약관이용약관이용약관이용약관이용약관이용약관이용약관
        이용약관이용약관이용약관이용약관이용약관이용약관</div>
</body>