25.03.24 (월) 30일차 CSS

반응 선택자

• 사용자의 움직임에 따라 반응하여 스타일이 달라지는 선택자
  (마우스 오버, 클릭 유지..)

• 요소를 클릭하고 있는 경우 (:active)

• 요소에 마우스가 올라가는 경우 (:hover)

# HTML

<div class="div-cls" id="active-test">:active 테스트</div>
<div class="div-cls" id="hover-test">:hover 테스트</div>

# CSS

.div-cls {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  background-color: gray;

  /* 아래쪽 요소와의 간격
  == 아래쪽 여백을 30px 지정 */
  margin-bottom: 30px;

  /* 해당 요소에 마우스 커서가 올라가면
     손가락 모양으로 변경 */
  cursor: pointer;
}

#active-test:active {
  background-color: yellow;
}

#hover-test:hover {
  background-color: pink;
  width: 230px;
  height: 230px;
}

#hover-test {
  /* #hover-test 요소가 변화를 일으키면
     0.5초동안 변해라 
    
     트랜지션(transition) : HTML 요소가
     한 상태에서 다른 상태로 변할 때의
     변화를 부드럽게 만들어주는 애니메이션 효과
     점진적으로 몇초에 걸쳐 변화해라
  */
  transition-duration: 0.5s;
}

상태 선택자

• 입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자.

:focus -> 요소에 초점이 맞춰졌을 때
:checked -> 요소가 체크 되었을 때 (radio, checkbox)

:enabled / disabled
-> 요소가 사용 가능한 / 불가능한 상태일 때

# HTML

<input id="focus-test">

사과 <input type="checkbox" name="fruits"> <br>
바나나 <input type="checkbox" name="fruits"> <br>
딸기 <input type="checkbox" name="fruits"> <br>

<div id="test-div2">
사용 가능 : <input enabled> <br>
사용 불가능 : <input disabled>
</div>

# CSS

#focus-test:focus {
  background-color: red;
}

input[name="fruits"]:checked {
  width: 30px;
  height: 30px;

  /* radio, checkbox는
    크기를 제외한 스타일이 적용되지 않는다. */
  background-color: red;
}

#test-div2 > input:enabled {
  background-color: lightgreen;
}

#test-div2 > input:disabled {
  background-color: lightpink;
}

동위 선택자

• 동위 관계(동등한 위치 == 형제 관계)에서
  뒤(다음)에 위치한 요소를 선택하는 선택자.

A
B
B

1) A선택자 + B선택자 { css 코드; }
A 바로 뒤에 있는 B요소 하나를 선택 (+)

2) A선택자 ~ B선택자 { css 코드; }
A 뒤에 있는 모든 B요소를 선택 (~ 틸드(Tilde))

   # HTML

   <div id="div1">1번 입니다.</div>
   <div>2번 입니다.</div>
   <div id="div3">3번 입니다.</div>
   <div>4번 입니다.</div>
   <p>관련 없는 태그입니다!</p>
   <div>5번 입니다.</div>

# CSS

#div1 + div {
background-color: olive;
}

#div3 ~ div {
  background-color: blue;
}

문자열 속성 선택자

• 속성값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자.

1) 선택자[속성명 ~= "특정값"] { CSS 코드; }
-> (띄어쓰기로 구분되어있는) 여러 속성 값이 작성된 속성중
속성값이 특정 값을 단어로 포함하는 요소를 선택

2) 선택자[속성명 |= "특정값"] { CSS 코드; }
-> 속성값이 특정 값을 단어로 포함하는 요소를 선택
단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다.

3) 선택자[속성명 ^= "특정값"] { CSS 코드; }
( ^ : 캐럿)
-> 속성값이 특정값으로 시작하는 요소를 선택

4) 선택자[속성명 $= "특정값"] { CSS 코드; }
-> 속성값이 특정값으로 끝나는 요소를 선택

5) 선택자[속성명 *= "특정값"] { CSS 코드; }
-> 속성값이 특정값을 포함하는 요소를 선택

  # HTML

  <div name="aaa bb2b str-1" class="str-class"> div1 </div>
  <div name="str-2 aaa" class="str-class"> div2 </div>
  <div name="str" class="class-str"> div3 </div>
  <div name="aaa str-3" class="str-class2"> div4 </div>

# CSS

/* 
~= : 여러 속성값 중 하나라도 일치하면 선택 */
div[name ~= "aaa"] {
  background-color: greenyellow;
}

/* 
|= : "-" 기호 앞쪽 단어가 일치하는 요소 선택 */
div[class |= "str"] {
  color: red;
  font-weight: bold;
}

