CSS - CSS Selector

CSS Selector

• id 선택자
  

  : 같은 페이지 안에 id 값은 유일해야 한다.
  즉, 만약 id="a" 라고 아이디를 작성했다면, a 라는 아이디 값은 이 HTML안에서 단 한 개만 존재해야 한다.

  id 이름은 알파벳 또는 _ (언더바), - (하이픈)으로 시작해야 한다.

  또한 id 속성을 사용하면 <a href=""> 속성과 연결하여 현재 페이지에서 이동하는 해쉬 링크를 만들 수도 있다.

  id는 css와 javascript에서 활용할 수 있으니 중요한 속성 중 하나이다.
  따라서 id 이름을 최대한 직관적이고 간단 명료하게 지어주는 것을 권장한다.
  
  
  

• class 선택자
  

  : class 속성은 한 페이지에 여러 개가 존재할 수 있기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별할 수 있다.
  따라서 클래스는 중복이 가능하다는 특징 때문에 유니크한 class를 생성하여 자주 쓰는 스타일을 정의해 두고 재사용하는 것이 가능하다.

  class 이름은 알파벳 또는 _ (언더바), - (하이픈)으로 시작해야 한다.

  class 속성도 id 속성처럼 css와 javascript에서 활용할 수 있는 중요한 속성 중 하나이다.
  따라서 class 이름을 최대한 직관적이고 간단 명료하게 지어주는 것을 권장한다.
  
  
  

• 타입 다중 선택자
  

  : , (콤마) 로 선택자를 연결하여 다양한 요소를 선택한다.

---

선택자 우선 순위

• 선택자 우선 순위

  : Cascade의 의미에 따라 CSS에 적용 우선 순위가 있다는 것을 알 수 있다.
  이와 마찬가지로 CSS파일 안에서 사용되는 선택자들 역시 우선 순위가 존재한다. 이러한 선택자 우선 순위에는 3가지 원칙이 있다.

  1. 후자 우선의 원칙
  2. 구체성의 원칙
  3. 중요성의 원칙
     
     

• 후자 우선의 원칙

  : 두 개의 선택자가 동일하면 둘 중에 후자가 우선한다.
  

  위의 코드에서 동일한 선택자가 연속으로 사용된 것을 확인 할 수 있다.
  원칙에 따라 color 값과 background-color 값이 두 번째 타입선택자의 값으로 덮어 씌워진다.
  
  

• 구체성의 원칙

  : 한 선택자가 다른 선택자보다 더 구체적이면 구체적인 선택자가 일반적인 선택자보다 우선한다.

  

  위의 코드에서 동일한 선택자가 연속으로 사용된 것을 확인 할 수 있다.
  둘 다 같은 <h1> 태그를 가리키지만, 첫 번째 선택자가 더욱 구체적이기 때문에 원칙에 따라 color 값과 background-color 값이 첫 번째 타입선택자의 값으로 덮어 씌워진다.

  • 가중치

    : 구체성의 원칙은 가중치라는 것을 기준으로 작동한다. 즉, 어떤 선택자가 더 구체적인가?를 판단할 때 가중치를 기준으로 판단한다는 의미이다.

    id와 class가 동시에 있을 경우에는 id > class > 타입 순으로 style 적용이 된다.

  • 우선 순위 계산
    

    : 가중치라는 것을 기준으로 작동할 때, 선택자들은 각각 해당하는 가중치 점수가 있다. 이 가중치 점수를 이용해 어떤 선택자의 우선 순위가 가장 높은 지 계산할 수 있다.
    
    
    

• 중요성의 원칙

  : 다른 속성보다 더 우선적으로 적용 되어야 할 중요한 스타일 속성이 있다면 !important 를 속성값 다음에 추가한다.

  • !important : 절대적인 우선순위. 가중치 점수를 무시하고 무조건적인 우선 순위를 가진다.
    쉬운 방법이지만, 우선 순위 계산을 어렵게 만들기 때문에 인라인 스타일을 덮어 써야하는 등의 불가피한 상황이 아니라면 사용하지 않는 것이 좋다.
    

---

속성 선택자

• 태그[속성 이름]
  

  : 속성 이름에 해당하는 모든 태그를 선택
  
  

• 태그[속성 이름=변수]
  

  : 속성 이름의 속성 값이 변수와 일치하는 태그를 선택
  
  
  

