공부 기록일지📚

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

▶box-sizing:border-box 사용예제 alt-screen-header의 포지션을 고정하려고 position:fixed; 이후, width:100% 를 줬을 때 이처럼 오른쪽이 잘리는 경우가 있다. 이때 사용하는 속성과 속성값이 box-sizing: border-box; 이다. 속성값을 border-box로 하고나면 맨위 상단의 screen-header처럼 완전히 화면안에 요소들이 들어오게 된다. ▶text-align 사용예제 습관적으로 내부 요소를 중앙정렬하려면 flex를 사용해서 내부에 있는 텍스트를 justify-content:center를 사용하여 중앙에 정렬하려고 했는데 그렇게하면 코드가 2줄로 길어지게 된다. 또한, 내부의 요소가 여러개가 아니라 "text" 하나라는 점을 고려하면 ..

▶아이콘 링크 만들기 html 코드에서 내가 아이콘을 눌렀을 때 다른 스크린으로 전환(해당 링크로 이동)을 원한다면, 이런식으로 a태그 안에 i태그(아이콘)을 넣어줘야 합니다. span 태그 안에 따로 따로 닫아주면 아이콘을 눌러도 해당 링크로 전환되지 않습니다. //틀린 예제 ▶font-awesome에서 작은 화살표는 angle(앵글)이라고 부릅니다. 검색 시, angle 이라고 검색해주면 됩니다. ▶3요소를 각각 같은 비율로 분배하여 가로 정렬하기 (아래의 예제에서는 3요소가 "3개의 컬럼"이라고 생각하면 됩니다.) CSS코드의 첫번째 컬럼에 margin-right: auto; 마지막 컬럼에 margin-left: auto; 위의 코드를 적용한 ↓결과물↓

정리를 시작하기 전에 가장 잘 사용되면서 잘 까먹는 것 복습하고 들어갑시다. ▶absolute child 는 항상 relative father가 필요합니다. -> 바로 위에 건너뛰고 상위에 있는 건 적용이 안됨 position: relative; 로 돼있는 부모가 없으면 position: absolute를 했을 때, 변경하는 top/left/right/bottom의 위치 기준점이 제대로 먹히지 않습니다. absolute child always need a relative father ▶text-align 과 align-items 의 차이점 text-align은 텍스트 국한 align-items는 전제조건: display:felx; 교차축을 기준으로 정렬한다. ▶box-sizing: border-box; ..

Block: Encapsulates a standalone entity that is meaningful on its own. (자체적으로 의미있는 독립 실행형 엔티티를 캡슐화한다.) block with HTML ... block with CSS 주의사항 ▷Use class name selector ONLY ▷태그 네임이나 아이디는 안됨 ▷해당 페이지에 다른 블록이나 엘레멘트에 의존성이 있으면 안됨 Modifier: flags on blocks or elements. Use them to change appearance, behaivor or state CSS class is formed as block's or element's name plus or element's name plus two dash..