/*
^= : 특정 값으로 시작하는 요소 선택 */
div[class ^= "class"] {
  background-color: black;
  color: white;
}

/*
$= : 특정 값으로 끝나는 요소 선택 */
div[class $= "class2"] {
  font-size: 30px;
}

/*
*= : 특정 값을 포함하는 요소 선택 */
div[name *= "2"] {
  border: 3px solid blue;
}

일반 구조 선택자

• 형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자
• 위치를 기준으로 구분함(중요)

:first-child
:last-child
:nth-child (수열)
:nth-last-child (수열)

# HTML

<div id="test1">
  <P>테스트1</P>
  <P>테스트2</P>
  <P>테스트3</P>
  <P>테스트4</P>
  <P>테스트5</P>
  <pre>테스트6</pre>
</div>

# CSS

/* 일반 구조 선택자 */

/*
:first-child
형제 관계의 요소 중 첫번째 요소 */
#test1 > p:first-child {
  /* #test1의 자식 요소중
 	 형제 관계의 요소 중 첫번째 요소가 p태그인가? 
  => 맞음! 첫번째 요소는 p태그여서 스타일 적용이 됨 */
     background-color: red;
     color: white;
}

/*
:last-child
형제 관계의 요소 중 마지막 요소 */
#test1 > p:last-child {
  /* #test1의 자식 요소 중
  	 형제 관계의 요소 중 마지막 요소가 p태그인가?
  => 아님! 마지막 요소는 pre태그여서 스타일 적용이 안됨
     p 대신 pre로 바꿔야 적용 */
  background-color: orange;
}

/*
nth-child(수열)
형제 관계 요소 중 지정된 수열번째 요소를 모두 선택
- 순서 따질 때 1부터 시작 */
#test1 > p:nth-child(2) {
  /* 형제 관계 중 2번째 요소를 선택하고
  그게 p태그인지 검사 */
  background-color: yellow;
}
#test1 > p:nth-child(4) {
  background-color: green;
}

/* 홀수번째 형제 요소 선택 */
#test1 > p:nth-child(2n-1) {
  font-weight: bold;
  font-size: 30px;
}

/* 짝수번째 형제 요소 선택 */
#test1 > p:nth-child(2n) {
  border : 3px solid black;
}

/*
nth-last-child(수열)
형제 관계 요소 중
뒤에서부터 지정된 수열번째 요소를 모두 선택 */
#test1 > p:nth-last-child(2) {
  color: pink;
}

형태 구조 선택자

선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자
(선택된 요소들을 기준으로 구분)

:first-of-type
:last-of-type
:nth-of-type(수열)
:nth-last-of-type(수열)

# HTML

<div id="test2">
   <pre>테스트0</pre>
   <P>테스트1</P>
   <P>테스트2</P>
   <P>테스트3</P>
   <P>테스트4</P>
   <P>테스트5</P>
   <pre>테스트6</pre>
</div>

# CSS

/*
:first-of-type
같이 선택된 형제들 중에서 첫번째 요소 */
#test2 > p:first-of-type {
  /*
  p태그 중에서 첫번째 요소냐? */
  background-color: orange;
}

/*
:last-of-type
같이 선택된 형제들 중에서 마지막 요소 */
#test2 > p:last-of-type {
  background-color: skyblue;
}

/*
:nth-of-type(수열)
같이 선택된 형제들 중에서
수열번째 모든 요소 선택 */
#test2 > p:nth-of-type(2n-1) {
  font-size: 30px;
}

/*
:nth-of-type(수열)
같이 선택된 형제들 중에서
뒤에서 수열번째 모든 요소 선택 */
#test2 > p:nth-last-of-type(2n) {
  background-color: red;
}

부정 선택자 ( 선택자1:not(선택자2) )

• 괄호 내 선택자를 제외한 나머지 요소를 선택

# HTML
<ul id="test3">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

# CSS

/* 부정 선택자 */
/*
#test3 자식 li 요소 중
3의 배수를 제외한 요소만 선택하여
배경색 aqua 설정
*/
#test3 > li:not(:nth-of-type(3n)) {
  background-color: aqua;
}

기타 선택자

1. :only-child

• 특정 요소의 자식이 하나밖에 없을 때 선택

# HTML

<div id="test1">
   <p>자식1</p>
  <!-- <p>자식2</p> -->
</div>

# CSS

/*
:only-child */
#test1 > p:only-child {
  background-color: steelblue;
}

2. :only-of-type

• 특정 요소의 자식 중
  지정된 형태와 같은 자식 요소가 하나만 있을 때 선택

# HTML

