CSS의 :focus 가상 클래스(의사 클래스)는 사용자가 텍스트 입력창, 버튼, 링크 같은 대화형 요소를 클릭하거나 Tab 키로 이동해 포커스를 받았을 때, 해당 요소에만 특정 스타일을 적용할 수 있게 해주는 선택자입니다. 폼 디자인에서 현재 입력 중인 필드를 시각적으로 강조할 때 가장 널리 활용됩니다.:focus 가상 클래스란?:focus는 요소가 포커스 상태에 있을 때만 동작합니다. 마우스로 클릭하거나 키보드로 탐색하는 순간 스타일이 적용되고, 다른 곳으로 포커스가 옮겨지면 자동으로 해제됩니다. 덕분에 별도의 JavaScrip
CSS의 :active 선택자는 사용자가 링크를 클릭하는 순간, 즉 마우스 버튼을 누르고 있는 동안 활성화된 상태의 링크에 특별한 스타일을 적용할 때 사용합니다. 이를 활용하면 사용자에게 즉각적인 시각적 피드백을 제공하여 더 나은 사용자 경험을 만들 수 있습니다.:active 선택자의 동작 원리:active 상태는 요소가 실제로 활성화되는 아주 짧은 순간에만 적용됩니다. 일반적으로 마우스 버튼을 누르는 순간부터 떼는 순간까지 유지되며, 버튼을 놓으면 해당 스타일은 사라집니다.아래 예제 코드를 실행하고 링크를 클릭해 보면, 클릭하는
활성(active) 상태의 링크에 스타일을 적용하려면 CSS의 :active 선택자를 사용합니다. :active 선택자는 사용자가 링크를 클릭하는 순간부터 마우스 버튼을 떼기 전까지의 상태를 의미하며, 이를 활용하면 클릭 순간에만 나타나는 시각적 효과를 손쉽게 구현할 수 있습니다.예제<!DOCTYPE html> <html> <head> <style> a:active {
CSS의 :checked 선택자는 체크박스나 라디오 버튼처럼 현재 선택(체크)된 상태에 있는 모든 <input> 요소에 스타일을 적용할 수 있는 의사 클래스(pseudo-class)입니다. 이 선택자를 활용하면 사용자가 항목을 체크하는 순간 크기나 색상 등을 바꿔 시각적인 피드백을 제공할 수 있어, 폼(form) UI를 더욱 직관적으로 만들 수 있습니다. 아래 코드를 직접 실행하면 :checked 선택자가 어떻게 동작하는지 확인할 수 있습니다. 예제 <!DOCTYPE html> <html> &nbs
position: fixed; 속성은 요소를 뷰포트(viewport)를 기준으로 배치할 수 있게 해주는 CSS 위치 지정 방식입니다. 이 속성이 적용된 요소는 페이지를 스크롤하더라도 화면상의 같은 위치에 그대로 고정되어 유지됩니다. position: fixed의 주요 특징 요소가 일반 문서 흐름(document flow)에서 제거되어 다른 콘텐츠와 겹쳐 표시될 수 있습니다. 스크롤 여부와 관계없이 항상 화면의 동일한 위치에 나타납니다. top, bottom, left, right 속성과 함께 사용하여 원하는 위치에 자유롭게 배치할
체크(선택)된 모든 <input> 요소에 스타일을 적용하려면 CSS의 :checked 선택자를 사용하면 됩니다. :checked는 체크박스나 라디오 버튼이 선택된 상태일 때 해당 요소를 대상으로 하는 의사 클래스(pseudo-class)로, 선택 여부에 따라 크기, 색상 등 다양한 스타일을 동적으로 변경할 수 있습니다.아래 예제 코드를 직접 실행하여 :checked 선택자가 어떻게 작동하는지 확인해 보세요.예제<!DOCTYPE html> <html> <head> &n
비활성화(disabled)된 모든 <input> 요소에 스타일을 지정하려면 CSS의 :disabled 선택자를 사용하면 됩니다. 이 선택자는 disabled 속성이 설정된 폼 요소만 정확히 찾아내어 원하는 스타일을 적용할 수 있도록 도와줍니다.반대로 활성화된 요소에는 :enabled 선택자를 사용할 수 있습니다. 두 선택자를 함께 활용하면 입력 가능한 필드와 비활성화된 필드를 시각적으로 명확하게 구분할 수 있어 폼의 가독성과 사용자 경험이 크게 향상됩니다.예제 코드다음 코드에서는 활성화된 입력 필드는 파란색 배경으로, 비
웹 폼을 만들다 보면 사용자가 조작할 수 없는 비활성화(disabled) 상태의 입력 필드가 필요한 경우가 많습니다. 이럴 때 CSS의 :disabled 선택자를 사용하면 비활성화된 모든 <input> 요소에 별도의 스타일을 손쉽게 적용할 수 있습니다.:disabled 선택자란?:disabled는 가상 클래스(pseudo-class) 선택자로, HTML 요소에 disabled 속성이 설정되어 있을 때 해당 요소를 대상으로 스타일을 지정합니다. 반대로 활성화된 요소를 선택하려면 :enabled 선택자를 함께 사용하면 됩니다
CSS overflow: visible이란?CSS에서 overflow: visible을 지정하면 요소의 크기를 벗어나는 콘텐츠가 잘리지 않고 그대로 화면에 표시됩니다. visible은 overflow 속성의 기본값으로, 별도로 설정하지 않아도 모든 요소에 기본적으로 적용됩니다.즉, div의 너비나 높이보다 내용이 길더라도 해당 영역 밖으로 삐져나온 상태로 렌더링되며, 스크롤바가 생성되거나 콘텐츠가 숨겨지지 않습니다.overflow: visible 주요 특징콘텐츠 잘림 없음: 요소 경계를 넘는 텍스트나 이미지가 그대로 보입니다.스크롤
CSS의 overflow: hidden 속성은 요소의 크기를 벗어나 넘쳐나는 콘텐츠를 잘라내어(clipping) 화면에 보이지 않도록 처리합니다. 스크롤바조차 생성되지 않기 때문에, 지정된 영역을 초과한 부분은 완전히 숨겨진 상태로 유지됩니다. overflow: hidden의 동작 원리 요소에 고정된 width와 height 값이 설정되어 있고, 그 안의 내용이 해당 크기를 초과하면 초과된 부분은 브라우저에 의해 잘려 나타나지 않습니다. 이는 콘텐츠가 삭제되는 것이 아니라 단순히 시각적으로 가려지는 것이라는 점이 특징입니다. 아래
CSS의 overflow 속성에 scroll 값을 사용하면, 요소 밖으로 넘친 콘텐츠는 잘리지만 스크롤바가 자동으로 추가됩니다. 덕분에 사용자는 스크롤을 움직여 숨겨진 부분을 포함한 전체 내용을 끝까지 읽을 수 있습니다.overflow: scroll의 특징넘쳐나는(overflow) 콘텐츠는 지정된 영역 밖으로 표시되지 않고 잘립니다.콘텐츠 길이와 관계없이 가로·세로 스크롤바가 항상 표시됩니다.필요할 때만 스크롤바를 보여주고 싶다면 overflow: auto를 사용하는 것이 좋습니다.예제 코드아래 코드를 실행하면 overflow: s
CSS에서 :only-child 선택자를 사용하면 부모 요소의 유일한 자식으로 존재하는 모든 <p> 요소에 스타일을 적용할 수 있습니다.:only-child 선택자는 형제 요소가 하나도 없이 단독으로 존재하는 요소만 선택합니다. 따라서 여러 개의 <p> 태그가 함께 있는 경우에는 스타일이 적용되지 않고, 오직 하나뿐인 <p> 태그에만 배경색 등의 스타일이 지정됩니다.예제 코드아래 코드를 실행하면 :only-child 선택자가 어떻게 동작하는지 확인할 수 있습니다.<!DOCTYPE html>
CSS에서 overflow: auto 속성은 overflow: scroll과 달리, 콘텐츠가 요소의 크기를 초과하여 넘칠 때만 스크롤바를 자동으로 표시합니다. 즉, 내용이 잘 맞으면 스크롤바가 나타나지 않고, 내용이 넘치는 경우에만 스크롤바가 생성되므로 화면 공간을 효율적으로 활용할 수 있습니다.overflow: auto와 overflow: scroll의 차이두 속성 모두 넘치는 콘텐츠를 처리한다는 점에서 비슷하지만, 동작 방식에는 분명한 차이가 있습니다.overflow: scroll – 콘텐츠 양과 상관없이 항상 스크롤바를 표시합
CSS의 overflow-y 속성은 요소 안의 콘텐츠가 위·아래(세로) 방향으로 영역을 벗어났을 때 이를 어떻게 처리할지 지정하는 속성입니다. 예를 들어 scroll 값을 적용하면 세로 스크롤바가 표시되고, hidden 값을 적용하면 넘치는 부분이 잘려서 보이지 않게 됩니다.overflow-y의 주요 값visible – 기본값으로, 넘치는 콘텐츠가 그대로 밖으로 표시됩니다.hidden – 세로 방향으로 넘치는 부분이 잘려 보이지 않습니다.scroll – 콘텐츠 양과 관계없이 항상 세로 스크롤바가 나타납니다.auto – 콘텐츠가 넘칠
CSS의 overflow-x 속성은 콘텐츠가 요소의 왼쪽·오른쪽 경계를 벗어났을 때 이를 어떻게 처리할지 지정하는 속성입니다. 가로 방향으로 넘치는 내용을 숨기거나, 스크롤바를 표시하거나, 그대로 노출할 수 있어 고정 폭 레이아웃이나 반응형 디자인에서 특히 유용하게 활용됩니다. overflow-x의 주요 값 visible – 기본값으로, 넘친 콘텐츠가 요소 밖으로 그대로 표시됩니다. hidden – 경계를 벗어난 부분이 잘려서 보이지 않습니다. scroll – 콘텐츠 길이와 관계없이 항상 가로 스크롤바가 표시됩니다. auto –
CSS의 float 속성을 사용하면 요소를 왼쪽이나 오른쪽으로 배치하여 텍스트와 함께 정렬할 수 있습니다. float는 원래 이미지 주변에 텍스트를 흐르게 하기 위해 만들어졌지만, 현재도 레이아웃 배치에 널리 활용되고 있습니다.float 속성의 주요 값left – 요소를 부모 컨테이너의 왼쪽에 배치합니다.right – 요소를 부모 컨테이너의 오른쪽에 배치합니다.none – 기본값으로, 요소가 정상적인 문서 흐름을 따릅니다.아래 예제에서는 float: right;를 적용하여 div 요소를 화면 오른쪽으로 정렬했습니다.예제 코드<
CSS에서 요소를 세로 방향으로 중앙에 배치하고 싶다면, 가장 간단한 방법 중 하나는 위쪽(top)과 아래쪽(bottom) 패딩(padding)을 활용하는 것입니다. 요소의 상하에 동일한 여백을 주면 내용이 자연스럽게 수직 중앙에 위치하게 됩니다.예제 코드아래 코드를 실행하면 div 요소가 세로로 중앙 정렬되는 것을 확인할 수 있습니다.<!DOCTYPE html> <html> <head> <style> &
CSS에서 자식 선택자(child selector)는 특정 요소의 직계 자식에 해당하는 모든 요소를 선택하고 싶을 때 사용합니다. 자식 선택자는 부모 선택자와 자식 선택자 사이에 > 기호를 넣어 표현하며, 기본 형태는 다음과 같습니다.div > p위 선택자는 div 요소의 바로 아래 단계에 있는 p 요소만 선택합니다. 중요한 점은 손자 요소처럼 더 깊은 단계에 있는 후손은 선택되지 않는다는 것입니다. 이 점이 하위 요소 전체를 선택하는 후손 선택자(div p)와의 가장 큰 차이입니다.예제다음 코드를 실행하면 CSS 자식
웹 페이지에서 일반 텍스트 링크보다 눈에 잘 띄는 버튼 형태의 링크를 만들고 싶다면 CSS만으로 간단하게 구현할 수 있습니다. 이 글에서는 <a> 태그에 배경색, 테두리(border), 패딩(padding) 등을 적용해 마치 진짜 버튼처럼 보이는 링크 버튼을 만드는 방법을 소개합니다.CSS 링크 버튼의 핵심 원리링크를 버튼처럼 보이게 하려면 다음 속성들을 조합하면 됩니다.border: 버튼의 외곽선을 그려 테두리가 있는 모양을 만듭니다.padding: 텍스트 주변에 여백을 주어 버튼 크기를 키웁니다.display: inl
CSS의 :nth-last-child(n) 선택자를 사용하면 부모 요소의 자식들 중에서 마지막 자식부터 거꾸로 세어 해당 위치에 있는 모든 <p> 요소를 간편하게 스타일링할 수 있습니다. 아래 예제 코드를 직접 실행하며 동작 방식을 확인해 보세요.:nth-last-child(n) 선택자란?:nth-last-child(n)는 CSS의 구조적 가상 클래스(Structural Pseudo-class) 중 하나로, 형제 요소들 사이에서 끝에서 n번째에 위치하는 요소를 선택합니다. 일반적인 :nth-child(n)가 앞에서부터 순