• 태그[속성이름~="변수"]
  

  : 속성 이름의 속성 값이 변수를 포함하는 태그를 선택 (단어)
  
  

• 태그[속성^="변수"]
  

  : 속성의 속성 값이 변수로 시작하는 태그를 선택
  
  
  

• 태그[속성$="변수"]
  

  : 속성의 속성 값이 변수로 끝나는 요소를 선택
  
  
  

• 태그[속성*="변수"]
  

  : 속성의 속성 값이 변수를 포함하는 태그를 선택 (문자열)

  ~= 는 단어를 기준으로 *= 는 문자열을 기준으로 판단을 하게 된다.
  예를 들어, ~= 은 단어를 기준으로 google 과 googlee 를 다르다고 인식해 선택을 못하게 되고,
  *= 은 문자열을 기준으로 googlee 안에 google 이 포함되기 때문에 선택을 한다.
  

---

가상 클래스 선택자

실재로 html에 존재하지 않는 클래스지만, 마치 클래스가 존재하는 것 처럼 작동한다고 하여 가상 클래스 선택자라 한다.
가상 클래스 선택자는 콜론(:)이ㅣ 1개(:)이다.

• 자식 클래스 선택

  • .class_name:first-child
    : 클래스의 엘리먼트 중 첫 번째 자식인 엘리먼트를 선택

  • .class_name:last-child
    : 클래스의 엘리먼트 중 마지막 자식인 엘리먼트를 선택

  • .class_name:nth-child(n)
    : 클래스의 엘리먼트 중 n 번째 자식인 엘리먼트를 선택

  • .class_name:nth-child(odd)
    : 클래스의 엘리먼트 중 홀수 번째 자식인 엘리먼트를 선택

  • .class_name:nth-child(even)
    : 클래스의 엘리먼트 중 짝수 번째 자식인 엘리먼트를 선택

  • .class:nth-child(3n+1)
    : 클래스의 엘리먼트 중 3n+1번째 자식인 엘리먼트를 선택
    
    

• 상호 작용을 위한 가상클래스

  • :hover

    : 사용자가 마우스를 요소 위에 올렸을 때 적용된다.
    스마트폰이나 패드 류의 터치스크린 기기에서는 사용자의 손가락이 호버되는 시점을 알 수 없기 때문에 모바일 기기가 많아지면서 점점 사용 빈도가 줄어드는 기능이다.

  • :active

    : 사용자가 요소의 버튼을 누르거나 링크를 클릭할 때 적용된다.

  • :focus

    : 요소에 포커스가 있을 때 적용된다.
    클릭할 수 있는 요소나 폼 컨트롤(input, select 등)과 같이 상호 작용 할 수 있는 모든 요소에는 포커스가 가능하다.

---

가상 요소 선택자

가상 요소 선택자는 콜론(:)이 2개(::)이다.
간혹 가상요소 선택자에 콜론이 1개만 보이는 경우가 있다. 이것은 레거시 브라우저 호환을 위한 선택이다. (Internet Explorer 8이하)

가상 요소 선택자는 마크업 없는 요소를 삽입하고,
가상 클래스 선택자는 클래스 없는 요소에 클래스 삽입한다.

가장 많이 사용하는 가상 요소 선택자가 ::after 와 ::before 이다.

• ::before : 요소 내용 앞쪽에 새 컨텐츠를 추가
  
  
• ::after : 요소 내용 뒤쪽에 새 컨텐츠를 추가

가상 선택자의 content: ""; 에 텍스트 내용을 넣어 사용할 수 있다.
텍스트 내용을 적지 않고 사용할 때도 content: ""; 공백으로 남겨두어야 한다.

가상 선택자의 content: url(); 을 사용하여 이미지를 넣을 수 있다.

위의 순서로 콘텐츠가 나타난다.

또한, ::before 와 ::after 가상 요소 content 속성에는 HTML 태그의 속성 값을 가져오는 attr() 함수를 사용할 수 있다.

특히 데이터 속성("data-") 값을 가져올 수 있기 때문에 콘텐츠에 표시하는 동적인 내용들을 다루고 관리하기가 훨씬 쉬워진다.

HTML과 CSS 코드의 관리와 유지보수 측면에서도 훨씬 효율적이므로 동적인 데이터를 웹에 표시할 때 체계적인 데이터 관리가 가능하다.