Skip to content

[CSS in depth] part1(1장)

Jump to bottom
JEP edited this page Aug 16, 2024 · 3 revisions

  • 나의 의견은 '-->'로 표현

  • CSS: Cascading Style Sheets

part1

  • 이 장에서는 가장 필수적인 내용을 다룹니다.
    • 캐스케이드를 구성하는 네 가지 부분
    • 캐스케이드와 상속의 차이점
    • 어떤 스타일이 어떤 요소에 적용되는지 제어하는 방법
    • 단축 선언에 대한 일반적인 오해

1. Cascade, specificity, inheritance

  • cascade: 종속 -> 폭포가 아래로 내려오는 모양

  • specificity: 명시도(구체적인 정도를 뜻함)

  • inheritance: 상속

  • css가 가진 특성

    • css는 엄밀히 말해서 프로 문법 언어는 아니다. 그래도 추상적인 사고는 필요하다.
    • 순수한 디자인 툴은 아니지만 창의력을 요구한다.
    • 간단한 선언적 구문을 제공하지만 커다란 프로젝트 안에서는 매우 복잡해질 수 있다.

  • 기존 프로그래밍에서는 뭐라고 검색해야 할지 분명하다.(예: “배열에서 x 유형의 항목을 찾으려면 어떻게 해야 하나요?”)

    • 하지만 css는 문제를 하나의 질문으로 압축하는 것이 어렵다.
    • 상황에 따라 다른 경우도 많다.(특정 제약조건, 엣지 케이스를 얼마나 대처할 지에 따라 정답이 달라짐)
    • => 그럴수록 꼼수나 임시적 대처법 보다는 css의 원리를 알아야 한다.

  • 기본기부터 시작하자.

C in CSS : Cascade

이미지 설명

  • CSS는 규칙을 정하는 것이다.

  • 어떤 조건에서 element에게 어떤 효과를 주길 원한다. 그럴때 class를 사용하여 스타일을 부여하고, 그것은 해당 요소의 자식에게도 적용된다.

  • --> 예를 들면 버튼클릭: 클릭된 상태의 버튼 스타일, 클릭 되지 않은 버튼의 스타일을 class로 조정할 수 있다.

  • 브라우저는 이 규칙들을 받아서 화면에 그리는데 사용한다.

  • 같은 스타일을 적용하는데 여러 방법의 css를 사용할 수 있다.

    • => 솔루션에 따라 다른 페이지에 적용하거나, HTML 구조가 바뀔 때 다른 결과를 얻을 수 있다.
    • => css 개발의 핵심은 "예측 가능한 방식으로" 규칙을 만드는 것이다.

  • -> 여러가지 방식으로 구현할 수 있다는 것은, 단순히 작동 되는 것보다 어떤 방식으로 작성했느냐가 중요하다는 뜻이다.

예측가능한 방식으로 규칙을 만들기

  • 그 첫번째 스텝은 브라우저가 나의 규칙들을 어떻게 사용하는지 이해하는 것이다.

  • 각 규칙이 충돌할때 요소를 어떻게 스타일링 할까?

  • => 어떤 규칙이 예상대로 동작하지 않는 경우가 있다.

  • 규칙의 동작을 예상하려면 cascade에 대해 알아야 한다.

  • stylesheet origin: 스타일이 어디서 왔는지, 스타일은 브라우저의 기본 스타일과 함께 적용됨

  • selector specificity: 선택자의 우선 순위(명시도)

  • source order: 코드의 순서

Screen Shot 2023-01-07 at 5 23 37 PM
  • 용어정리
    • property(속성): value(값) = 선언
    • 선언 블럭(Declaration Block): 중괄호(컬리 브레이스)로 감싼 여러 선언의 집합
    • 선언 블럭은 선택자(selector)와 함께 사용됨
    • 선택자 + 선언 블럭 = ruleset/ rule
// ruleset
selector {
    property1: value1; // declaration
    property2: value2;
    property3: value3;
}
// ruleset with id
#header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}
// ruleset with class
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

1.1.1 stylesheet origin

  • 우리가 만드는 css stylesheet은 author styles라고 부른다.

  • 브라우저의 디폴트 스타일은 user agent styles => 우선순위가 낮기 때문에 덮어쓸 수 있는 것

    • 브라우저 마다 다르다.
    • 보편적으로 비슷한 것을 한다.

  • 예외사항: !important annotations 가 적용된 선언

  • 따라서 순서는 이렇게 된다. 1 Author important
    2 User important 2 Author 3 User (책에는 없는데 추가한 내용, 브라우저에서 사용자가 설정한 스타일) 4 User agent

  • User important가 되는 사례: 브라우저에 직접 스타일 시트를 등록한거나 개발자 도구로 important를 부여했을때

