TIL | CSS selector & cascading

gemma. K·2020년 9월 11일

목록 보기

2/6

CSS

css(Cascading Style Sheets) 은 마크업 문서인 html의 스타일을 변형 가능하도록 하는 기술이다. html이 웹 사이트의 뼈대라고 한다면 css는 이를 꾸며주는 도구라고 생각할 수 있다.

style tag

css를 사용할 수 있는 가장 기본적인 방법으로는 html style tag 를 활용해 웹사이트를 변형 시킬 수 있다. element 안에 style tag를 추가 시키고 따옴표 안에 "property(속성): value(속성값);" 을 넣는다. semicolon은 속성 구별자로 없다면 다른 속성을 추가 시킬 수 없다.

<h1 style="color: red;">Hello World!</h1>

selector

style tag를 이용하는 것 외에도 css는 selector(선택자)가 존재한다. selector에는 크게 tag selector, class selector, id selector가 존재한다. selector는 style tag와 달리 html의 head에 style이라는 태그를 새로 추가 하여 사용하거나 문서가 방대 해질 우려가 있는 경우 "문서이름.css"의 이름으로 새로운 문서를 추가하고 html head에 link를 추가하여 css와 연결 시키는 방법이 있다.

1. tag selector

tag selector란 html tag를 선택하여 style을 주는 것인데 해당되는 tag에는 모두 스타일이 적용된다. h1이라는 tag에 color 속성, red 값을 주었다.

<!DOCTYPE html>
<html>
<head>
    <style>
    	h1 {
         color: red;
        }
    </style>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

2. class, id selector

class와 id selector는 기본적으로 같은 방식으로 적용 가능하다. tag 안에 class, id에 값 이름을 설정하고 style 태그 안에 class 는 .class이름 , id는 #id이름으로 정의하여 스타일을 적용시킨다.

<!DOCTYPE html>
<head>
    <style>
    	.class1 {
         color: red;
        }
        #id1 {
         color: blue;
        }
    </style>
</head>
<body>
    <p class="class1">Hello World!</p>
    <p id="id1">Hello World!</p>
</body>
</html>

3. class 와 id 의 차이

class와 id 선택자의 차이는 크게 없다. 하지만 가장 큰 차이점은 class 선택자는 중복 사용이 가능하지만 id 선택자는 중복 사용이 불가능하다.

<!DOCTYPE html>
<html>
<head>
  .class1 {
   color: red;
  }
  .class2 {
   color: orange;
  }
  #id1 {
   color: yellow;
  }
  #id1 {
   color: green;
  }
</head>
<body>
    <p class="class1 class2">Hello World!</p>
    <p id="id1 id2">Hello World!</p>
</body>
</html>

결과는 첫 번째 단락은 오렌지 색상이고 두 번째는 검정색이다. 그 이유는 id 선택자는 2개 이상의 id 선택자가 존재하는 경우 default 되어 버린다. 결국 어떤 선택자의 속성도 반영하지 못 한다는 것이다.

cascading

css의 이름에서도 알 수 있듯이 css는 우선순위가 있는 스타일 시트로 볼 수 있다. 제일 먼저 우선순위를 두는 것은 웹 사이트 저자인 개발자의 코드가 가장 우선 순위이고, 두 번째는 사용자이다. 예를 들어 폰트 사이즈를 변경할 수 있다. 마지막은 웹 브라우저이다.

1. 명시도

<!DOCTYPE html>
<html>
<head>
  h1 {
   color: blue;
  }
</head>
<body>
    <h1 style="color: red;">Hello World!</h1>
</body>
</html>

css 코드의 우선순위는 중요도, 명시도, 순서에 따라 달라진다. 명시도(specificity) 는 스타일을 적용시키는 범위가 작을 수록 우선순위가 높다. 따라서 tag 내 style 속성, inline 스타일, id 스타일, class 스타일, 태그 외 상속 태그 스타일 순으로 높다.

태그에 가까운 (명시도가 더 높은) 태그 내 style 속성이 h1 태그 속성자보다 명시도가 높다. 결과는 폰트 색상이 빨간색인 Hello World!이다.

2. !important

<!DOCTYPE html>
<html>
<head>
  h1 {
   color: blue !important;
  }
</head>
<body>
    <h1 style="color: red;">Hello World!</h1>
</body>
</html>

속성 뒤에 !important 를 사용하면 우선 순위도를 모두 무시하고 해당 속성을 무조건적으로 적용 시킬 수 있다. 앞선 예제에 h1 태그 속성자에 !important 을 준다면 결과는 파란색의 Hello World! 가 된다. 그러나 이전 규칙을 모두 변경 시키는 만큼 많이 쓰이는 기능은 아니다.

3. 코드의 순서

<!DOCTYPE html>
<html>
<head>
    <style>
      .type1 {
        color: green;
        }
      .type2 {
        color: blue;
       }
    </style>
</head>
<body>
    <p class="type1 type2">Hello World!</p>
</body>
</html>

만약 명시도의 우선순위가 같은 경우, 하나의 요소에 두 가지의 class 선택자가 저장되어 있다면 css는 나중에 작성된 스타일을 적용한다. 결국 이 전의 스타일을 새로운 스타일이 덮는다고 볼 수 있다. 따라서 위의 예는 파란색의 Hello World!가 결과값으로 볼 수 있다. p 태그 안의 class="type1 type2"의 순서를 바꾸어도 스타일 태그 안의 나중에 작성된 스타일이 적용된다.