오늘 배운 내용 정리

숨김 콘텐츠

display: none;

• 컨텐츠가 사라지면 컨텐츠가 차지하고 있던 영역도 함께 사라짐.
• 스크린리더 사용자가 내용을 들을 수 없음

clip

• 속성 사용하려면 position: absolute; 필수
• 요즘은 clip-path를 많이 사용함

• position: absolute;
  레이아웃에 영항을 주지 않게 함
• width: 1px; height: 1px;
  width, height 값을 최소한의 크기로 조절함
• margin: -1px;
  화면에 나오지 않게 함
• overflow: hidden;
  overflow된 콘텐츠를 숨김
• clip-path: polygon(0 0, 0 0, 0 0);
  클리핑 범위를 모두 0으로 지정해 요소를 숨김

관련 링크

• 화면에서 보이지 않더라도 스크린 리더가 읽을 수 있도록 하는 방법임

배경 관련 속성

• background-image
• background-repeat
• background-position
• background-attachment

background에 얘네 다 넣는 법

background: pink url(이미지 링크) no-repeat 20% 30% / 110px 83px scroll;

백그라운드 이미지 동시에 주기

background-image: url(이미지 링크),
url(이미지 링크);

먼저 선언한게 위로 올라옴

background: url(이미지 링크) no-repeat 0 0,
    url(이미지 링크) no-repeat 200px 100px,
    yellow;

선택자

• 전체 선택자

* {
  ...
 }

• 요소 선택자

body {
  ...
 }

• id 선택자

#selector {
  ...
 }

• 속성 선택자

[title] {
  ...
 }

• class 선택자

.box {
  ...
 }

• 가상 요소 선택자

.box::before {
  ...
 }

.box::after {
  ...
 }

css 애니메이션

mdn css 애니메이션
js 없이 css만으로도 애니메이션을 구현할 수 있는 기능

reflow / repaint

공부해보기!!!

---

오늘의 궁금한 점

가상 요소 선택자 더 공부하기