[CSS] 구조 및 특징 이해

 

 

 

 

 

 

CSS란?

 

Cascading Style Sheets의 약자로, 웹 페이지의 레이아웃이나 스타일을 정의하는 언어이다. HTML로 작성된 웹 페이지의 내용과 구조를 꾸며주는 역할을 하며 텍스트 색상, 크기, 폰트, 여백, 패딩, 테두리 등을 지정할 수 있다.

 

---

 

구조

선택자 {
  속성: 값;
  속성: 값;
  ...;
}

CSS 규칙은 선택자와 중괄호 {} 사이 속성 집합으로 구성된다.

 

 

1. 선택자(Selector)

 

스타일(CSS)을 적용할 대상으로 특정 요소나 요소 그룹을 선택하는 데 사용한다.

 

• 타입 선택자(Type Selectors) : 요소 이름 기반으로 선택한다(h1, p, div).
• 클래스 선택자(Class selectors) : 요소 class 속성 기반으로 선택한다(.클래스값).
• ID 선택자(ID selectors) : 요소의 id 속성 기반으로 선택한다(#아이디값).
• 속성 선택자(Attribute Selectors) : 특정 속성을 가진 요소를 선택한다([type="text"]).
• 하위 선택자(Descendant Selectors) : 특정 요소의 하위 요소를 선택한다(div p : 모든 div태그 내 p요소 선택).
• 자식 선택자(Child Selectors) : 특정 요소의 직접적인 자식을 선택한다(ul > li).
• 가상 클래스 선택자(Pseudo-class Selectors) : 요소의 특정 상태를 기반으로 선택한다(a: hover, :firsh-child).
• 가상 요소 선택자(Pseudo-element Selectors) : 요소의 특정 부분을 선택한다(::before, ::after)

 

2. 속성(Property) & 값(Value)

 

선택된 요소의 스타일을 지정하는 데 사용되는 이름-값 쌍이다. 각 속성은 스타일 특성을 지정하는 데 사용되며, 각 속성에는 허용된 값의 범위나 형식이 있다.

div {
  color: red; /* 속성 : color, 값 : red */
  font-size: 16px; /* 속성 : font-size, 값 : 16px */
}

 

---

 

특징

 

계층적 적용

 

스타일 규칙은 나중에 나오는 스타일이 이전에 정의된 스타일을 덮어쓴다. 여러 스타일 규칙이 겹치는 경우 특정한 규칙이 적용되는 순서가 있다.

 

1. 중요도

div {
  color: red !important;
}

• 스타일에 !important가 붙으면 충돌 나는 다른 스타일보다 높은 우선순위를 갖게 된다.
• 두 규칙이 !important를 포함한다면, 특정성 및 순서로 우선순위를 결정한다.
• 남용하면 코드 관리(가독성, 유지보수) 및 예측이 어려워져 주의해서 사용해야 한다.

 

 

2. 특정성

 

특정성은 해당 선택자가 얼마나 구체적인지 결정한다. 특정성은 아래와 같은 순서대로 계산된다.

1. ID 선택자 수
2. Class, Pseudo-class, 속성 선택자 수
3. 태그명 선택자와 Pseudo-element 수

/* 태그 선택자 - 특정성 1 */
div {
  color: red;
}

/* class 선택자 - 특정성 2 */
.myClass {
  color: blue;
}

/* id 선택자 - 특정성 3 */
#myId {
  color: green;
}

/* id 선택자 + 클래스 선택자 + 태그 선택자 - 특정성 6 */
div#myId.myClass {
  color: yellow;
}

위 CSS가 동일한 요소에 적용되는 경우, 가장 높은 특정성을 갖는 div#myId.myClass 스타일이 적용되어 텍스트 색상이 yellow로 적용된다.

 

 

3. 상속

 

일부 CSS 속성은 부모 요소로부터 자식 요소로 상속된다.

• 상속 가능 : font-family, color, text-align 등 텍스트 관련 속성
• 상속 불가 : padding, margin, border 등 박스 모델 속성

 

일부 CSS 속성은 기본적으로 상속된다. 자식 요소에 대해 직접적인 스타일 규칙이 지정되지 않았다면, 부모 요소의 스타일이 상속된다. 특정 키워드를 사용하여 강제로 상속 또한 가능하다. inherit 사용을 통해서 특정 속성을 강제 상속할 수 있다.

/* 부모 요소 */
div {
  color: blue;
  border: 1px solid black;
}

/* 자식 요소 */
div p {
  /* 부모 요소의 color: blue를 상속받음 */
  border: inherit; /* 부모 요소 border 스타일 강제 상속 */
}

위처럼 border는 상속이 불가능한 속성이지만, 자식 요소에서 border: inherit을 지정하면 부모 요소의 border을 상속받는다.

 

상속될 때 주의할 점은 지정된 값이 아니라 계산된 값이 상속된다. 만약 부모 요소에서 font-size: 2em이 지정되어 있고, 부모 폰트 크기가 16px라면 자식요소는 32px값을 상속받는다.