gaki gaki

선택자 1. Universal selector (전체 선택자) 사용법: * 모든 html 요소들을 선택한다. 예시: * { margin: 0; }; 2. Type selector (타입 선택자) 사용법: html element 이름으로 선택 특정 html element 를 선택한다. 예시: button { width: 100px; } 3. Class Selector (클래스 선택자) 사용법: 클래스 이름 앞에 . 을 붙여서 사용 특정 클래스 elements 를 선택한다. 예시: .table { width: 200px; height: 200px; }; 4. ID Selector (아이디 선택자) 사용법: 아이디 앞에 # 을 붙여서 사용 특정 Id 의 elements 를 선택한다. 예시: #my_id { w..

안녕하세요. gaki 입니다. 오늘은 mix-blend-mode 에 대해서 알아보겠습니다. mix-blend-mode 란, 자식이나 부모의 색깔에 따라서 본인의 색깔을 바꿀 수 있는 css 입니다. 이 속성에 대해서 알아보게된 계기는 https://www.martinbriceno.com/ 여기 웹사이트를 보다가 마우스 커서 주위에 생기는 원의 색깔이 페이지의 배경색깔에 따라서 바뀌는 것에 대한 이유를 찾다가 알게되었습니다. 원의 색깔이 배경색이 하얀색이면 검은색으로, 배경색이 검은색이면 하얀색으로 바뀌는걸 볼 수 있습니다. 이러한 효과를 간단하게 mix-blend-mode 로 구현할 수 있습니다. 이 효과를 구현하기 위해서 mix-blend-mode 의 difference 속성을 이용할 것입니다. dif..

안녕하세요. gaki 입니다. 오늘은 CSS 애니메이션에 대해 이야기해보려 합니다. MDN 에 나와있는 CSS 애니메이션의 정의를 인용하면 CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다. 이라고 합니다. CSS 애니메이션은 자바스크립트를 활용한 애니메이션보다 다음 세가지 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다. ..

특정 문자로 시작하거나 끝나는 element 선택하는법 위와 같이 element 가 있을 때 클래스 이름이 div_ 로 시작하는 모든 엘리먼트를 선택하는 방법 [class^="div_"] { ~~~ } 이런식으로 선택하면 된다. 만약 클래스 이름이 _a 로 끝나는 앨리먼트를 선택하고싶으면 [class*="_a"] { ~~} 로 선택하면 된다.

css 의 선택자를 활용해 부모 element 에 event 를 전달할 수 있을까? css 의 선택자를 활용해 형제 혹은 자식 엘리먼트를 선택하여 이벤트를 전달 할 수 있지만, 부모 엘리먼트에 이벤트를 전달할 수는 없다. css 선택자 체이닝을 통해 형제의 자식 엘리먼트에 이벤트를 전파할 수 있다. 선택자 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors CSS 선택자 - CSS: Cascading Style Sheets | MDN CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다. developer.mozilla.org

css 의 style 과 jsx 에서 하드코딩된 style 이 겹치면 어떻게될까? => jsx 의 스타일이 더 우선순위로 적용된다. //in css .contain { background-color: red; }; // jsx 일 경우, jsx 의 css 가 더 우선순위로 적용되어 background-color 는 blue 가 된다.