공부 기록일지📚

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

will-change(불안정한 animation*사용 시 같이 사용): 기본적으로 브라우저에게 뭔가가 바뀔 것이라고 말해주는 것 (브라우저에게 렌더링 힌트를 주고 element에 실행되길 기대하는 변화를 명시함 +부가설명: will-change는 그래픽카드를 이용해서 애니메이션을 가속화한다.) 이 속성을 쓰면 브라우저가 애니메이션을 더 괜찮게 만들어준다. 왜냐면 이게 바뀔 거라는 것을 알고 있기 때문이다. *불안정한 animation이란? 어떤 요소에 keyframe을 걸어서 애니메이션 효과를 추가했는데 그 모습이 흔들린다거나 불안정적인 형상을 띄는 animation효과를 지칭합니다. e.g.) 기존의 animation "heartBeat"는 will-change속성이 없을 시, scale값에 따라 1...

▶animation-delay 이 속성은 말 그대로 지정된 animation의 시작을 연착시키는 속성입니다. 사용예시: animation-delay: 2s; //참고로 이 곳에 animation: 애니메이션이름 모션스타일 지속 시간; 이 작성돼있어야 겠죠? 따로 animation과 animaiton-delay를 적어줘도 되고 animation 하나에 delay를 포함해도 됩니다. ▶animation animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용한다. 초기값 (ref: MDN) as each of the properties of the shorthand: animation-name (en-US): none animation-duration: 0s animation-timing-..

▶vw, vh, %(percent) 구분 100vh = The screen's height = view height 100vw = The screen's width = view width 100% = 100% of the PARENT ▶animation: forwards CSS animation(@keyframe)을 활용해서 어떤 화면을 띄웠다가 없애고 싶을 때 forwards라는 속성값을 쓰면 된다. 우리가 이전에 사용했던 animation 속성값으로는 infinite 가 있었는데 해당 animation을 끊임없이 연속재생하기 위해서 사용했었다. forwards 개념: The final propery value(as defined in the last @keyframes at-rule) is maint..

▶border-radius세분화 border-radius는 4개의 CSS 속성의 단축 속성입니다. border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius 즉, 반대로 각각의 값을 따로 지정할 수도 있다는 뜻입니다. e.g.) border-radius전체에 15px 값을 주고 그 다음에 border-top-left-radius의 값을 0으로 줌으로써 말풍선 같은 모양을 만들어냈습니다. ▶flex children 기능: order order 라는 속성은 오직 flex children한테만 적용가능하다. (전제조건 - display:flex; ) 방법1) 순서를 바꾸길 원하는 자식요소에 ..