[2] 선택자{ }와 리스트

최근에는 생활코딩에서 선택자를 배우는데 재미있는 부분들이 있었다. 무엇보다 수포자였던 내가 수학의 필요성을 다시금 느끼고 있다. 아래는 선택자와 선언, 속성, 값으로 이루어진 스타일 규칙이다.

선택자

이번 강의에서는 id, class 를 배웠는데, id는 id="active"가 붙은 태그에 대해 css에서 #active{}라는 형태로 어떤 스타일을 적용할 수 있고, class는 class="saw"가 붙어있는 태그에 대해 .saw{}라는 형태로 스타일을 적용할 수 있다. 둘이 차이가 있다면 id는 우리의 id가 그러하듯 하나의 id 밖에 적용할 수 없는데 반해, class는 같은 cclass로 묶인 모든 태그에 대해 적용이 가능하다는 점이다.

참고로 다른 선택자를 포함해 선택자의 상하관계를 나타내보자면

• !important
• inline style
• #id
• .class
• tag

순이다 (라고 동생이 가르쳐줬다.) 이 순서도 <ul>을 선택자로 지정한 뒤, bullet(글머리기호)를 없얘고, 너무 띄어져 있길래 padding 값을 0으로 줬다.

선택자를 통해 컬러를 한 번에 바꿀 수 있다는 사실은 알았지만, 위 리스트처럼 리스트의 전체적으로 그러데이션을 줄 수도 있을까? 저건 인라인 스타일 태그를 준 것으로 하나하나 컬러코드를 넣어줘야 했는데, 방법을 찾는다면 리스트가 1천 개여도 가능할 것이다

한편, 박스모델이라는 강의를 통해 블럭에 대해 배웠다. 타이틀인 h1, h2등의 태그와 리스트는 a태그와 다르게 자신만을 블럭으로 가지는 게 아니라 한칸 전체를 차지한다. 이 전체 블럭의 색을 바꾸는 것이 background: color; 인데, 이제 이 블럭의 색을 다양하게 바꿔보려 한다.

가상 클래스 셀렉터 (Pseudo-Class Selector)

가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 예를 들어 다음과 같다. 출처는 여기

1. 마우스가 올라와 있을때
2. 링크를 방문했을 때와 아직 방문하지 않았을 때
3. 포커스가 들어와 있을 때

이러한 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다.

가상 클래스는 마침표(.) 대신 콜론(:)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.

:nth-child(n)

셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다는 뜻의 가상클래스다. 뒤의 괄호에는 계산을 넣을 수 있어서 계산에 따라 다른 활용을 간편하게 보여줄 수 있었다.

아래의 가상 클래스 셀렉터를 통해 무지개 같은 모습의 리스트를 만들었다.

li:nth-child(7n + 1)

    li{
      background: blue;
    }
    li:nth-child(7n + 1){
      background: red;
    }
    li:nth-child(7n+2){
      background: orange;
    }
    li:nth-child(7n+3){
      background: yellow;
    }
    li:nth-child(7n+4){
      background: green;
    }
    li:nth-child(7n+5){
      background: blue;
    }
    li:nth-child(7n+6){
      background: navy;
    }
    li:nth-child(7n+7){
      background: black;
    }

조금 더 실력이 늘면 랜덤한 색상의 리스트를 만들 볼 계획이다.