CSS의 선택자와 캐스캐이드

(css는 사실 cascading style sheets의 줄임말이다. cascading은 '위에서 아래로 흐르는' 이라는 뜻인데, 왜 이런 뜻이 있을지 알아보자.)

0. 오늘의 배울 것

css의 선택자를 잘 써먹어야 코드가 예쁘다!!

css를 작성할 때엔, 스타일을 지정할 선택자를 고르고 그 선택자에 스타일을 선언하면 된다.

그런데 사실, 선택자는 단순히 태그나 class, id 이름만 적는 곳이 아니다! class 이름을 여러 개 섞을 수도 있고, class 내부 하위 태그를 선택할 수도 있다. 선택자를 쓰는 법을 알아보자.

css에도 상속이 있다.

css도 프로그래밍 언어처럼 스타일을 상속한다! 부모 태그에 스타일을 주면, 그의 자식 태그에게도 그 스타일이 상속된다. 그런데 만약 하나의 속성이 여러 번 상속되면서 속성의 스타일이 중복 선언되면 어떻게 될까? 이럴 땐 캐스케이드, 속성의 우선순위를 계산해 가장 우선순위가 높은 속성값을 적용한다. 어떻게 우선순위를 계산하는지 규칙을 알아보자.

css 선택자, selector

1. css 선택자란

css 규칙을 선언할 때, 선택자로 태그나 아이디, 클래스를 쓸 수 있으며 이들을 조합해서 더 구체적으로 명시할 수도 있다.

• 선택자 목록" 스타일이 같은 클래스들 여러 개를 목록으로 묶어서 선택자로 지정한다.

  .Aclass, .Bclass, Cclass{
    color: #ff22ff;
    /* Aclass와 Bclass, Cclass가 적어도 한 개 이상 지정된 태그들에게 스타일 부여. */
  }

2. 선택자 붙여쓰기

html 태그에서는 하나의 클래스만 주는 게 아니라 여러 클래스를 한꺼번에 줄 수 있다. 이렇게 여러 클래스를 가진 태그를 선택할 때엔 선택자를 붙여쓴다.

선택자 붙여쓰기를 할 때엔 html태그가 가장 먼저 와야 한다.

그 이후엔 아이디가 먼저 와도 되고, 클래스가 먼저 와도 되지만 암묵적으로 아이디를 먼저 쓰는 편이다.

클래스를 무조건 많이 쓰기보단, 두 개 이하가 적당하다.

<div class="Aclass Bclass">
    이 div에는 클래스가 2개 주어졌다.
</div>
<div class="Aclass">
    이 div에는 클래스가 1개 주어졌다.
</div>

.Aclass.Bclass{
    color: #ff22ff;
    /* 첫번째 div에만 적용되는 스타일 */
}

div.Aclass{
    color: #22ff22;
    /* div 태그이면서 Aclass를 가진 태그에만 적용되는 스타일. */
}

3. 자식, 자손 선택하기

복잡한 웹을 만들다보면 실수로 아이디나 클래스 이름을 중복해서 작성하는 경우가 있다. 이걸 막기 위해 자식, 자손을 선택해서 선택자를 작성하자.

1. 부모의 직계 자식 선택하기: child combinator인 > 기호를 사용해라.

   .parent-class > .child-class{
    color: #ff22ff;
    /* parent-class 클래스를 가진 요소의 직계 자식 태그 중 child-class 요소에만 적용하라. */
   }

2. 부모의 자손 선택하기: descent combinator인 스페이스바를 사용해라.

   .parent-class .descent-class{
    color: #ff22ff;
    /* 부모 하위 자손들 중 descent-class 클래스 요소에 전체 적용하라. */
   }

4. 가상 클래스

태그 선택자들에겐 미리 컴퓨터가 정해둔 가상 클래스들이 있다. 이 가상클래스는 미리 이름이 정해져있으므로, 만약 활용하고 싶다면 검색해서 어떤 가상 클래스들이 있는지 알아보자.

a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

위의 태그는 a 태그에 밑줄을 모두 없애되, 마우스를 올리면 밑줄이 생기게 해준다.

여기서 :hover이 가상클래스 이름이다!

가상클래스 종류:
hover, active, visited, focus 가 있음.

정리하자면 선택자를 쓰는 방식에는

.a-class, .b-class{
    /* a-class or b-class에 적용 */
}

.a-class.b-class{
    /* a-class and b-class에 적용 */
}

.a-class .b-class{
    /* a-class 하위 자식 태그 중 b-class에 적용 */
}

5. 알아두면 좋은 선택자들

*{
    box-sizing: border-box;
    /* 전체 요소를 선택한다. */
}

.a-class>*{
    /* a-class의 모든 직계 자식을 선택한다. */
}

.a-class :nth-child(3){
    /* a-class의 직계 자식 중 3번째를 선택한다 */
}

.a-class :nth-child(even){
    /* a-class의 직계 자식 중 짝수 자식을 선택한다. */
}

.a-class :first-child{
    /* a-class의 직계 자식 중 첫놈 */
}

.a-class :last-child{
    /* a-class의 직계 자식 중 마지막 놈 */
}

6. 선택자를 마구잡이로 쓰는 것도 좋지 않다!

1. 선택자는 단순하게 조합해라!!
2. 같은 클래스 중에서도 변화를 줄 때 선택자를 조합하자.
3. 클래스를 넣어줄 태그가 너무 많다면 자손 선택자를 쓰자.
4. 가끔 nth-child도 쓰긴 쓴다. 잘 판단하자!

스타일 계산하기

1. cascading, 캐스케이드란?

코딩을 하다보면 한 태그에 같은 속성이 중복될 때가 있는데, 어떤 속성값이 적용될까? 가장 우선순위가 높은 속성값이 적용되는데, 이 때 각 속성의 값에 우선순위가 주어지는 것을 캐스케이드라 한다.

css는 사실 Cascading style sheets의 줄임말이다. 그만큼 css에선 캐스케이드가 매우 중요한 내용이다!

캐스케이드의 기준은 여러 개지만 가장 핵심적인 것은

1. 스타일 시트의 종류. html 파일 내부 코드(인라인 스타일) >> css 외부 파일 코드 >> 브라우저 기본 css인 user agent css 순으로 우선순위가 높다.
2. 코드 상의 순서. A를 쓰고 그 밑에 B를 쓰면 B가 적용된다. 나중에 쓰인 걸 적용!!
3. 선택자의 명시도. 선택자를 구체적으로 쓸 수록 명시도가 높아 적용된다. 아이디, 태그, 클래스를 많이 쓸 수록 명시도가 높다!!
4. 상속된 스타일. 가까운 조상에게 물려받은 속성일수록 우선순위가 높다. 즉, 조상에게 받은 속성보단 직계 부모에게 받은 속성이 우선 적용된다는 것.

2. 상속

기본적으로 조상에게서 css 속성을 상속받는다.
예를 들어 기본적으로 html 태그에 color: #000000 값을 주어 모두 해당 색을 상속 받는다.

단, 모든 속성이 상속되는 게 아니고 상속에도 우선순위가 있다!!

가장 가까운 직계 부모에게서 물려받은 게 우선순위가 높다. 조상에게서 a를 받았고 부모에게서 b를 받았으면 b가 적용된다.