.fast-recomn-section .fast-recomn-text-unit.ai{ background: linear-gradient(90deg, #00F0FF 0%, #10EC0C 13.11%, #00F0FF 27.15%, #4E4E4E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.ai-text{ animation-duration: 3s; animation-name: rainbowText; animation-iteration-count: infinite; } @keyframes rainbowText { 0% { color: #ff2a2a; } 15% { color: #ff7a2a; } 30% { color: #ffc52a; } 45% { color: #43ff2a; } 60% { color: #2a89ff; } 75% { color: #202082; } 90% { color: #6b2aff; } 100% { color: #e82aff; } }

html css .twoanswer-ai-section.active2 .suggest-img-wrapper{ animation : cardMove 1s ease forwards; animation-delay: calc(var(--n) * 0.2s + 2s); }

너비와 높이 (width and height): 요소의 너비(width)나 높이(height)를 설정할 때 % 단위는 부모 요소의 너비나 높이를 기준으로 합니다. 예를 들어, 부모 요소의 너비가 500px일 때 자식 요소의 너비를 50%로 설정하면, 그 자식 요소의 너비는 250px이 됩니다. 패딩과 마진 (padding and margin): 패딩(padding)이나 마진(margin)을 백분율로 설정할 경우, 이는 해당 요소의 부모 요소의 너비를 기준으로 계산됩니다. 예를 들어, 부모의 너비가 600px이고, 자식 요소의 마진을 10%로 설정하면, 그 마진은 60px이 됩니다. 위치 (position): 요소의 위치를 %로 지정하면, 이는 위치의 기준점(예를 들어 position: relative의 ..

input[type=file]::file-selector-button{~css속성들~} css 에서 ::file-selector-button 을 사용하면 파일선택하는 버튼을 커스텀 할 수 있다

position fixed position relative 가 차례로 선언되어있는 각각의 div가 있다 기본적으로 요소가 html 에 나오는 순서대로 스택순서가 결정이 된다. 즉 나중에 선언된 요소가 더 위에 렌더링 되고 있는 것이다. !! 잘못 알고 있었던 부분 position fixed를 선언하면 다른 position 요소들 보다 위에 보일 거라고 생각했는데 (z-index를 선언한 것처럼) fixed를 선언하고 z-index를 추가로 선언해야 앞에 올라와서 따라오는 효과를 낼 수 있다. fixed를 맨 처음 선언하고 밑에 다른 position 요소들을 만들면 position 요소들 뒤로 뷰포트에 고정되어 따라온다.

class marquee-text안에 before요소로 텍스트를 넣어서 애니메이션 효과, infinite를 줘서 무한히 흐르게 한다 white-space : nowrap 으로 줄넘김을 방지한다. 하지 않으면 줄넘김이 자동으로 돼서 글자가 가로로 배치되는게 아니라 부모의 width값보다 넘어가면 글자가 밑으로 배치되게 된다. overflow hidden을 적용해서 글자가 검은색의 배경을 가진 부모요소 안에만 보이게 한다 코드파일 index.html 안에 css랑 html코드 둘 다 들어가있음

aspect-ratio: 1 / 1; aspect-ratio: 16 / 9; 종횡비를 정하는 CSS, 1 / 1 은 1 : 1, 16 / 9 는 16 : 9 비율을 갖는다

HTML CSS @media screen and (max-width : 768px){ } JavaScript if (window.innerWidth

unset 속성을 지정하면 상속받아올 부모 값이 있으면 부모 값을 받아오고 없으면 초기값으로 지정한다.

transform/transition 속성 한줄정리 syntax transform:rotate(360deg); >360도만큼 회전 transform:scale(1.2); >1.2배 확대 transform:scale(0.8); > 0.8배 확대 transform 객체의 움직임이나 형태 변화를 주는 CSS속성 translate(x,y) 객체를 x, y만큼 이동 translateX 객체를 x만큼 이동 trnslateY 객체를 y만큼 이동 scale(1.0) 객체의 크기를 n배만큼 확대/축소 scaleX 객체의 크기를 X축으로 확대/축소 scaleY 객체의 크기를 Y축으로 확대/축소 rotate(Xdeg) 객체를 X도만큼 회전 rotateX 객체를 X축을 기준으로 해당 값만큼 회전 rotateY 객체를 Y축을 ..

[1] CSS Display 속성 syntax display:inline; / display:block; / display:inline-block; inline block inline-block 배치 한 줄에 여러 컨텐츠를 이어서 배치 가능 한 줄에 한 컨텐츠만 배치 가능 한 줄에 여러 컨텐츠를 이어서 배치 가능 너비 컨텐츠의 너비값을 가짐 컨텐츠의 너비와는 상관없이 100% 컨텐츠의 너비값을 가짐 크기 width/heignt 값 가질 수 없음 width/height 값 가질 수 있음 width/heignt 값 가질 수 없음 마진 상하좌우 마진 값을 가질 수 없음 상하좌우 마진 값을 가질 수 있음 상하좌우 마진 값을 가질 수 없음 [2] CSS Position 속성 syntax position:relat..