[멋쟁이 사자처럼 프론트엔드 스쿨] 12일차 TIL - 숨기기, 배경 관련 속성, 선택자, animation, z-index

🍰 CSS 진도. 천천히 나가 주세요...

🍴 숨김 콘텐츠 - overflow, clip-path

: 숨겨 놓지만 스크린 리더와 같은 보조 기기에서는 접근 가능(a11y-hidden같은 class명 추천)

• display: none은 존재하지 않는 것. DOM 트리 상에도 존재하지 않아서 스크린 리더도 읽지 못함.
• 그럼 언제 사용? => 영구적인 none 이 아닐 때. 특정 조건이 활성화 됐을 때 읽을 수 있는 상태로 만들 때.

overflow - 요소의 콘텐츠가 너무 커서 블록 서식 맥락(BFC)에 맞출 수 없을 때의 처리법 지정

• overflow 속성이 효력 가지려면 block level container의 height 설정하거나 white-space를 nowrap으로 설정
• visible(기본값)
• hidden: 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냄. 스크롤바 제공 X. 코드 사용한 스크롤 가능.
• clip: 콘텐츠를 안쪽 여백 상자에 맞춰 자름. 어떤 스크롤도 불가능. 새로운 BFC 생성 X. 서식 문맥 필요하면 display: flow-root 사용.
• scroll: 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냄. 콘텐츠 잘라냈는지 여부 상관없이 항상 스크롤바 노출.
• auto: user agent가 결정. 콘텐츠가 안쪽 여백 상자에 들어가면 visible과 동일하게 보임. 새로운 BFC 생성. 콘텐츠가 넘칠 때 스크롤바 노출.

clip-path() - 요소의 클리핑(잘라내거나 보여주는 것) 범위 지정. 범위 안의 부분은 보이고, 바깥은 숨김.

• circle() - 원
• ellipse()
• polygon() - 다각형
• rect() - 사각형
• 등등…

🍴 배경 관련 속성

background-image

• 요소의 배경 이미지를 한 개나 여러 개 지정
• 여러 개 지정 시 맨 처음 지정한 이미지가 제일 위에 위치(사용자에게 가까운)
• 테두리는 배경 이미지 위에, background-color는 밑에 그려짐

background-repeat

• 배경 이미지의 반복 방법 지정
• repeat-x - 이미지가 가로 방향으로만 반복
• repeat - 요소의 배경 영역 채울 때까지 반복. 넘칠 경우 잘라냄.
• space - 요소가 잘리지 않을 만큼 이미지 반복.
• round - 가용 영역이 늘어나면 반복 이미지도 늘어나 여백을 남기지 않음. 이미지 하나를 더 추가할 공간 생기면 반복 횟수 하나 추가함.
• no-repeat - 이미지 반복 안 함.

background-position - ****배경 이미지의 초기 위치 설정

• x축, y축 → 왼쪽 위 기준으로 배치됨. 이미지 기준점도 왼쪽 상단.
• % 단위 → 이미지 위치도 체크함. 해당 지점에 꼭짓점 만들고 배경과 매칭함. 상자의 20%와 이미지의 20%가 달라서 헷갈림.

background-size - 요소의 배경 이미지 크기 설정

• 크기 조정 → but 원본 이미지보다 키우면 해상도가 낮아질 수 있음
• cover: 상자 만큼으로 잡아 늘려짐. 너비와 높이가 모두 컨테이너를 완전히 덮음.
• contain: 세로 크기만큼 맞춰짐.(세로로 긴 이미지일 경우)
• auto: 고유한 비율 유지되도록 해당 방향으로 배경 이미지 크기 조정.

background-attachment - 이미지를 뷰포트 내에서 고정할 지, 자신의 컨테이닝 블록과 함께 스크롤 할 지 지정.

• scroll(기본값): 배경을 요소 자체에 대해 고정. 요소에 스크롤 존재해도 배경은 스크롤 되지 않음. 콘텐츠와 함께 이동.
• fixed: 상자 안에 배경이 고정되는 형태. text만 스크롤됨. 배경을 뷰포트에 대해 고정. 요소에 스크롤 존재해도 배경은 스크롤되지 않음.
• local: 배경을 요소 콘텐츠에 대해 고정. 요소에 스크롤 존재하면 배경도 같이 스크롤됨.
• multi background - 한 번에 여러 배경 사용하기

단축 표기법

background: url(image/1) no-repeat 0 0, 
		 yellow url(image/2) no-repeat 200px 100px;

