기본 CSS 요약 - Selectors

Josh의 강의를 스터디 하고 있는데, 스터디하면서 정리하는 글이다.
(영어라 잘못 해석할 수도 있다..)

Selectors

Selector / Pseudo-classes

• :hover

우리가 마우스를 버튼 위로 올렸을 때, JS로 처리한다면 어떻게 하나요? JS의  onMouseEnter / onMouseLeave의 내장함수를 사용하여 상태를 관리해야할 것입니다, 하지만 CSS를 사용한다면?

<style>
  button:hover {
    color: blue;
  }
</style>

<button>Hover over me!</button>

위 코드 처럼 : hover pseudo class를 사용하여 간단하게 구현할 수 있습니다.

---

• focus  : 클릭하거나 탭했을 경우 포커스가 설정됩니다.

해당 스타일은 중요한데. 그 이유는 해당 스타일은 마우스, 터치스크린을 사용하지않는 접근성문제를 다루는데 있어서 중요하기 때문이다. 음성을 통해 탭으로 말하면서 수행할 수 있기 때문에 이는 중요하다.

 

button:focus {
  border: 2px solid royalblue;
  background: royalblue;
  color: white;
}
/*HTML*/
<button>Hello</button>
<button>world</button>
<button>!</button>

---

• checked : 체크된 라디오 버튼에만 적용이 됩니다. 이를 통해 활성화 되었음을 확인할 수 있습니다. 

/*CSS*/

input:checked {
  width: 24px;
  height: 24px;
}

/*HTML*/
<input type="checkbox" />
  Broccoli
<input type="checkbox" />
  Carrots

---

Selector / Pseudo-element (의사 요소)

• placeholder

Pseudo-element는 Pseudo-class와 비슷하지만 차이점은 특정 상태를 대상으로 하지 않습니다. 대신 요소내의 하위 요소를 대상으로 합니다. 구문측면에서는 하나 대신 두개의 ::콜로을 사용하지만 일부 Pseudo element는 단일 콜론도 지원합니다.

<style>
  input {
    font-size: 1rem;
  }
  input::placeholder {
    color: goldenrod;
  }
</style>
<label>
  Postal Code:
  <input
    type="text"
    placeholder="A1A 1A1"
  />
</label>

 

---

• ::before / ::after

일반적인 의사요소로 before와 after가 있다. 이런 pseudo-element 는 element 컨텐츠 앞 뒤에로 추가 됩니다.

다음과 같이 사용할 수 있습니다.

 

  p::before {
    content: '→ ';
    color: deeppink;
  }
  
  p::after {
    content: ' ←';
    color: deeppink;
  }
</style>
<p>
  This paragraph has little arrows!
</p>

사실 위와 같은 코드는 아래와 같은 코드로 변경할 수 있습니다.

<style>
.pseudo-pseudo {
  color: deeppink;
}
</style>
<p>
  <span class="pseudo-pseudo">→ </span>
  This paragraph has little arrows!
  <span class="pseudo-pseudo"> ←</span>
</p>

두 코드의 결과는 똑같습니다. 또한 성능 측면에서도 큰 차이가 없습니다. 단지 ::before와 ::after는 syntax sugar일 뿐민니다.

이 두가지는 같이 사용하지 않는 것이 좋은데, 그 이유는 웹접근성에 대한 문제가 있기 때문이다. (스크린 리더의 content만 읽음)

 

따라서 이러한 효과는 빈문자열을 사용하여 장식적인 효과를 줄 때 사용하는 것이 좋습니다!

 

---

Selector - Combinators

<nav>
  <a href="">Home</a>
  -
  <a href="">Shop</a>
</nav>

<p>
  Hello world! You might be interested in reading <a href="">an article</a>!
</p>

위의 코드에서 <a>는 여러 요소들로 감싸져 있습니다. 만약 우리가 <nav>요소의 <a>태그에만 스타일을 지정하고 싶다면 어떻게 할까요?

이때 상용하는 것이 combinators입니다.

 

nav a {
  color: red;
  font-weight: bold;
}

nav와 a 사이의 공백을 넣어주면 두개의 selectors를 결합합니다.  여기서 중요한 것은 순서입니다.

만약 a nav 의 스타일을 지정한다면 스타일이 적용되지 않습니다. 

combination은 여러 선택자를 결합한 문자이지만, 공백의 경우는 첫번째 선택자의 자손 선택자인 뒤의 선택자의 스타일을 준다는 의미입니다. 

 

만약 자손이 아니라 child으로 구성되어있으면 어떻게 해야할까요?

> 기호를 사용하면 됩니다.

 

아래와 같은 예시처럼 >기호를 사용하여 child만 뽑아서 css 스타일을 적용할 수 있습니다.

결과를 보면 제일 하위 자손에 있는 li에는 border property적용이 안된 것을 확인 할 수 있습니다. 

<style>
  li {
    margin-bottom: 8px;
  }
  
  .main-list > li {
    border: 2px dotted;
  }
</style>

<ul class="main-list">
  <li>Salt</li>
  <li>Pepper</li>
  <li>
    Fruits & Veg:
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Carrots</li>
    </ul>
  </li>
</ul>