CSS의 :only-child 선택자는 부모 요소 안에서 유일한 자식으로 존재하는 모든 <p> 요소에 스타일을 적용할 때 사용합니다. 형제 요소가 하나라도 있다면 해당 요소는 선택되지 않습니다. :only-child 선택자란? :only-child는 CSS 구조적 의사 클래스(pseudo-class) 중 하나입니다. 어떤 요소가 부모 내에서 단독 자식일 때만 매칭되며, :first-child와 :last-child가 동시에 참인 경우와 같은 의미로 이해할 수 있습니다. 형제 요소가 전혀 없는 요소 → 선택됨 형제 요소가
CSS의 :optional 선택자는 required 속성이 없는 폼 입력 요소(<input>)에 스타일을 적용할 때 사용합니다. 반대로 필수 입력 항목을 강조하고 싶다면 :required 선택자를 함께 활용하면 됩니다.:optional 선택자란?:optional은 HTML5 폼 유효성 검사와 관련된 의사 클래스(Pseudo-class)입니다. required 속성이 지정되지 않아 선택 입력으로 취급되는 요소만 골라서 스타일을 적용할 수 있습니다. 이를 활용하면 사용자에게 어떤 항목이 필수이고 어떤 항목이 선택인지 시각적으
CSS의 :optional 선택자를 사용하면 required 속성이 없는 <input> 요소에 별도의 스타일을 적용할 수 있습니다. 반대로 필수 입력 필드에 스타일을 지정하고 싶다면 :required 선택자를 활용하면 됩니다.예제다음 코드를 실행하면 :optional 선택자의 동작을 직접 확인할 수 있습니다:<!DOCTYPE html> <html> <head> <style> &nbs
CSS의 :out-of-range 선택자를 사용하면 지정된 범위(min, max 속성)를 벗어난 값을 가진 <input> 요소에 스타일을 적용할 수 있습니다. 이 선택자는 주로 숫자 입력 필드에서 사용자가 허용된 최솟값과 최댓값 사이를 벗어난 값을 입력했을 때 시각적으로 경고 표시를 해주는 데 유용합니다. 반대로 범위 내의 값에는 :in-range 선택자를 활용할 수 있습니다. 예제 다음 코드를 실행하여 :out-of-range 선택자가 실제로 어떻게 작동하는지 확인해 보세요. <!DOCTYPE html> &l
CSS의 :out-of-range 선택자는 min, max 속성으로 지정된 허용 범위를 벗어난 값을 가진 <input> 요소에 스타일을 적용하는 데 사용됩니다. 이 선택자는 특히 숫자 입력 필드에서 사용자가 허용 범위 밖의 값을 입력했을 때 시각적으로 경고 표시를 해주는 데 매우 유용합니다.예제다음 코드를 실행하여 :out-of-range 선택자의 동작을 직접 확인해 보세요.<!DOCTYPE html> <html> <head> &
CSS :read-only 선택자란?CSS의 :read-only 선택자는 읽기 전용(read-only) 상태인 요소를 선택하는 의사 클래스(pseudo-class)입니다. 폼 입력 요소에 readonly 속성이 설정되어 있으면 해당 요소는 읽기 전용으로 간주되며, 이 선택자를 통해 별도의 스타일을 적용할 수 있습니다.예를 들어, 사용자가 값을 수정할 수 없는 입력 필드에 배경색이나 글자색을 다르게 지정하면, 방문자가 어떤 필드가 편집 가능하고 어떤 필드가 편집 불가능한지 한눈에 파악할 수 있어 사용자 경험(UX) 측면에서도 유용합니
웹 폼을 만들다 보면 사용자에게는 보여주되 수정은 허용하지 않아야 하는 입력 필드가 필요할 때가 있습니다. 이럴 때 HTML의 readonly 속성을 사용하면 해당 <input> 요소를 읽기 전용으로 만들 수 있는데, CSS에서는 :read-only 선택자를 활용해 이러한 요소만 골라 별도의 스타일을 적용할 수 있습니다.:read-only 선택자란?:read-only 선택자는 readonly 속성이 설정된 요소를 대상으로 합니다. 반대로 사용자가 값을 편집할 수 있는 일반적인 입력 요소에는 :read-write 선택자를
CSS의 :read-write 선택자는 사용자가 읽기와 쓰기, 즉 열람과 편집이 모두 가능한 요소를 선택할 때 사용합니다. 주로 폼(form) 내부의 입력 필드를 대상으로 하며, readonly 속성이나 disabled 속성이 설정되어 편집할 수 없는 요소는 자동으로 제외됩니다.:read-write 선택자의 동작 원리:read-write 선택자는 다음 조건을 만족하는 요소에 스타일을 적용합니다.<input>, <textarea>처럼 기본적으로 편집 가능한 폼 요소contenteditable 속성이 지정된 임의의
CSS의 :link 선택자는 아직 방문하지 않은 모든 하이퍼링크에 스타일을 적용할 때 사용하는 의사 클래스(pseudo-class)입니다. 사용자가 해당 링크를 클릭하여 페이지를 방문하면 더 이상 이 선택자가 적용되지 않으며, 그 시점부터는 :visited 선택자의 스타일이 대신 적용됩니다.:link 선택자의 특징:link 선택자는 href 속성을 가진 앵커(<a>) 태그 중에서 아직 열어보지 않은 링크만 대상으로 합니다. 일반적으로 :visited, :hover, :active 선택자와 함께 사용하여 링크의 상태별로 다
웹 페이지에서 방문하지 않은 모든 링크에 스타일을 적용하려면 CSS의 :link 선택자를 사용합니다. 이 선택자는 사용자가 아직 클릭하지 않은 하이퍼링크만 대상으로 하며, 이미 방문한 링크에는 영향을 주지 않습니다.아래 예제 코드를 실행하면 :link 선택자의 동작을 직접 확인할 수 있습니다. 이 예제에서는 방문하지 않은 링크의 배경색을 주황색(orange)으로 지정했습니다.예제<!DOCTYPE html> <html> <head> <style> a:link
CSS에서 :not(선택자)는 부정(negation) 의사 클래스로, 괄호 안에 지정한 요소를 제외한 나머지 모든 요소에 스타일을 적용할 때 사용합니다. 예를 들어 특정 태그만 빼고 다른 요소들의 색상이나 서식을 한 번에 변경하고 싶다면, 일일이 각각의 선택자를 작성하는 대신 :not() 하나로 간결하게 처리할 수 있습니다.아래 예제 코드는 <p> 태그가 아닌 모든 요소에 파란색 글자를 적용하는 방법을 보여줍니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.예제 코드<!DOCTYPE html> <htm
CSS의 :nth-child(n) 선택자는 부모 요소 안에서 n번째 자식에 해당하는 요소만 골라 스타일을 적용할 수 있는 강력한 도구입니다. 별도의 class나 id를 추가하지 않아도 되기 때문에 마크업을 수정할 필요 없이 깔끔하게 원하는 요소만 제어할 수 있습니다.:nth-child(n) 선택자란?:nth-child(n)은 형제 요소 중 n번째 위치에 있는 요소를 선택하는 CSS 구조적 의사 클래스(pseudo-class)입니다. 예를 들어 부모 요소의 두 번째 자식인 모든 <p> 요소를 스타일링하려면 p:nth-chi
CSS3에서는 transform 속성과 rotateX() 함수를 사용하여 요소를 X축(가로축)을 기준으로 회전시키는 3D 변환을 손쉽게 구현할 수 있습니다. 아래 예제 코드를 직접 실행해 보면서 동작 방식을 확인해 보세요.rotateX()란 무엇인가?rotateX() 함수는 요소의 중심선을 기준으로 X축 방향으로 지정한 각도만큼 회전시킵니다. 각도 값은 양수(예: 150deg) 또는 음수(예: -150deg)로 설정할 수 있으며, 값에 따라 회전 방향이 달라집니다.예제 코드<html> <hea
CSS에서 부모 요소의 두 번째 자식에 해당하는 모든 <p> 요소를 선택하고 스타일을 적용하려면 :nth-child(n) 선택자를 사용하면 됩니다.:nth-child(n) 선택자란?:nth-child(n) 선택자는 부모 요소 안에서 n번째 위치한 자식 요소를 정확히 찾아내는 구조적 가상 클래스입니다. 괄호 안에 원하는 순번을 넣으면 해당 순서의 요소만 선택되며, 이를 활용하면 클래스나 ID를 추가하지 않고도 특정 위치의 요소에 손쉽게 스타일을 지정할 수 있습니다.예제 코드다음 예제는 부모의 두 번째 자식인 <p>
CSS의 :nth-last-of-type(n) 선택자는 마지막 자식 요소부터 역순으로 계산했을 때, 부모 요소 안에서 두 번째 <p> 요소에 해당하는 모든 <p> 요소를 선택할 때 사용합니다.:nth-last-of-type(n) 선택자란?이 선택자는 같은 타입(여기서는 <p> 태그)의 형제 요소들 중에서 끝에서부터 n번째 위치한 요소를 찾아 스타일을 적용합니다. 예를 들어, 문단이 5개 있을 경우 끝에서 두 번째인 네 번째 문단이 선택됩니다.예제아래 코드를 실행하면 :nth-last-of-type(n
CSS의 :nth-of-type(n) 선택자는 부모 요소 안에서 n번째로 나타나는 특정 유형의 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 예를 들어, 부모 요소 내에서 두 번째 <p> 요소만 골라 배경색을 지정하거나 강조 표시를 하고 싶을 때 이 선택자를 활용할 수 있습니다.:nth-of-type(n) 선택자 예제아래 코드에서는 p:nth-of-type(2)를 사용하여 부모 요소인 <body> 안에서 두 번째 <p> 요소에 노란색 배경을 적용합니다.<!DOCTYPE html> <
CSS3에서 제공하는 3D 변환(3D Transform)은 요소를 입체적으로 조작할 수 있게 해주는 강력한 기능입니다. 요소를 X축, Y축, Z축 방향으로 이동하거나 회전하고, 크기까지 조절할 수 있어 입체적인 카드 뒤집기 효과, 회전 갤러리 등 다양한 웹 UI를 구현하는 데 활용됩니다. 다음은 CSS3에서 호출할 수 있는 주요 3D 변환 메서드를 정리한 표입니다. CSS3 3D 변환 함수 목록 함수설명 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)16개의 값으로 구성된 행렬을 사용하여 요소를 변
CSS의 :nth-of-type(n) 선택자를 사용하면 부모 요소 안에서 n번째로 나오는 모든 <p> 요소에 스타일을 지정할 수 있습니다. 이 선택자는 같은 타입(태그 이름)을 가진 형제 요소들 사이에서 순서를 기준으로 대상 요소를 찾아냅니다. :nth-of-type(n) 선택자란? :nth-of-type(n)은 동일한 유형의 형제 요소 중 n번째 위치한 요소를 선택하는 구조적 의사 클래스(pseudo-class)입니다. 예를 들어 p:nth-of-type(2)라고 작성하면, 부모 요소 내부에서 두 번째로 등장하는 <
CSS에서 마우스 오버(호버) 시 링크의 스타일을 변경하려면 :hover 선택자를 사용합니다. 이 가상 클래스는 사용자가 마우스 커서를 요소 위에 올려놓았을 때 해당 요소에 스타일을 적용해 줍니다.아래 예제 코드를 실행하고, 링크 위에 마우스 커서를 올려보면 배경색이 주황색으로 바뀌는 효과를 확인할 수 있습니다.예제<!DOCTYPE html> <html> <head> <style> &
CSS의 :in-range 선택자는 <input> 요소의 값이 지정된 범위(최솟값~최댓값) 안에 있을 때 해당 요소에 스타일을 적용하는 데 사용됩니다. 주로 type=number처럼 min과 max 속성을 지원하는 입력 필드와 함께 활용되며, 사용자가 입력한 값이 유효 범위 내에 있는지 시각적으로 피드백을 제공하는 데 매우 유용합니다. 예제 다음 코드를 실행하여 :in-range 선택자의 동작을 직접 확인해 보세요. <!DOCTYPE html> <html> <head>