[CSS] CSS 특징 - 적용 우선순위/ 상속/ 단위/ 색상 표기법

CSS 특징

 

1. 적용 우선순위
2. 상속
3. 단위
4. 색상 표기법

 

 

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

 
 
기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우선 적용된다.

☑️ 하나의 태그를 여러 선택자로 지정하고 있다면 어떤 스타일이 적용될까? 코드를 실행하면 마지막에 작성한 값이 적용된다.
 
이유는 바로 CSS가 Cascading Style Sheets, 즉 단계적으로 적용되는 스타일을 뜻하는 언어이기 떄문이다. 여기서 말하는 단계적 적용은 같은 태그에 여러 스타일이 적용되더라도 단계적으로 적용되어 결국 마지막에 영향을 주는 하나의 스타일만 적용된다는 뜻이다. 이때 어떤 스타일이 마지막에 영향을 주는지는 CSS의 개별성 규칙에 따라 결정된다.
 
 

[개별성 규칙이 높은 순서]
 

1. 인라인 스타일
2. 아이디 선택자
3. 가상 클래스 선택자
4. 클래스 선택자
5. 가상 요소 선택자
6. 태그 선택자
7. 전체 선택자

 

---

2. 상속

 
 
상속은 부모 요소에 적용된 스타일을 자식 요소가 그대로 물려받아 적용되는 현상을 말한다. 예를 들면 p 태그에는 color 속성이 없지만, p 태그의 부모인 div 태그는 color 속성이 있다. 이럴 때 자식인 p 태그는 부모인 div 태그의 스타일을 그대로 물려받는다.
 
 

---

3. 단위

 

• 절대 단위 : px
• 상대 단위 : %, em, rem, vw, vh

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

 

 

절대 단위

 
px(pixel) 한 가지로, 모니터의 화면을 구성하는 사각형 1개의 크기를 의미한다. CSS에서 사용할 수 있는 크기 단위 중 가장 기본이다. 웹 브라우저에서 다른 단위로 값을 지정하더라도 결국 px 단위로 환산되어 계산된다.
 
 

상대 단위

 

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

 

---

 

☑️ % ?

부모 요소의 속성값에 따라 상대적인 크기를 가진다. 그래서 어떤 속성을 사용했는지에 따라 기준이 다르게 잡힌다. 만약 font-size 속성값의  80%라고 지정했다면 자식 요소는 부모 요소 font-size 속성값의 80%에 해당하는 크기로 설정된다.

 
ex) 부모 폰트 사이즈 16px이고 80%로 지정했다면 16px * 0.8 = 12.8px
 

 

☑️ em ? ⭐

부모 요소의 텍스트 크기(font-size)를 기준으로 상대적인 크기를 가진다. % 단위는 사용되는 속성에 따라 기준이 달라지지만, em 단위는 오로지 텍스트 크기를 기준으로 삼는다. 만약 값을 2em으로 지정했다면 자식 요소의 크기는 부모 요소의 font-size 속성값의 2배가 된다. (나를 감싸고 있는 것을 기준으로 내가 상대적으로 변하는 것!)

 
ex) 부모 폰트 사이즈가 16px인데 2em으로 지정했으면 16px * 2em = 32px
 

 

☑️ rem ?

html 태그의 텍스트 크기에 대한 상대적인 값으로, 1rem은 html 태그의 텍스트 크기의 1배이다. 현대적인 웹 브라우저는 모두 html 태그의 텍스트 크기가 16px이라서 1rem은 16px과 같다.

 
ex) html 텍스트 크기 1rem인데 2rem으로 지정했으면 16px * 2rem = 16px
 

 

☑️ vw ?

뷰포트 너비 기준으로 상대적인 크기를 가진다. 뷰포트는 간단하게 말해 코드가 보이는 대상이라고 생각하면 된다. 따라서 웹이나 모바일에서는 웹 브라우저 창의 너비가 뷰포트 너비가 된다. 1vw는 뷰포트 너비의 1/100 크기를 의미한다.

 
ex)  기준 뷰포트 너비가 900px인데 2vw라면 900px * 2/100 = 18px
 

 

☑️ vh ?

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

 
ex) 기준 뷰포트 높이 400px인데 2vh라면 400 * 2/100 = 8px
 
 

---

4. 색상 표기법

Color는 각각의 배경, 텍스트, 메뉴, 버튼 등의 요소 색상을 설정한다.
 

• 키워드 표기법 (color name)
• RGB 표기법 (rgb and rgba)
• HEX 표기법

 

---

키워드 표기법

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

• background-color: green

 

---

RGB 표기법

 
RGB는 Red, Green, Blue를 의미하는데, 빨간색, 초록색, 파란색을 이용해 특정 색을 표현하는 방법이다. 여기에 추가로 색의 투명도를 의미하는 알파값을 사용할 수도 있다.
 
 

• rgb(red, green, blue)
• rgba(red, green, blue, alpha)
• background-color: rgb(0, 63, 225)
• background-color: rgb(255, 154, 0)
• background-color: rgba(0, 63, 225, 0.5)
  👉🏻 a(alpha)는 opacity, 즉 투명도

 
 
RGB 값을 256개 숫자(0~255)로 표기한다. 가장 낮은 색 값은 0이고, 높은 색 값은 255이다. 그리고 알파 값은 0.1처럼 0부터 1사이의 소수점으로 표기한다, 이때 앞의 정수 부분 0은 생략할 수 있어서 .1로 표기해도 된다.
 
 

---

HEX 표기법

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

 

• #RRGGBB
• background-color: #000000
• background-color: #FF9A00
• background-color: #34568B