당일회고
오늘은 페어와 함께하는 계산기 과제 마지막날이다.
기수분들 중에 고수들이 참 많았다. 보면서 저렇게도 가능하구나!
왜 저생각을 못했지? 라는 생각도 했고 아 이건 처음보는 기술이네! 하고 생각도 했다. 내 계산기가 넘 초라해 보였다 ㅋㅋㅋㅋㅋ
하지만 주눅들지 않는다. 내가 처음 보는 기술이면 다음에 시도해볼 수 있고 경험으로 아는것으로 만들면 되니까! 남과의 비교는 독이야 독!! 명심하자!
계산기를 다 완성하고 제출하기전에 이상한건 없는지 확인하는 차에 문제가 생겼다. 브라우저에 반응형 움직임을 주자 계산기 틀은 브라우저의 비율에 맞게 축소가 되는 반면 안에 버튼들이 반응에 움직이지 않았다.
그래서 이것 저것 확인해본 결과 기존에 계산기 틀과 버튼에 height 를 % 로 작성을 했었는데.
내가 % 에 대해서 기존에 어떻게 알 고 있었냐면 부모 요소의 크기에 따라 %가 차지한다고 알고있는게 잘 이해 했다고 생각했는데 부모의 크기가 줄어듦에도 왜 자식요소의 크기가 부모의 크기의 비율에 맞게 안 줄어들었을까?(height)
width는 제어가 가능했지만 높이가 ! 안돼었다! 그래서 다른 상대단위인 rem 요소를 부모,자식 요소에 높이에 적용 하니 높이가 반응형으로 움작이는 브라우저에 잘 작동을 하였다!
덕분에 단위에 대해서 다시 학습하는 계기가 되었었다.
복습
키워드 절대단위-상대단위, box-shadow , animation, flex-grow
레이아웃
- 절대단위 : px , pt
- 상대단위 : % , em , rem , vw, vh
%: 부모의 박스 크기에 비례하여 적용
em: 부모요소의 글자크기에 비례하여 적용
rem: 가장 상위요소 (html) 의 글자크기에 비례하여 적용
vw: 보여지는 화면의 폭에 비례하여 적용
vh: 보여지는 화면의 높이에 비례하여 적용
- 레이아웃이란 ? : 각각의 요소들이 의도한 목적에 맞게 배치되는 것
- flex : grow (기본값= 0) shrink (기본값 = 1) basis (기본값 = auto)
basis 값으로
flex-item의 크기를 정하는 것임!!
grow 로 크기를 정한다고 생각했으나flex-item의 크기를 정하는 건
basis로 크기를 정하고
grow 는 남은 여백의 공간을 가져가는 것!! (flex-item의 크기를 정하는게 아닌게 중요!!)
- box-shadow : a b c d e
a: 수평방향 그림자양수 = 오른쪽으로음수 = 왼쪽으로
b: 수직방향 그림자양수=박스 아래쪽음수=박스 위쪽
c: 그림자 흐림 반경
0이면 선명한 그림자(흐림❌)양수만 적용가능! ⭕️음수는 못정함!!❌
d: 그림자 확산거리
양수= 그림자 크기 확대 오른쪽에 그림자가 붙음
음수= 그림자 크기 축소 왼쪽에 그림자가 붙음
e: 그림자 색상을 지정
- animation : a b c d e f g h
(a)animation-name: 이름을 정함@keyframes에 필요한 이름
(b)animation-duration: 총 시간을 정함.
(c)animation-timing-function: 진행 속도
(d)animation-delay: 시작 전 대기하는 시간
(e)animation-iteration-count: 반복 횟수
(f)animation-direction: 진행방향
(g)animation-fill-mode: 애니메이션 끝난 후 어떤 상태로 만들지
(h)animation-Play-state: 애니메이션 진행할지 멈출지
@keyframes:from- 어떤 모양에서to- 어떤 모양으로 변할지 정함문법
@keyframes name(애니메이션이름) { 0% :시작할때의 모양을 정함 from 을 사용해도 됨 n% : n%일때의 모양을 정할 수 있음 100% : 끝날 때의 모양을 결정 to 를 사용해도 됨
