ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • CSS 기초 - 2 | CSS 의 기본구조와 선택자
      프로그래밍 언어/CSS 2020. 5. 25. 14:14

      CSS 의 기본구조

      이제 CSS 파일을 작성하는 방법에 대해 알아보자.

      CSS 파일은 HTML 파일에 연결되어 HTML 태그를 각각 꾸며주는 역할을 한다. 그렇기에 HTML 파일 안에서 어떤 태그를 꾸며줄 것인지, 또 어떻게 꾸며줄 것인지를 명시해야 한다.

      선택자 {
  속성: 값;
}

      위의 구조가 CSS 의 가장 기본적인 형태라 볼 수 있다.

      • 선택자 : HTML 파일에서 어떤 태그를 선택할 것인지를 명시한다.
      • 속성 : 어떠한 속성을 꾸며줄지 명시한다.
      • 값 : 해당 속성을 어떻게 꾸며줄지 명시한다.

      만약에 HTML 의 p 태그의 글자색을 빨갛게 바꾸고 싶으면 어떻게 할까?

      p {
  color: red;
}

      이게 끝이다. 간단하지 않은가?

      여기서 '좀 더 복잡한 선택자를 다루는 방법' , '여러 가지 속성과 그에 맞는 값들' 에 대해 배우기만 하면 CSS 는 끝이다.

       

      그렇다면 우선 간단한 선택자를 사용하는 방법에 대해 알아보도록 하자.

      CSS 선택자

      CSS 의 선택자는 아래와 같이 크게 3가지로 나누어진다.

      • 태그 선택자
      • id 선택자
      • class 선택자

      이 선택자들에 대해 하나씩 배워보자.

      1. 태그 선택자

      tag {
  color: red;
}

      태그 선택자는 위의 방법으로 사용한다.

      태그명 부분에 HTML 에서 사용한 태그 이름을 넣으면 해당 태그들에 CSS 스타일이 적용된다.

       

      몇 가지 예를 들어보자.

      li {
  color: blue;
}

h1 {
  color: red;
}

      이러한 CSS 파일이 있다고 하자. 이 CSS 파일을 연결한 HTML 파일은 li 태그의 텍스트는 모두 파란 글씨로, h1 태그의 텍스트는 모두 빨간 글씨로 나오게 될 것이다.

      body {
  color: red;
}

      만약 이렇게 한다면 어떻게 될까? body 태그 안의 모든 텍스트들은 빨간 글씨로 나오게 될 것이다.

       

      태그 선택자를 이용한다면 이렇게 굉장히 간단하게 태그에 스타일을 적용해 줄 수 있다. 다만 한 가지 단점이라면 지정한 모든 태그에 스타일이 다 적용된다는 것이다. 여러 개의 p 태그 중 한 태그만 글씨 색을 바꾸게는 할 수 없다.

      2. id 선택자

      #id {
  color: red;
}

      id 선택자는 위의 방법으로 사용한다. 스타일을 적용할 id 값 앞에 # 을 붙여 나타낸다.

      HTML 의 모든 태그는 id 라는 속성을 가질 수 있다. 이 id 속성이 맞는 태그만 골라 스타일을 적용시키는 방법이다.

      id 속성
      모든 태그에 사용할 수 있는 속성으로, 해당 태그에 id 값을 부여할 수 있다.
      이때 한 파일 내에서 같은 id 값은 2개 이상 존재할 수 없다. 즉 특정한 id 값을 가지는 태그는 단 하나밖에 존재하지 않는다.

      이 id 선택자를 이용한다면 태그 선택자와 달리 원하는 태그에만 스타일을 적용할 수 있다. 다만 한 번에 적용되는 태그가 최대 1개밖에 되지 않는다. 그러므로 'p 태그 5개 중 특정 3개 태그에만 스타일을 적용하려는 상황' 같은 경우에는 상당히 귀찮아진다.

      3. class 선택자

      .class {
  color: red;
}

      CSS 를 작성할 때 가장 많이 사용하는 방법이 바로 이 class 선택자이다. 스타일을 적용할 class 값 앞에 . 을 붙여 나타낸다. HTML 태그 중 선택한 class 값과 일치하는 class 속성을 가진 모든 태그에 스타일을 적용시킬 수 있다.

      class 속성
      모든 태그에 사용할 수 있는 속성으로, 해당 태그에 class 값을 부여할 수 있다.
      한 태그가 여러 개의 class 속성을 가지는 것이 가능하고, 한 class 값을 여러 태그가 같이 나눠 쓸 수 있다.

      이 class 선택자를 이용하면, 원하는 태그에만 스타일을 적용 가능할 뿐 아니라, 원하는 다수의 태그에 동시에 스타일을 적용시킬 수도 있다. 같은 class 속성을 여러 태그들이 가지고 있을 수 있기 때문이다.

      그렇기에 CSS 파일 작성 시 대부분 class 선택자를 이용할 것이다.

      CSS 스타일 적용 순위

      CSS 스타일은 여러 가지 방법으로 적용할 수 있다고 위에서 설명했었다. 또한 한 태그에 여러 속성을 중복해서 설정할 수도 있다. 아래와 같이 한 태그에 대해 같은 속성을 중복해서 설정 가능하다. 이땐 어떤 속성이 결과적으로 적용될까?

      p {
  color: red;
}

