CSS animation-name 속성이란?animation-name 속성은 요소에 적용할 @keyframes 규칙의 이름을 지정하는 CSS 속성입니다. 이 속성을 사용하면 미리 정의해 둔 키프레임 애니메이션을 특정 요소에 연결하여 실행할 수 있습니다.animation-name은 단독으로 동작하지 않으며, 일반적으로 animation-duration(재생 시간)과 함께 사용해야 애니메이션이 화면에 나타납니다. 재생 시간이 지정되지 않으면 기본값인 0초로 설정되어 애니메이션이 실행되지 않습니다.기본 문법animation-name: k
CSS의 animation-play-state 속성은 요소에 적용된 애니메이션이 현재 재생 중(running)인지, 아니면 일시정지(paused) 상태인지를 지정하는 데 사용됩니다. 이 속성 하나만으로 별도의 JavaScript 없이도 애니메이션 흐름을 자유롭게 제어할 수 있습니다. animation-play-state 속성의 값 running – 애니메이션이 정상적으로 재생됩니다. (기본값) paused – 애니메이션이 일시정지되며, 다시 running으로 변경하면 멈춘 지점부터 이어서 재생됩니다. 기본 사용 예제 아래 예제에
CSS에서 [attribute ~= value] 선택자를 사용하면 속성 값에 특정 단어가 포함된 요소를 선택할 수 있습니다. 이 선택자는 속성 값을 공백으로 구분된 단어 목록으로 취급하며, 그중 지정한 단어와 정확히 일치하는 단어가 하나라도 있으면 해당 요소를 선택합니다.아래 예제 코드를 실행하면 [attribute ~= value] 선택자의 동작을 직접 확인할 수 있습니다. 여기서는 Tutorials라는 단어를 검색합니다.예제<!DOCTYPE html> <html> <head>
CSS의 animation-timing-function 속성은 애니메이션이 한 주기(사이클) 동안 진행되는 속도 곡선을 지정합니다. 쉽게 말해, 애니메이션이 시작부터 끝까지 어떤 리듬으로 움직일지를 결정하는 요소로, 자연스러운 모션 효과를 만드는 데 핵심적인 역할을 합니다.주요 타이밍 함수 값ease: 기본값으로, 천천히 시작했다가 빨라진 후 마지막에 다시 느려집니다.ease-in: 느리게 시작하여 점점 빨라집니다.ease-out: 빠르게 시작하여 점점 느려집니다.ease-in-out: 양쪽 끝에서는 느리고 중간 구간에서 빠르게 진
CSS로 선형 그래디언트 반복하기 CSS에서 선형 그래디언트를 반복해서 표현하려면 repeating-linear-gradient() 함수를 사용하면 됩니다. 일반적인 linear-gradient() 함수와 문법은 거의 같지만, 마지막 색상 정지점(color stop)까지의 그라디언트 패턴이 요소 전체에 걸쳐 자동으로 반복된다는 점이 다릅니다. 아래 예제 코드를 직접 실행해 보면서 동작을 확인할 수 있습니다. 예제 <!DOCTYPE html> <html> <head>
CSS에서 모든 애니메이션 관련 속성을 한 번에 지정할 수 있는 약식(shorthand) 속성은 바로 animation입니다. 이 속성 하나만 사용하면 애니메이션 이름, 지속 시간(duration), 타이밍 함수(timing-function), 지연 시간(delay), 반복 횟수(iteration-count), 진행 방향(direction), 채우기 모드(fill-mode), 재생 상태(play-state) 등을 개별적으로 작성하지 않고도 간결하게 설정할 수 있습니다.animation 약식 속성의 기본 문법약식 속성의 값은 아래와
CSS로 input type 버튼 스타일 지정하기HTML의 input type=button은 제출(submit) 버튼이나 초기화(reset) 버튼 등 다양한 용도로 사용할 수 있습니다. CSS를 활용하면 웹 페이지에 있는 모든 버튼의 배경색, 테두리, 여백, 글자색, 마우스 커서 모양 등을 자유롭게 꾸밀 수 있습니다.아래 예제 코드를 직접 실행해 보면 속성 선택자(input[type=button])를 이용해 버튼 요소만 골라 스타일을 적용하는 방법을 확인할 수 있습니다.예제 코드<!DOCTYPE html> <html
방사형 그래디언트로 균일한 간격의 색상 정지점 만들기radial-gradient() 함수는 지정된 중심점에서 바깥쪽으로 원형 또는 타원형으로 퍼지는 그래디언트를 생성하는 CSS 함수입니다.균일하게 간격을 둔 색상 정지점(color stop)을 만들려면 최소 두 개 이상의 색상을 쉼표(,)로 구분하여 나열하면 됩니다. 각 색상의 위치를 별도로 지정하지 않으면, 브라우저가 자동으로 모든 색상을 그래디언트 영역에 균등하게 배치해 줍니다.예제아래 예제에서는 주황색(orange), 초록색(green), 노란색(yellow) 세 가지 색상이
CSS에서 애니메이션이 시작되기 전에 일정 시간 동안 대기하도록 설정하려면 animation-delay 속성을 사용하면 됩니다. 이 속성은 애니메이션이 적용된 요소가 화면에 나타난 후 지정한 시간만큼 기다렸다가 애니메이션을 실행합니다.animation-delay 속성의 기본 사용법아래 예제에서는 노란색 배경의 div 요소가 페이지 로드 후 2초를 기다린 뒤, 2초에 걸쳐 초록색에서 파란색으로 배경색이 변하는 애니메이션을 실행합니다.예제 코드<!DOCTYPE html> <html> <h
CSS의 animation-direction 속성을 사용하면 애니메이션을 정방향으로 재생할지, 역방향으로 재생할지, 아니면 사이클마다 방향을 번갈아 전환하며 재생할지 지정할 수 있습니다. animation-direction 속성이란? animation-direction은 CSS 애니메이션이 @keyframes에서 정의된 순서대로 진행될지, 반대 순서로 진행될지를 결정하는 속성입니다. 이 속성을 활용하면 별도의 keyframes를 추가로 작성하지 않고도 하나의 애니메이션으로 다양한 연출 효과를 만들 수 있습니다. 주요 속성값 n
CSS 애니메이션 채우기 모드(animation-fill-mode)란?CSS에서 애니메이션의 채우기 모드를 설정하려면 animation-fill-mode 속성을 사용합니다. 이 속성은 애니메이션이 실행되기 전이나 종료된 후에 요소에 어떤 스타일이 적용될지 결정합니다.animation-fill-mode 속성에 사용할 수 있는 주요 값은 다음과 같습니다.none — 기본값입니다. 애니메이션이 실행되지 않는 동안에는 키프레임의 스타일이 요소에 적용되지 않습니다.forwards — 애니메이션이 종료된 후에도 마지막 키프레임(to)의 스타일
CSS를 사용하여 양방향으로 애니메이션 속성 확장하기 CSS에서 animation-fill-mode 속성에 both 값을 설정하면 애니메이션이 시작되기 전과 종료된 후에도 키프레임 스타일이 유지되어, 애니메이션 속성이 양방향으로 확장됩니다. animation-fill-mode의 주요 값 none – 기본값으로, 애니메이션이 실행되는 동안에만 스타일이 적용됩니다. forwards – 애니메이션이 끝난 후에도 마지막 키프레임의 스타일이 그대로 유지됩니다. backwards – 애니메이션이 시작되기 전에 첫 번째 키프레임의 스타일이 미
CSS [속성|=값] 선택자란? CSS의 [속성|=값] 선택자(attribute selector)를 사용하면 지정한 속성 값이 특정 값과 정확히 일치하거나, 그 값 바로 뒤에 하이픈(-)이 이어지는 형태로 시작하는 요소를 모두 선택할 수 있습니다. 이 선택자는 lang=en-US처럼 하이픈으로 구분된 값을 다룰 때 특히 유용합니다. 예를 들어 [alt|=Tutor]라고 작성하면 alt 속성 값이 Tutor 또는 Tutor-로 시작하는 모든 요소가 선택됩니다. 예제 다음 코드는 [alt|=Tutor] 선택자를 활용하여 alt 속성이
[attribute$=value] 선택자란?CSS 속성 선택자 중 [attribute$=value]는 지정한 속성의 값이 특정 문자열로 끝나는 모든 요소를 선택합니다. 예를 들어 이미지의 alt 속성이 Connect로 끝나는 요소만 골라 스타일을 적용할 수 있으며, 특정 접미사를 가진 파일명이나 링크를 구분할 때 특히 유용합니다.기본 문법선택자[속성$=값] { /* 스타일 선언 */ }예제 코드아래 예제에서는 두 개의 이미지 중 alt 속성이 Connect로 끝나는 첫 번째 이미지에만 파란색 테두리가 적용됩니다.<!DOCT
CSS 애니메이션 종료 후 마지막 키프레임 스타일 유지하기 CSS 애니메이션이 끝난 뒤에도 요소가 마지막 키프레임에서 설정한 스타일 값을 그대로 유지하게 하려면 animation-fill-mode 속성에 forwards 값을 지정하면 됩니다. 기본적으로 CSS 애니메이션은 재생이 완료되면 요소가 원래 상태로 되돌아갑니다. 하지만 animation-fill-mode: forwards;를 적용하면 애니메이션이 종료된 이후에도 마지막 키프레임(to)의 스타일이 계속 유지되어 더욱 자연스러운 연출이 가능합니다. 예제 코드 <!DOCT
CSS [attribute*=value] 선택자란?CSS의 [attribute*=value] 선택자는 지정한 속성 값 안에 특정 하위 문자열이 포함된 모든 요소를 선택할 때 사용합니다. 예를 들어, href 속성 값에 java라는 문자열이 포함된 모든 <a>(링크) 요소를 선택하려면 다음과 같이 작성하면 됩니다.[href*=java] { ... }예제 코드아래 코드를 실행하면 href 속성에 java가 포함된 링크에만 주황색 테두리가 적용되는 것을 확인할 수 있습니다.<!DOCTYPE html> <html
CSS의 background-origin 속성에 border-box 값을 적용하면, 배경 이미지가 요소의 테두리(border) 영역 왼쪽 상단 모서리부터 시작되도록 설정할 수 있습니다. background-origin 속성의 세 가지 값 background-origin 속성은 배경 이미지가 어느 영역을 기준으로 배치될지 결정합니다. 다음과 같은 세 가지 값을 사용할 수 있으며, 각 값에 따라 배경 이미지의 시작 위치가 달라집니다. padding-box (기본값): 패딩 영역의 왼쪽 상단 모서리부터 배경 이미지가 시작됩니다. bor
CSS에서 애니메이션 관련 개별 속성들을 한 번에 설정할 수 있는 단축 속성(shorthand)은 바로 animation입니다. 이 속성 하나만으로 애니메이션 지속 시간(duration), 애니메이션 이름(name), 타이밍 함수(timing-function), 지연 시간(delay), 반복 횟수(iteration-count), 방향(direction), 채우기 모드(fill-mode) 등을 간결하게 지정할 수 있습니다.animation 단축 속성의 기본 문법단축 속성을 사용하면 여러 줄에 걸쳐 작성해야 할 코드를 한 줄로 줄일 수
CSS animation-iteration-count 속성이란?CSS에서 animation-iteration-count 속성은 애니메이션이 재생되는 횟수를 지정하는 데 사용됩니다. 이 속성에 숫자 값을 입력하면 해당 횟수만큼 애니메이션이 반복되고, infinite 값을 사용하면 애니메이션을 무한히 반복할 수도 있습니다.아래 예제 코드를 실행하면 animation-iteration-count 속성이 실제로 어떻게 동작하는지 직접 확인해 볼 수 있습니다.예제<!DOCTYPE html> <html> &n
페이지를 아래로 스크롤해도 화면 상단에 계속 붙어 있는 내비게이션 바(스티키 내비바)를 만들려면 CSS의 position: sticky; 속성을 사용하면 됩니다. 별도의 JavaScript 없이 순수 CSS만으로 간단하게 구현할 수 있어 가장 널리 쓰이는 방식입니다.position: sticky의 동작 원리sticky는 평소에는 relative처럼 문서 흐름을 그대로 따르다가, 스크롤 위치가 지정한 임계점(예: top: 0)에 도달하는 순간 fixed처럼 해당 자리에 고정됩니다. 즉, 요소가 뷰포트 상단에 닿기 전까지는 일반적인 배