공부 기록일지📚

branch는 원본(main)에 다른 가지를 쳐서 다른 코드를 만드는 것에서 그 이름이 유래됩니다. -branch는 코드들의 평행세계 라고 생각하는 것이 편합니다. 위의 사진 속 master를 main이라고 생각한다면 main의 작업에서 곁가지를 쳐서 각자의 작업을하고 나중에 merge를 통해 main에 합칠 수 있습니다. branch를 사용하면 버전관리에 용이합니다. 새로운 기능을 만들어서 테스트할 수도 있습니다. 먼저, github desktop을 통해서 새로운 branch를 생성해줍니다. "experiment"라는 새로운 branch를 생성했습니다. 현재 branch의 위치가 experiment로 돼있고 내가 사용하고 있던 VSCode(소스코드편집기)에서 코드를 변경하면 experoment 쪽으로 ..

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) 순서를 바꾸길 원하는 자식요소에 ..