• 배경색은 한 번밖에 사용 못 함. 배경 이미지 밑에 깔림. 절대 이미지 위에 올라올 수 없음.
• 마지막 이미지에 한 번 줬을 경우 결과가 제대로 나옴
• 두 이미지 모두에 색상 줬을 경우 안 나옴

🍴 선택자(selector)

• 전체 선택자: *{}
• 요소 선택자: body{}
• class 선택자: .container{}
• id 선택자: #container{}
• 속성 선택자: [title]{} title 속성 있는 요소만 선택됨
• 가상 요소 선택자(pseudo element selector)
• ::after - 마지막 자식 요소
• ::before - 첫 번째 자식 요소(마크업 상에는 존재하지 않음)

linear-gradient()

• 두 개 이상의 색상이 직선 따라 점진적으로 변화되는 선형 그라데이션 그림 생성
• left, right - 수평선
• top, bottom(기본값) - 수직선

🍴 animation

@keyframes - 애니메이션의 시작과 끝 정의

애니메이션 설계 - 시나리오 작업

1. 제목: 임시 제목 ⇒ 애니메이션 제목 moveEffect
2. 어떤 내용 ⇒ 주고 싶은 효과 -글자 크기 변화(font-size) -상자 이동 효과(position/margin/translate/padding) 이동한 것 같은 효과를 줌.

위 두 개 필수

• from - 시작 오프셋 0%
• to - 마지막 오프셋 100%
• % - 전체 애니메이션 시간 중 명시된 keyframe이 발생해야 하는 시점의 %
  • 꼭 순서대로 나열 안 해도 %의 순서대로 처리됨

중복 처리

• 한 개의 이름에 대해 여러개의 keyframe 셋이 존재 ⇒ 마지막으로 마주치는 keyframe 셋만 유효.
• @keyframes 룰은 cascade 되지 않아서 한 개 이상의 룰 셋을 적용X
• 동일한 % 값 가진 여러 @keyframes 규칙들은 cascade 됨

🍴 z-index

• 위치 지정 요소와 그 자손 or 하위 flex item의 z축 순서 지정.
• 위치 지정 요소(position: static 이외인 요소)의 박스에 대해 다음 항목 지정.
  1. 현재 쌓임 맥락에서 자신의 위치
  2. 자신만의 쌓임 맥락 생성 여부
• auto - 박스가 새로운 쌓임 맥락 생성 X. 현재 쌓임 맥락의 위치는 부모 요소와 동일.
• <integer> - 현재 쌓임 맥락에서의 위치로 이 값 사용

z-index는 노멀 플로우를 벗어나서 떠 있는 객체에 적용.

🍴 transform

• 요소에 회전, 크기 조절, 기울이기, 이동 효과 부여 가능
• 차례로 적용되는 transform-function을 하나 이상 허용

animation 단축 표기법

• animation-timing-function: 애니메이션 진행 속도, 가속 방식 지정.
• transition timing function
  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(p1, p2, p3, 4)
  • steps(n, <jumpterm>)

 

• animation-play-state: 애니메이션 초기 실행 상태 결정. 애니메이션 중지, 재생 ⇒ 어디에 사용? 나중에 JS로 컨트롤 하고 싶을 때. play, pause 버튼 같은 것. 이 값 바꿔치기 하면 됨.
• animation-direction: 애니메이션 재생 방향
  • normal
  • reverse
  • alternate
  • alternate-reverse

animation: animation-name과 animation-duration만 순서 지키고 나머지는 상관 없음.

reflow

• 브라우저가 웹 페이지의 위치와 기하학적 구조를 다시 계산할 때 발생
• 브라우저에서 사용자를 차단하는 작업 ⇒ 플로우 시간 향상 방법 이해하기
• reflow 최소화하기
  1. 불필요한 DOM 심도 줄이기
  2. CSS 규칙 최소화, 사용되지 않는 CSS 규칙 삭제하기
  3. 애니메이션 같은 복잡한 렌더링 변경 필요한 경우 흐름 밖에서 변경하기.
  4. 불필요하고 복잡한 CSS 선택자(특히 하위 요소 선택자) 피하기 → 선택자 일치시키기 위해 더 높은 CPU 처리량 필요함

repaint

• 대화형 사이트의 업데이트 같이 UI 변경으로 인한 시각적 업데이트 표시하기 위해 브라우저가 웹 페이지 다시 그릴 때 발생
• 일반적으로 리플로우 후에 발생

<참고하면 좋은 사이트>

https://bennettfeely.com/clippy/, https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion, https://www.the-art-of-web.com/css/timing-function/