🎨CSS | @at-rule, 선택자, 길이(크기) 단위, 속성 상속

CSS 수업 내용 중 처음 보는 내용, 익숙하지 않은 내용 정리

---

@at-rule

• @가 붙는 문법, 문서 최상단에 위치
  @charset : 스타일시트에서 사용하는 문자 인코딩 지정, 문서에서 가장 먼저 선언
  @import : 다른 스타일시트에서 스타일 규칙 가져옴 @charset 바로 다음에 선언되어야 함
  @font-face : 디바이스에 없는 폰트를 다운받아 적용할 때 사용
  @keyframes : 애니메이션을 만들 때 사용
  @media : 사용자 디바이스에 따른 스타일을 분기 처리하고자 할 때 사용

---

선택자

특성 선택자[ ] : 주어진 특성을 가진 모든 요소 선택

• 'attr' 속성이 포함된 요소 E 선택

E[attr] { }

• 'attr' 속성의 값이 정확하게 'val'과 일치하는 요소 E 선택

E[attr="val"] { }

예시
<input> 태그 중 type이 'button'인 요소 선택

input[type="button"] { }

모든 태그 중 클래스명이 'example'인 요소 선택

[class="example"] { }

• 'attr' 속성의 값이 'val'로 시작하는 요소 선택

E[attr^="val"] { }

• 'attr' 속성의 값이 'val'로 끝나는 요소 선택

E[attr$="val"] { }

• 'attr' 속성의 값에 'val'이 포함되는 요소 선택

E[attr*="val"] { }

복합 선택자

• 자손 선택자 ( ) : 공백 통해 구분, 상속관계에 있는 모든 요소 선택 가능

/* <div> 안에 있는 <p> 전체 선택 */
div p { }

• 자식 선택자 (>) : 바로 밑의 자식만 선택 가능

/* <div> 바로 밑에 있는 <p> 전체 선택 */
div > p { }

• 일반 형제 선택자 (~) : 뒤에 있는 형제 태그(같은 들여쓰기) 전체 선택

/* <h1> 뒤에 나오는 형제인 <p> 전체 선택 */
h1 ~ p { }

• 인접 형제 선택자 (+) : 바로 뒤에 있는 형제 태그만 선택

/* <h1> 바로 뒤의 형제인 <p> 한 개 선택 */
h1 + p { }

---

길이 단위

• 절대길이 단위
  px : 디바이스 화면에서 이미지를 표현하는 가장 작은 단위, 고정된 값

• 상대길이 단위
  % : 부모 요소 기준, 백분율 단위
  *cf) body의 height은 컨텐츠 크기, margin 존재
  vw, vh : 뷰포트(화면) 넓이, 높이 기준, 백분율 단위
  vmin, vmax : 화면의 넓이와 높이 중 작은값, 큰값 기준, 백분율 단위
  em : 부모요소의 글자크기 기준, 배수 단위
  rem : 최상위 요소 의 글자크기 기준, 배수 단위

  em, rem 관련 세부 정리
  https://velog.io/@wswy17/CSS-%EA%B8%B8%EC%9D%B4-%EB%8B%A8%EC%9C%84-em-rem

---

상속

• inherit : 선택한 요소에 적용된 속성 값 부모와 동일

  .parent {
  	display: block;
  }
  .child {
  	display: inherit;
  }

• currentColor : 부모에 color 값이 있다면 상속으로 처리

  div { color: green; }
  p { border: 1px solid currentColor; }