너와 나의 개발 고리

[CSS] CSS의 특징 살펴보기(기본 스타일 시트, 적용 우선순위와 개별성, 상속, 단위, 색상 표기법) 본문

CSS _HTML_JavaScript/CSS

[CSS] CSS의 특징 살펴보기(기본 스타일 시트, 적용 우선순위와 개별성, 상속, 단위, 색상 표기법)

Oli-Viaaaa 2023. 7. 25. 13:06

1. 기본 스타일 시트

hn 태그를 배울 때 단순히 태그만 사용했는데도 웹 브라우저에는 텍스트가 다양한 크기와 굵기로 표시되었다.

 

 

HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없는데도

웹브라우저에서 hn 태그가 각각 다르게 표시된 이유는 웹브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문이다.

 

기본 스타일 시트

: 웹 브라우저에 기본으로 내장되어 웹 브라우저에 표시되는 요소들의 글꼴이나 크기, 색상, 굵기, 문단 설정과 같은 스타일이

미리 정의된 파일 또는 문서 양식을 말한다

 

 

2. 적용 우선순위와 개별성

웹 브라우저는 기본 스타일 시트를 내장하고 있어서 몇 개의 태그는 이미 스타일이 적용된 상태로 표시되는데

여기에 별도로 스타일 속성을 정의하면 아래와 같다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>적용 우선순위와 개별성</title>
  <style>
    h1{
      font-size:16px;
      font-weight:normal;
    }
  </style>
</head>
<body>
  <h1>h1 tag</h1>
</body>
</html>

 

코드를 실행하면 아래와 같이 사용자가 정의한 스타일 속성이 적용된 상태로 표시된다.

원래 텍스트 크기가 더 크고 굵었던 h1 태그 스타일이 변경되었는데 이것은 기본 스타일 시트에 정의된 스타일 속성보다

사용자가 정의한 속성이 우선 적용됨을 의미한다.

 

 

또 다른 예시를 보면 하나의 p 태그에 여러 스타일이 사용되고 있는걸 확인할 수 있는데

결과값은 마지막에 작성한 orange 값이 적용됨을 확인할 수 있다.

 

이처럼 기본 스타일 시트보다 사용자가 정의한 스타일 속성이 우선 적용되고, 같은 태그 요소의 선택자가 여럿일때도

한 속성만 정의되는 이유는 같은 태그에 여러 스타일이 적용되더라도 단계적 적용으로 결국 마지막에 영향을 주는 하나의 스타일에만 적용된다.

 

이때 어떤 스타일이 마지막에 영향을 주는지 CSS의 개별성 규칙에 따라 결정되는데 개별성 규칙에 대한 점수는 아래와 같다.

선택자 예 점수
전체 선택자    * 0
태그 선택자    d i v ,   p ,  h 1 1
가상 요소 선택자    : : b e f o r e ,   : : a f t e r 1
클래스 선택자    . b o x ,   . t i t l e 10
가상 클래스 선택자    : h o v e r ,   : v i s i t e d ,   : l i n k 10
아이디 선택자    # t i t l e ,   # m a i n 100
인라인 스타일    s t y l e = " c o l o r : r e d " 1,000

 

점수를 어떻게 계산하는지 시각적으로 표현한다면 아래와 같다.

 

예제를 보면서 개별성 규칙에 따라 어떻게 점수를 계산하는지 보자

<style>
    .title{color:blue} /* 0, 0, 1, 0 */
    h1{color:red} /* 0, 0, 0, 1 */
</style>
</head>
<body>
    <h1 class="title">h1</h1>
</body>

서로 다른 방식으로 h1 태그에 color 속성을 적용하였지만 h1 태그에 적용된 색상은 개별성 규칙에 따라

클래스 선택자는 0010(10점), 태그 선택자는 0001(1점)이 되어 점수가 높은 클래스 선택자가 적용되어 파란색이다.

 

몇가지 예시를 더 살펴보자 

