프론트 개발 블로그

부정(negation) 가상 클래스로 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 표기법 입니다. 인수로 표시되지 않은 요소와 일치 합니다. 쉽게 말해서 div a 요소 중 .selctor 클래스가 들어간 요소만 제외한 나머지 a 요소에 일정한 스타일을 주고 싶을 때 사용한다. 예제 // 구문 :not(selector) { style properties } // 클래스 classy 를 제외한 모든 p 엘리먼트 요소 텍스트에 color 값을 red 로 선택 p:not(.classy) { color: red; } // body 자식 중 p 엘리먼트 요소가 아닌 엘리먼트들 color 값을 green 으로 설정 body :not(p) { color: green; } developer.mo..

Frame By Frame 애니메이션 구현하기 1분 코딩님의 인터랙티브 웹 개발 제대로 시작하기 강의 참고 5100 X 300 사이즈의 스프라이트 이미지를 Frame By Frame 애니메이션으로 구현해야 되는 상황 TIP1. 가로, 세로 사이즈의 두배 사이즈의 이미지를 만든 다음에 CSS 상에서 절반으로 잘라서 사용하기 : 레티나 디스플레이와 같은 고해상도 디스플레이에서 px 직접도가 높은 고해상도로 표현됩니다. TIP2. animation-timing-function: steps() 속성을 사용하기 : 해당 속성을 지정해주지 않으면 -2550px 만큼 연속으로 흘러가는 애니메이션이 되는데, 해당 속성을 사용하면 steps 단계만큼 끊어지는 애니메이션을 구현할 수 있습니다. @keyframes spac..

플렉스 컨테이너 자식을 어떤 방향으로 배치할 수 있고, 자식의 크기도 유연하게 표현할 수 있습니다. display: flex 부모 요소 컨테이너의 속성으로 지정하여, 자식 속성을 유연하게 만듭니다. .container { display: flex; background: gray; } flex-direction 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다. .container { display: flex; flex-direction: row; background: gray; } 기본값 row 상속 NO 애니메이션 NO 버전 CSS3 Javascript syntax: object.style.flexDirection='row' css syntax row | row-re..

CSS Animations 은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링 됩니다. 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. // 예시 코드 animation: sprite-ani 1s infinite steps(17); /* animation-duration: 1s; animation-timing-function: steps(17); animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: sprite-ani; */ an..