차근차근 배움터

아직도 애니메이션에 대해서 모른다는 것을 알고 바로 공부 빡! 물론 기초 강좌였다 alternate 왔다갔다 한다 normal 이 기본값이다 alternate-reverse 거꾸로 출발 (거꾸로 normal) linear는 가속도가 붙지 않은 경우이다. forwards 마지막에 위치한 자리에서 멈추겠다

저장용 /* PC (Resolution 1024px)*/ @media all and (min-width:1024px) {} /* Tablets Horizontal Tablets Vertical (Resolution 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) {} /* Mobile horizontal, mobile vertical (Resolution 480px ~ 767px)*/ @media all and (max-width:767px) {}

box shadow 맨날 3px 4px 4px 이런 식으로 작성하기도 조금 귀찮기도 했고 ㅎ 예쁜 모양을 만들 줄 몰라 헤맸는데 여기 아주 간단하게 box shadow 코드 작성을 도와주는 사이트가 있다. 박스 사이즈 뿐만 아니라 Text shadow, flex box 등 다른 css 효과를 알아보는 기능도 있으니 유용하게 참고해보자 https://cssgenerator.pl/en/box-shadow-generator/ CSS Box shadow generator | CSSGENERATOR.PL CSS BOX SHADOW GENERATOR | An easy to use tool that allows you to generate ready CSS rules. Adjust values and copy the..

scroll bar를 없애려고 했더니 그럼 스크롤 할 수 있는지 모를 것 같아서 (디자인에 자신은 없지만) 스크롤바를 만드는 대신 예쁘게 꾸며보려 한다 .description { margin: 0; height: 222px; padding: 12px; /* background-color: red; */ border: solid 1px red; overflow: scroll; } .description::-webkit-scrollbar { width: 5px; /*스크롤바의 너비*/ color: blue; } .description::-webkit-scrollbar-thumb { background-color: rgb(69, 164, 45); /*스크롤바의 색상*/ } .description::-webki..

.aaa:not(:nth-child(2))::after { content: "helloooooo"; } 순서를 보면 not 먼저 그리고 그 괄호 안에 nth-child 그리고 마지막에 ::after를 사용해야 한닷

::after 나 ::before 를 이용해서 content 공백을 넣고 싶은데 적용이 안돼서 한참을 고민했다. li::after { content: ",\00a0" } 이 경우에는 content에 들어가는 특수 기호를 확인해야 한다

JSX 문법으로 이미지 태그를 하려고 하는데 적용이 안된다? 알고보니 react 에서는 기존 img 태그 넣듯이 하는 것이 아니라 image를 import 먼저 해야 한다. 아래처럼 import 먼저하고 {} 안에 컴포넌트를 넣어주면 끝 어렵지 않으나 그냥 몰랐던 사실! import loader from '../images/loading.gif'; return ( );

가끔씩 웹사이트에서 막 반 씩 비스듬하게 잘려있는 배경 같은 거 보고 어떻게 하나 했는데 역시 css에도 해당 부분이 존재한다 ! Mozila에서 clip-path 에 대한 예제를 확인해봤는데 많지 않은 것이 문제 clip-path - CSS: Cascading Style Sheets | MDN The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. developer.mozilla.org 그래서 찾은 유용한 사이트가 있다 원하는 모양대로 점들..

css에서 수식을 사용하고 싶을 때 아주 유용한 calc() 사용법이다 CSS calc() 사용법 CSS calc() 함수는 CSS에서 수학적 계산을 할 때 사용다. 이 함수는 두 개 이상의 값과 사칙 연산자 (+, -, *, /)를 조합하여 사용할 수 있다. calc() 함수의 문법 calc() 함수는 다음과 같은 문법을 가진다 width: calc(100% - 50px); 위 예시에서는 width 속성 값이 100%에서 50px을 뺀 값이 된다 calc() 함수 사용 예시 두 요소의 너비 조정 .container { width: 80%; padding: 20px; } .item { width: calc(50% - 20px); /* 50%는 항상 item 요소의 부모 요소인 container의 50%를..

not 선택자를 사용하여 특정 자식 요소를 제외하고 선택할 수 있다. 예를 들어, .inner:not(:first-child)를 사용하면 .inner 클래스를 가진 요소 중 첫 번째 자식 요소를 제외한 모든 요소를 선택할 수 있다. 이 경우 display: none 속성을 사용하여 선택된 요소를 숨길 수 있다. 아주 유용하게 이렇게 사용할 수 있다! .inner:not(:first-child) { display: none; }