모던 웹을 위한 HTML5+CSS3 바이블(2)

🍎 들어가기에 앞서

이 글은 모던 웹을 위한 HTML5+CSS3 바이블을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏

📖 1. CSS3 선택자 기본

CSS 선택자란

CSS3 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능으로 해당 태그에 우리가 원하는 스타일 또는 효과를 적용할 수 있습니다.

h1 {
  color: red;
}
/* h1: 선택자, color: 스타일 속성, red: 스타일 값 
"h1 태그의 color 속성에 red 키워드를 적용합니다." */

전체 선택자

HTML 문서 안에 있는 모든 태그를 선택할 때, 전체 선택자를 사용합니다.
전체 선택자를 사용하면 html 태그부터 head, title, style, body 태그까지 모두 선택합니다.
body 태그 내부의 태그들만 선택하는 게 아닙니다!

* {
  color: yellow;
}

속성 선택자

특정 속성을 가진 HTML 태그를 선택할 수 있습니다.

기본 속성 선택자

input[type='text'] {
  background: blue;
}

문자열 속성 선택자

• ^=의 경우 속성값이 뒤에 오는 값으로 시작되는 태그를 선택합니다.
• $=의 경우 속성값이 뒤에 오는 값으로 끝나는 태그를 선택합니다.

div[class^='main'] {
  color: green;
}

img[src$='jpg'] {
  border: 2px solid gold;
}

후손 선택자 & 자손 선택자

아래의 코드에서 div 태그를 기준으로 바로 한 단계 아래에 위치한 태그(h1, h2, ul)를 자손이라고 부르고 자손 태그를 포함 모든 div의 아래 태그들을 후손이라고 부릅니다.

<div>
  <h1>CSS3 Selector Basic</h1>
  <h2>Lorem ipsum</h2>
  <ul>
    <li>universal selector</li>
    <li>type selector</li>
    <li>id & class selector</li>
  </ul>
</div>

div h1 {
  background: black;
}
/* div 태그의 후손 태그들 중 h1 태그들이 모두 선택됩니다. */

div > h2 {
  background: skyblue;
}
/* div 태그의 자손 태그들(바로 아래) 중 h2 태그들이 모두 선택됩니다. */

동위 선택자

동일한 위치(층)에 위치한 태그를 선택할 때 사용하는 선택자입니다.
CSS3 애니메이션을 사용해 동적으로 움직이는 레이아웃을 구성할 때 동위 선택자를 자주 사용합니다.

<h1>hi</h1>
<h2>bye</h2>
<h2>good</h2>

h1 + h2 {
  color: red;
}
/* h1 태그 `바로 뒤`에 위치하는 h2 태그를 선택합니다.
(이 때, h1과 h2는 `동위 관계`입니다.) */

h1 ~ h2 {
  color: pink;
}
/* h1 태그 `뒤`에 위치하는 모든 h2 태그를 선택합니다.
(이 때, h1과 h2는 `동위 관계`입니다.) */

반응 선택자

유저의 반응으로 생성되는 특정 상태를 선택하는 선택자입니다.

h1:hover {
  color: red;
}
/* h1 태그에 마우스를 올릴 경우에 적용됩니다.(개인적으로 좋아하는 태그입니다. 👍) */

h1:active {
  color: blue;
}
/* h1 태그를 마우스로 클릭할 때 적용됩니다. */

구조 선택자

자손 선택자와 병행해서 자주 사용합니다.

일반 구조 선택자

특정한 위치에 있는 태그를 선택하는 선택자입니다.

• :first-child : 형제 관계 중 첫 번째에 위치하는 태그를 선택합니다.
• :last-child : 형제 관계 중 맨 끝에 위치하는 태그를 선택합니다.
• :nth-child(수열) : 형제 관계 중 앞에서 수열 번째에 위치하는 태그를 선택합니다.
• :nth-last-child(수열) : 형제 관계 중 뒤에서 수열 번째에 위치하는 태그를 선택합니다.

형태 구조 선택자

일반 구조 선택자와 헷갈리지만 태그 형태를 구분한다는 특징이 있습니다.

• :first-of-type : 형제 관계 중 첫 번째로 등장하는 특정 태그를 선택합니다.
• :last-of-type : 형제 관계 중 맨 끝에 등장하는 특정 태그를 선택합니다.
• :nth-of-type(수열) : 형제 관계 중 앞에서 수열 번째로 등장하는 태그를 선택합니다.
• :nth-last-of-type(수열) : 형제 관계 중 뒤에서 수열 번째로 등장하는 태그를 선택합니다.

문자 가상 요소 선택자(문자 선택자)

태그 내부 특정 조건의 문자를 선택하는 선택자입니다. 가상 요소 선택자로 ::를 사용합니다.

반응 문자 선택자

사용자가 문자와 반응해서 생기는 영역을 선택합니다.

• ::selection : 사용자가 드래그한 글자를 선택합니다.

링크 선택자

href 속성을 갖고 있는 a(anchor) 태그에 적용되는 선택자입니다.

• :link : href 속성을 가지고 있는 a 태그를 선택합니다.
• :visited : 방문했던 링크를 가지고 있는 a 태그를 선택합니다.

부정 선택자

지금까지 배운 모든 선택자를 반대로 적용할 수 있게 만드는 선택자입니다.

• :not(선택자) : 선택자를 반대로 적용합니다.

input:not([type='password']) {
  background: tomato;
}
/* type값이 password가 아닌 input 태그를 선택합니다. */

CSS3 선택자는 매우매우매우 다양하고 많기에 모두 외울 수 없습니다. 위에 정리한 선택자들은 개인적으로 ‘이런 게 있었지’ 생각하고 찾아서 사용할 수 있도록 정리해둔 것입니다.
반드시 공식문서를 보면서 필요한 선택자를 서치할 수 있는 능력을 키우는 것을 추천드립니다. 💯