공부 기록일지📚

▶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; ..

*모든 state의 CSS를 수정하면 가지고 있던 디폴트 값을 잃어버려서 처음부터 다시 꾸며야 합니다. ▶ :active ->대상을 누르고 있을 때(마우스로 클릭 유지) ▶ :hover ->마우스 커서가 대상 위에 있을 때 ▶ :focus(active와 같은 거 같지만 다름) -> active가 마우스로 클릭됐다면, focus는 키보드로 선택되었을 때를 말함 예시로, 회원가입을 할 때, 이름, 아이디, 비밀번호 입력칸에 키보드 Tab키를 누르면 다음 작성칸으로 넘어가는 것처럼 ▶ :visited -> 링크에만 적용, 방문했던 적이 있는 링크의 색상이 다르게 보이는 것도 visited의 효과 때문 ▶ :focus-within -> focused인 자식을 가진 부모 엘리먼트의 상태 고로 이 효과는 부모 엘리..

▶ selector 선택자 color -> property 속성 blue -> value (속성)값 ▶block = box = not inline ▶inline 요소는 크기값을 가지지 않는다. -> width, height를 지정해도 적용 X 좌우 margin 만 가질 수 있습니다.-> 상하 marginX *padding은 block, inline 요소 상관없이 가능합니다. ▶VSC사용 시 emmet확장 프로그램 단축키 emmet 단축키 .find-icons__icon*4>span 아이콘 클래스가 4개 있고 각각의 내부에는 span태그가 있게 만들기 (.find-icons__icon>span)*4 로 해야하는 줄 알았는데 위의 코드로도 똑같은 결과물이 나옵니다. ▶중간에 우리가 새로운 css파일을 만들 ..