<style>
    nav > h2{} /* 0, 0, 0, 2 */
    nav .title{} /* 0, 0, 1, 1 */
    #main .sub{} /* 0, 1, 1, 0 */
    a:hover{} /* 0, 0, 1, 1 */
    a:hover span::first-letter{} /* 0, 0, 1, 3 */
</style>

개별성 규칙은 선택자 문법에서 각 선택자가 몇 번 사용됐는지에 따라 점수를 계산하므로 위와 같은 결과가 나온다.

 

<style>
      p {
        color:blue !important; /* 1, 0, 0, 0, 0 */
      }
      #main #sub .title{ /* 0, 2, 1, 0 */
        color:red;
      }
  </style>
  </head>
  <body>
  <div id="main">
      <div id="sub">
          <!-- 1, 0, 0, 0 -->
          <p class="title" style="color:green">importent</p>
      </div>
  </div>
  </body>

위의 예제는 !important 라는 특별한 문법을 사용했는데 이 문법의 점수는 10,000점이라서

비교적 점수가 높은 아이디 선택자와 클래스 선택자에 인라인 조합이 사용되어도 다른 선택자를 모두 압도하고

이 스타일이 우선 적용되어 아래와 같은 결과를 확인 할 수 있다

개별성 규칙 점수를 계산하는게 어렵다면 https://specificity.keegan.st/ 사이트를 활용하면 점수를 쉽게 활용할 수 있다.

 

 

3. 상속

부모 요소에 적용된 스타일을 자식요소가 그대로 물려받아 적용되는 현상을 말한다. 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>상속(inherit)</title>
  <style>
    div{
      color:red;
    }
  </style>  
</head>
<body>
  <div>
    <p>inherit</p>
  </div>
</body>
</html>

텍스트를 직접 감싸는 p 태그가 아닌 div 태그에 스타일을 지정했는데  p 태그에 스타일이 지정된 이유는

CSS의 상속이라는 특성 때문이다. p 태그는 부모인 div 태그의 스타일을 그대로 물려받기 때문에 위와 같은 결과가 나온다.

 

 

4. 단위

CSS 속성에 다양한 단위의 값을 사용할 수 있는데 단위는 절대 단위와 상대 단위로 나뉜다.

절대 단위는 어떤 환경이라도 동일한 크기로 보이는 단위를 말하며 상대 단위는 부모 요소 또는 웹 브라우저 창 크기에 따라 상대적을 결정되는 단위를 말한다.

 

절대단위

: px 한 가지로, 모니터의 화면을 구성하는 사각형 1개의 크기를 의미하며 CSS에서 사용할 수 있는 크기 단위 중 가장 기본이다.

웹 브라우저에서 다른 단위로 값을 지정하더라도 결국 px 단위로 환산되어 계산된다.

 

상대단위

 : CSS에서 자주 사용하는 상대 단위는 아래와 같다

단위 설명
%   해당 속성의 상위 요소 속성값에 상대적인 크기를 가진다.
em   부모 요소의 텍스트 크기에 상대적인 크기를 가진다.
rem   html 태그의 텍스트 크기에 상대적인 크기를 가진다.
vw   뷰포트의 너비를 기준으로 상대적인 크기를 가진다.
vh   뷰포트의 높이를 기준으로 상대적인 크기를 가진다.

 

 

    - %

% 단위는 부모 요소의 속성값에 따라 상대적인 크기를 가진다. 그래서 어떤 속성을 사용했는지에 따라 기준이 다르게 잡힌다.

아래의 예시를 보면 이해하기 쉽다.

.parent{
    font-size:16px;
}
.child{
    font-size:80%; /* 16px(부모 font-size 크기) x o.8 = 12.8px */
}
.child-to-child{
    font-size:80%; /* 12.8px(부모 font-size 크기) x 0.8 = 10.24px */
}

 

 

    - em

em 단위는 부모 요소의 텍스트 크기를 기준으로 상대적인 크기를 가진다. 

% 단위는 사용되는 속성에 따라 기준이 달라지지만, em 단위는 오로지 텍스트 크기를 기준으로 삼는다.

