[CSS] 정리

wonyu·2022년 5월 7일
CSS
0

앞서 적은 글과 마찬가지로 CSS도 헷갈리는 부분들 위주로 정리했다.

CSS

Cascading Style Sheets

선택자

  • 속성 선택자

    • 대괄호를 이용해서 선언하며, 대괄호 안에 속성 이름이 들어감

      /* p 태그이면서 class 속성이 있다면 */
p[class] {
	color: silver;
}

/* p 태그이면서 class, id 속성이 있다면 */
p[class][id] {
	color: silver;
}

/* p 태그이면서 class 속성 값이 foo라면 */
p[class="foo"] {
	color: silver;
}

/* p 태그이면서 class 속성 값에 공백으로 구분한 "color" 단어가 포함된다면 */
p[class~="color"] {
font-style: italic;
}

/* p 태그이면서 class 속성 값이 "color"로 시작한다면 */
p[class^="color"] {
		font-style: italic;
}

/* p 태그이면서 class 속성 값이 "color"로 끝난다면 */
p[class$="color"] {
	font-style: italic;
}

/* p 태그이면서 class 속성 값에 "color"가 포함된다면 (클래스가 "colorful" 이어도 해당) */
p[class*="color"] {
	font-style: italic;
}

가상 선택자

  • 가상 클래스
  • 가상 요소
    • CSS3부터는 가상 클래스와 구분하기 위해 가상 요소에 :: 기호 사용
      • 하지만 하위 브라우저에서 :: 문법을 지원하지 않을 수 있으므로 상황에 따라 : 사용

구체성

  • 선택자에서 어떤 규칙이 우선으로 적용되어야 하는지에 대한 규칙
  • 구체성 계산
    0, 0, 0, 0

/* 모든 구체성을 무시하고 적용 : !important */
/* 1, 0, 0, 0 : 인라인 스타일 */
/* 0, 1, 0, 0 : id 속성값 */
/* 0, 0, 1, 0 : class 속성값, 기타 속성, 가상 클래스 */
/* 0, 0, 0, 1 : 요소, 가상 요소 */

/* 전체 선택자(*)는 0, 0, 0, 0 */
/* 조합자(>, + 등)는 구체성에 영향을 주지 않음 */

상속

  • margin, padding, background, border 등 박스 모델 속성은 상속되지 않음
  • 상속된 속성은 구체성을 갖지 못함

Cascading

  • cascading 규칙
    1. 중요도(!important)와 출처
      • 출처: 제작자, 사용자, 사용자 에이전트(브라우저 내장 css)로 구분
    2. 구체성
    3. 선언 순서
  • 모든 스타일은 아래 규칙에 따라 단계적으로 적용됨
    1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류
      1. 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선한다.
      2. 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받는다.
    2. 스타일 규칙들을 출처에 따라 분류
      1. 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선한다.
    3. 스타일 규칙들을 구체성에 따라 분류
      1. 구체성이 높은 규칙들이 우선한다.
    4. 스타일 규칙들을 선언 순서에 따라 분류
      1. 뒤에 선언된 규칙일수록 우선한다.

Margin

  • padding과 달리 음수값 지정 가능, auto 값 적용 가능
    • margin, padding 모두 % 단위 적용 시 요소의 width를 기준으로 값 결정
  • margin collapse
    • 인접한 2개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것
    • 절대 위치, 상대 위치가 주어진 요소에서는 발생하지 않음

z-index

  • position이 static이 아닌 경우 지정 가능

미디어 쿼리

  • 선언 방법
    @media mediaqueries {
	/* style rules */
}
  • 미디어 타입
    • all, braille, embossed, handheld, print, projection, screen, speech, tty, tv → all, print, screen 정도가 자주 쓰임, screen이 가장 많이 쓰임
    • all : 모든 미디어에 적용
    • print : 인쇄된 디스플레이를 재현하기 위한 프린터 및 장치에 적용
    • screen : 화면을 출력하는 디스플레이가 있는 미디어에 적용
  • 미디어 특성
    • width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid → width, orientation 정도가 자주 쓰임
    • width : 뷰포트의 너비
    • orientation: 세로모드(portrait), 가로모드(landscape) 구분

profile
wonyu
이전 포스트

[HTML] 정리

다음 포스트

[web] 브라우저 렌더링 과정

0개의 댓글