1.1.2 specificity를 이해하기

  • 거의 모든 CSS는 같은 origin을 가지게 됨 => "author"

  • 그러므로 origin만으로는 우선순위 선별 x => 두번째로 작용하는 것이 specificity이다.

  • 브라우저가 css를 이해하는 방식: 두가지 방법

  1. 인라인

  2. 한정자(selector)

  3. 인라인

  • 인라인 > selector
  • 인라인 < selector + 'important' mark
  • 인라인 + 'important' => ? => 이 경우에는 어떤 것도 오버라이딩 할 수 없다.
  1. 한정자

  • 한정자 별 우선순위가 있음

    • ID 한정자 > class 한정자 > tag 한정자(type selector)

  • selector의 경우 한정자가 여러개 중첩되면 우선순위가 올라간다.

    • div < div p
    • 그러나 selector 자체의 우선순위가 낮은 쪽의 개수가 많아도 우선순위가 뒤집히지는 않는다.(ID한정자 > class한정자)
      • #something > .class1 .class2 .class3

  • 정리(어디가 이기나요?)

    • ID 한정자가 더 많은 쪽
    • 동점이라면, class가 많은 쪽
    • 동점이라면, tag 한정자가 더 많은 쪽

  • 결국 어떤 것이 더 정교하게 대상을 타겟팅 하는가? 의 기준으로 보면 된다.

  • 다르게 말하면 정교할수록(인라인 + important 혹은 ID 셀렉터) 나중에 오버라이딩이 힘들다는 것을 알고 써야 한다.

  • specificity 나타내기

    • ids number, classes number, tags number
    • 2,1,1 > 1,2,2 (앞에 있는 것의 비중이 높기 때문에 이렇게 됨)
    • 인라인 스타일을 포함하는 경우도 있음(0,2,1,1) => 인라인 스타일의 우선도가 가장 높으므로 맨 앞 위치

  • specificity 때문에 적용되지 않는 스타일의 수정

    • [bad]

    • !important mark 사용하기 => 쉽지만 나태한 fix => 지금은 문제가 안되지만 미래의 누군가가 알아내기에 어려움을 준다

    • !important를 사용하기 시작하면 연쇄적인 사용을 불러일으킨다 => 남용주의

    • 결국 다 뜯어고쳐야 하는 상황이 될 수 있음

    • [better]

    • specificity 자체를 우선적으로 적용되도록 수정 => id를 이기려면 id를 사용, 개수를 늘리는 등 적용하고자 하는 스타일의 specificity 중요도를 높인다

    • [best]

    • 원인이 되는 스타일의 specificity를 낮출 수 있다면 낮춘다 => 당위없이 id로 되어있다면 class로 낮추는 등

    • 다른 코드에 영향이 가는지 확인 필요

  • specificity는 팔씨름같아서, 높이는 방향으로만 코드를 수정하면 미래의 옵션을 점점 제거하는 방향으로 작성하는 꼴이 되어 주의 필요

1.1.3 소스 순서

  • 코드 순서도 의미가 있다.
  • 뒤에 오는 코드가 앞의 코드를 덮어쓴다.

같은 결과에 이르는 많은 방법이 있다.

  1. 올바른 결과를 정의하기
  2. 한정자를 구성할 수 있는 방법들을 생각하고, 그 중에 필요에 맞아 떨어지는 best way를 고른다.

스터디 내용

  • 축약표현은 표시하지 않은 내용을 초기값으로 설정한다.

  • background-position: padding이 두가지 value를 '상하' '좌우' 차례로 적용하는 것과 반대로 이 속성은 '좌우' '상하'로 적용한다.(주의)

    • --> 이런 경우를 모두 기억할 수는 없지만 이런 경우가 있다는 걸 알고 있는 것이 도움이 될 것 같다.

  • 상속되는 속성(대표적: text에 적용되는 속성들)과 상속되지 않는 속성(대표적: border)이 있다.

    • inherit은 상속되지 않는 속성을 상속되게 하고 싶을 때 사용한다

  • 상속된 속성을 사용하고 싶지 않을 때 initial을 사용한다. 이때의 초기값은 브라우저가 결정한 값이다(브라우저마다 초기값이 다르다.)

  • --> unset은 언제 사용?

    • 해당 속성에 대한 상속 정보가 있다면 해당 값이 적용되고, 상속 정보가 없다면 initial value가 채택된다.

  • 기타

    • 개인적인 경험으로 React로 개발할때 이런 충돌을 겪는 것은 UI라이브러리 쓸때(Chakra ui같은)
    • 그런 문제를 잘 해결하려면 css 기초를 아는 것은 중요하다.

Clone this wiki locally