아래의 예시를 보면 이해하기 쉽다.

.parent{
    font-size:16px;
}
.child{
    font-size:2em; /* 16px(부모 font-size 크기) x 2em = 32px */
}
.child-to-child{
    font-size:2em; /* 32px(부모 font-size 크기) x 2em = 64px */
}

 

 

    - rem

html 태그의 텍스트 크기에 대한 상대적인 값으로, 1rem은 html 태그의 텍스트 크기의 1배이다.

현대적인 웹 브라우저는 모두 html 태그의 텍스트 크기가 16px라서 1rem은 16px와 같다.

html{
    font-size:1rem;
}
.parent{
    font-size:1rem; /* 16px x 1rem = 16px */
}
child{
    font-size:2rem; /* 16px x 2rem = 32px */
}

 

 

    - vw

뷰포트 너비를 기준으로 상대적인 크기를 가진다. 뷰포트는 간단히 말해 코드가 보이는 대상이라고 생각하면 되는데 

웹이나 모바일에서는 웹 브라우저 창의 너비가 뷰포트 너비가 된다.

1vw는 뷰포트 너비의 1/100크기를 의미한다.

/* 기준 뷰포트 너비 900px */
.parent{
    font-size:1vw; /* 900px x 1/100 = 9px */
}
.child{
    font-size:2vw; /* 900px x 2/100 = 18px */
}

 

 

    - vh

뷰포트 높이를 기준으로 상대적인 크기를 말하며 1vh는 뷰포트 높이의 1/100 크기를 의미한다.

/* 기준 뷰포트 높이 4000px */
.parent{
    font-size:1vh; /* 400px x 1/100 = 4px */
}
.child{
    font-size:2vh; /* 400px x 2/100 = 8px */
}

 

 

5. 색상 표기법

CSS에서 색상을 표기하는 방법에 대해 정리해보았다.

 

    - 키워드 표기법

영문명을 속성값으로 사용하는 방법이다. CSS에서 사용할 수 있는 색상 키워드의 종류는 150여개 이상이다.

 

 

    - RGB 색상 표기법

RGB 색상 표기법에서 RGB는 Red, Green, Blue를 의미하는데, 빨간색, 초록색, 파란색을 이용해 특정 색을 표현하는 방법이다.

여기에 추가로 색의 투명도를 의미하는 알파(alpha) 값을 사용할 수도 있다.

 

RGB나 RGBA 형식은 RGB값을 256개 숫자(0~255)로 표기한다. 가장 낮은 색 값은 0이고, 높은 색 값은 255다.

알파값은 0.1 처럼 0과 1 사이의 소수점으로 표기하는데 앞의 정수 부분 0 은 생략할 수 있어서 .1로 표기해도 된다.

 

RGB와 RGBA 형식을 사용했을 때 색상이 어떻게 표시되는지 확인해보자

 

 

    - HEX 표기법

HEX 표기법은 앞에 #을 붙이는 것이 특징이다. 00 이 가장 낮은 값이고 ff가 가장 높은 값이어서 #ff0000은 빨간색, #00ff00은 초록색, #0000ff는 파란색을 의미한다. 그리고 R, G, B에 해당하는 16진수가 같다면 줄여서 표기할 수도 있다.

 

'CSS _HTML_JavaScript > CSS' 카테고리의 다른 글

[CSS] CSS 박스 모델을 구성하는 속성 다루기(margin 영역)  (0) 2023.07.26
[CSS] 텍스트 속성으로 텍스트 꾸미기(family, size, weight, style, variant, align, decoration, color, letter-spacing, line-height)  (0) 2023.07.25
[CSS] CSS 마무리 정리  (0) 2023.07.24
[CSS] CSS 가상 클래스 선택자 사용  (0) 2023.07.24
[CSS] CSS 가상 요소 선택자 사용(::before, ::after)  (0) 2023.07.21
'CSS _HTML_JavaScript/CSS' Related Articles more