[추가 정리] 계산기 목업 만들면서 배운 CSS 속성들

📌position:

static : 요소를 일반적인 문서의 흐름에 따라 배치
relative : 요소를 일반적인 문서의 흐름에 따라 배치하고
자기 자신을 중심으로 top, right, bottom, left 값에 따라 배치
absolute : 요소가 일반적인 문서의 흐름에서 제거하고
조상 요소에 대해 상대적으로 top, right, bottom, left 값에 따라 배치
,단 조상요소 중 위치 배치 요소가 없다면 초기 컨테이너 블록이 기준
sticky :요소를 일반적인 문서의 흐름에 따라 배치하고
조상 요소에 대해 상대적으로 top, right, bottom, left 값에 따라 배치
가장 가까운 조상 요소에 대해 끈끈한 움직임을 보임
그 조상 요소는 스크롤이 불가, 스크롤 가능한 조상 요소일 경우는 끈끈한 움직임이 없음
fixed :

📌css 상속 제어

inherit : 조상 요소의 속성값을 상속
initial : 기본 브라우저 값을 가져옴
unset : 조상 요소의 속성값이 있을 땐 상속하고, 그렇지 않을 땐 기본 브라우저 값을 가져온다.

all : unset 을 사용하여 모든 속성 값을 초기화 할 수 있다.

📌css 우선순위

: 더 상세한 것이 더 높은 우선순위를 가진다

• Hundreds: ID 선택자
• Tens: class 선택자, 속성 선택자, pseudo-class(의사 클래스)
• Ones:요소 선택자, 전체 선택자 내에 포함된 pseudo-element(의사 요소)

mdn 우선순위 이해게임

📌 z-index

쌓임맥락 : 기본적으로 부모, 자식 요소의 관계에 따라 결정됨.
z-index값을 바꾸어 쌓임맥락을 바꿀 수 있음.

z-index의 값이 클 수록 맨 앞에 옴

.Dashed {
	z-index: 3;
		}

.green {
 	z-index: 2;
		}
.gold {
	z-index: 1;
	  }

📌css 애니메이션

@keyframe 규칙을 따름
animation 하위 속성

속성설명속성 값

animation-name	애니메이션의 이름을 설정
animation-duration	애니메이션이 1회를 도는 시간	0, 3s, 1.5s, 300ms 기본 값 0은 애니메이션 재생되지 않음 s(초), ms(밀리초) 단위 사용
animation-timing-function	애니메이션 진행 속도, 가속 방식	linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int,start:end), cubic-bezier(n,n,n,n)
animation-delay	애니메이션 시작 지연 시간	0, 3s, 1.5s
animation-direction	애니메이션 재생 방향	normal: 정방향 재생 reverse: 역방향 재생 alternate: 정방향과 역방향으로 한 번씩 번갈아 재생(정 방향 시작) alternate-reverse: 역방향과 정방향으로 한 번씩 번갈아 재생(역방향 시작)
animation-iteration-count	애니메이션 반복 횟수	양수: 정수로 횟수 표기. 횟수만큼 애니메이션 반복 실행 후 정지. infinite: 무한 반복.
animation-fill-mode	애니메이션 시작 전, 종료 후 적용될 css 스타일 지정	none: 기본 값. 애니메이션 중이 아닌 경우, 요소의 CSS 스타일을 유지함. forwards: 애니메이션 중이 아닌 경우, 애니메이션 마지막 키프레임의 CSS 스타일을 유지 함. backwards: 애니메이션 중이 아닌 경우, 첫 번째 애니메이션 키프레임의 CSS 스타일을 유지 함.(지연 시간 포함) both: 애니메이션 시작 전에는 첫 번째 애니메이션 키프레임을 유지하며, 종료 후에는 마지막 키프레임 애니메이션의 CSS 스타일을 유지함. "none" 과는 다름."none" 과 "backwards" 속성 값은 애니메이션 중이 아닌 경우 다른 화면을 표시할 수 있으므로 주의해야 함.
animation-play-state	애니메이션의 초기 실행 상태를 결정.웹페이지 로딩 후 애니메이션을 자동 실행할지 여부를 선택할 수 있음.	paused: 애니메이션이 일시 중지된 상태 유지 running: 애니메이션이 재생중인 상태.

출처 : css 애니메이션 속성 이해하기

📌root

: css에서 root는 가상 클래스 선택자이다.
root는 html 최상위 요소로 css 우선순위에서 html은 1점인 반면 root는 10점이다.

root로 변수 선언하기

:root {
	-- red : #ff0000;
      }
      
div {
	background-color : var(--red);
    }

root에서 선언한 변수는 다른 선택자에서도 사용 가능하다.

📌아이콘 삽입

font awesome : 아이콘 삽입 사이트

---

계산기 목업을 만든 후, 발표에서 정말 다양한 css 속성을 배울 수 있었다.
다들 새로운 속성을 많이 사용하고, 또 연구한 게 보였다.
나도 css를 더 공부해야지!
아직 css는 너무 포괄적인 느낌이 있어서 명확하게 딱 안다고 말하기가 그렇다.