p {
  color: blue;
}

      이러한 이유로 CSS 스타일은 적용되는 우선순위가 정해져 있다.

       

      1. 속성 값 뒤에 !important 가 붙은 속성
      2. HTML 내에서 인라인 방식으로 지정된 속성
      3. id 선택자로 지정한 속성
      4. class 선택자로 지정한 속성
      5. 태그 선택자로 지정한 속성
      6. 상위 객체에 의해 상속된 속성

      1. !important

      .class {
  color: red !important;
}

      위와 같이 속성 값 뒤에 !important 를 붙여주게 되면 해당 속성이 무조건 우선시된다.

      만약에 같은 태그 속성 값에 둘 다 !important 가 붙는다면, 나중에 지정된 쪽(더 아래에 적힌 코드)이 우선시된다.

      !important 는 최후의 수단 같은 기능이므로 사용하지 않고도 원활하게 의도한 바를 나타낼 수 있게 연습하자.

      2. inline 방식

      <p style="color: red"></p>

      위와 같이 HTML 파일 내에서 inline 방식으로 바로 속성 값을 정하는 방식이다. !important 를 제외하고 가장 순위가 높다. 선택자를 이용하지 않고 태그 내에 직접 style 속성을 전달할 수 있지만 특별한 경우를 제외하고는 사용하지 말자.

      3. id 선택자, class 선택자, 태그 선택자

      #id {
  color: red;
}

.class {
  color: blue;
}

tag {
  color: orange;
}

      id 선택자 > class 선택자 > 태그 선택자 의 순으로 우선순위가 나누어진다.

      우리가 방금 배웠던 내용이기에 한번 더 복습한다는 느낌으로 다시 살펴보자.

       

      잘 살펴보면 우선순위가 높을수록 특정 단일 대상을 지정하고, 우선순위가 낮을수록 불특정 다수 대상을 지정한다는 것을 알 수 있다.

       

      웬만해서는 class 선택자를 주로 사용하겠지만, 혹시나 다른 선택자를 사용할 때는 우선순위를 잘 고려하자.

      4. 상위 객체에 의해 상속

      상위객체에 의해 상속이라니? 이게 무슨 뜻일까?

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Practice</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Hello!</p>
  </body>
</html>
      body {
  color: red;
}

      이러한 HTML 파일과 CSS 파일이 있다고 가정하자. 이때 CSS 에 의해 body 태그의 모든 텍스트는 빨간색이 된다. 이때 이 영향은 body 태그의 모든 후손 태그에 다 전달되게 된다. 이를 상속이라 한다.

       

      그렇기에 HTML 의 p 태그는 따로 속성이 정해지지 않았음에도 빨간 텍스트를 가지게 된다. 상위 객체에 의해 상속받은 스타일을 가지게 된 것이다. 이렇게 어떻게 보면 원치 않게 상속에 의해 지정된 스타일은 가장 낮은 우선순위를 가지게 된다.

       

      body {
  color: red;
}

p {
  color: black;
}

      그럼 CSS 파일을 다음과 같이 수정해주면 어떻게 될까?

      당연히 태그 선택자에 의해 정해진 스타일 속성인 color: black; 이 속성 값으로 적용되게 된다.

      5. 우선순위가 같다면?

      위에서 설명한 우선순위는 잘 알겠다. 그러면 우선순위가 같은 방식끼리는 어떤 게 최종적으로 적용될까?

      간단하다. 나중에 부여한 속성 값이 적용된다.

      .headline {
  color: red;
}

.headline {
  color: blue;
}

      여기서 headline 이라는 class 값을 가지는 태그는 무슨 색을 가질까?

      당연히 나중에 적힌 파란색이 적용된다.

       

      하나만 더 해보자.

      body {
  color: orange;
}

h1 {
  color: red;
}

li {
  color: blue;
}

      CSS 파일이 이렇게 되어있으면 어떻게 스타일 속성이 지정될까?

      우선 body 영역에 있는 모든 태그는 다 orange 색을 가질 것이다. h1 태그와 li 태그는 각각 red 와 blue 색을 따로 가질 것이다.

       

      h1 {
  color: red;
}

li {
  color: blue;
}

body {
  color: orange;
}

      그럼 이렇게 바뀌면?

      h1 태그와 li 태그가 각각의 속성을 가졌지만, 그보다 나중에 적힌 body 에 의해 색이 다 orange 로 바뀔까?

       

      아니다. 애초에 body 에 의해 받은 orange 속성은 상속받은 속성이기에 6순위이고, h1과 li를 각각 지정할 때 사용한 방법은 태그 선택자 이므로 5순위이다. 당연히 body 에 의해 상속받은 속성에 밀리지 않는다.

       

      다시 한번 말하지만, 속성을 부여한 순서에 따라 지정될 스타일이 달라지는 건 우선순위가 같을 때에만 해당한다.

      관련글 관련글 더보기

      댓글

    티스토리툴바