<div id="test2">
  <p>자식1</p>
  <pre>자식2</pre>
</div>

# CSS

/*
:only-of-type */
#test2 > p:only-of-type {
  /* 자식은 둘이지만 p태그가 하나니까
     스타일 적용됨 */
  background-color: red;
}

3. :empty

• 자식 요소가 없는 요소를 선택
• 자식 요소의 개념
  -> 태그, 글자, 띄어쓰기 모두 자식 요소라고 함.

# HTML
<div id="test3">
  <p></p> <!-- 자식 요소가 없음 -->
  <p>123</p>
  <p>      </p>
  <p><strong>하이</strong></p>
</div>

# CSS

/*
:empty */
#test3 > p:empty {
  background-color: greenyellow;
  height: 30px;
}

4. 여러 선택자 동시 선택

• 같은 스타일을 지정하고 싶으나
  요소를 선택하는 선택자가 일치하지 않을 때 사용
• 선택자1, 선택자2, 선택자3... { css 코드; }

# HTML

<div id="test4-1">테스트1</div>
<div id="test4-2">테스트2</div>
<div class="test4-3">테스트3</div>

# CSS

/* 여러 선택자 동시 선택 */
#test4-1, #test4-2, .test4-3 {
  background-color: yellow;
  color: red;
}

5. 특정 요소 내부에 있는 특정 클래스만 선택하기

# HTML

  <ul id="test5-1">
    <li class="c5">1</li>
    <li class="c5">2</li>
    <li class="c5">3</li>
    <li>4</li>
    <li>5</li>
</ul>

<ul id="test5-2">
    <li class="c5">6</li>
    <li class="c5">7</li>
    <li class="c5">8</li>
    <li>
        <span class="c5">9</span>
    </li>
    <li>
        <span class="c5">10</span>
    </li>
    <p class="c5">11</p>
    <p class="c5">12</p>
</ul>

# CSS

/* 특정 요소 내부에 있는 특정 클래스만 선택하기 */
/*
#test5-1 후손 중 클래스가 c5인 요소를 선택 */
#test5-1 .c5 {
  background-color: aqua;
}

/*
#test5-2의 자식 중 클래스가 c5인 li 요소만 선택 */
#test5-2 > li.c5 {
  /* li 태그 중에 클래스가 c5인 것
      띄어쓰기 있으면 안됨! */
  background-color: tomato;
}

6. 클래스가 여러개인 요소만 선택

# HTML

<div class="test6">테스트</div>
<div class="test6 c6">테스트</div>
<div class="c6">테스트</div>

# CSS

/* 클래스가 여러개인 요소만 선택 */
.test6.c6 {
  /* 클래스명들을 띄어쓰기 없이 . 으로 연결 */
  background-color: red;
}

선택자 우선순위

• 기본적으로 css 속성은 style태그 또는 css 파일에
  작성된 순서대로(위->아래) 해석이 진행되지만
  같은 요소에 여러 css 속성이 설정되는 경우 우선 순위가 적용된다.

알아둬야 할 것

• 동일한 우선 순위로 css 속성이 설정된 경우
  -> 제일 마지막에 작성된 css 속성이 반영된다.
• 2) 여러 선택자를 이용해서 같은 요소를 선택하더라도
  지정되는 css 속성이 다르면 모두 반영된다.

1순위: css속성: 속성값 !important;
2순위: inline-style 속성 (요소에 직접 작성되는 style속성)
3순위: 아이디 선택자(#아이디 속성명)
4순위: 클래스 선택자(.class 속성명)
5순위: 태그 선택자 (태그명)

# HTML
                     <!-- 2순위 : inline-style -->
<div class="cls1" id="test1" style="background-color: pink;">우선순위 테스트</div>

# CSS

/* 코드는 위에서 아래로 흘러 아래로 갈수록
   최신화 되지만 우선수위가 적용 된다면? */

/* 1순위 : 속성값 !important */

/* 2순위 : html에 직접 작성 */

/* 3순위 : 아이디 선택자 */
#test1 {
  height: 100px;
  background-color: black;
  color: white;
}   

/* 4순위 : 클래스 선택자 */
.cls1 {
  background-color: green;
}

.cls1 {
  background-color: yellow;
  /* 동일한 우선순위에선 
     아래쪽에 작성된 설정값이 우선적용 됨 */
}

/* 5순위 : 태그 선택자 */
div {
  width: 200px;
  height: 200px;     /* 1순위 : 속성값 !important */
  background-color: red !important; 
  /* 설정값이 아래에 있지만 우선순위에 밀려
     빨간색이 적용되지 않음 */
}