방문한 모든 링크에 스타일을 적용하려면 CSS의 :visited 선택자를 사용하면 됩니다. 이 선택자는 사용자가 이미 클릭하여 방문한 적이 있는 링크만 대상으로 하며, 방문 여부에 따라 글자 색상, 배경색 등을 다르게 표현할 수 있습니다.기본 문법:visited 선택자는 다음과 같이 a 태그와 함께 사용합니다.a:visited { color: purple; }예제아래 코드를 실행하면 :visited 선택자가 실제로 어떻게 동작하는지 확인할 수 있습니다. 일반 링크와 방문한 링크는 흰색 배경에 검은 글자와 파란 테두리로 표시되며,
웹 페이지에서 배경색의 투명도를 조절하고 싶다면 RGBA 색상 값을 사용하는 것이 가장 간단하고 효과적인 방법입니다. RGBA는 기존 RGB 색상에 알파(Alpha) 채널을 추가한 형식으로, 마지막 네 번째 값이 요소의 불투명도를 결정합니다.RGBA 색상 값의 기본 구조RGBA 값은 아래와 같은 형식으로 작성합니다.rgba(red, green, blue, alpha)알파 값은 0부터 1 사이의 숫자로 지정하며, 0은 완전히 투명, 1은 완전히 불투명을 의미합니다. 예를 들어 0.2로 지정하면 20% 불투명(80% 투명) 상태가 됩니
CSS에서 투명한 상자를 만들려면 opacity 속성을 사용하면 됩니다. opacity 값은 0(완전히 투명)부터 1(완전히 불투명) 사이의 숫자로 지정하며, 값이 작을수록 요소가 더 투명하게 보입니다.아래 예제는 두 개의 div 박스를 만들어 하나는 opacity: 0.4로 반투명하게 처리하고, 다른 하나는 기본값인 opacity: 1(불투명 상태)으로 두어 차이를 비교할 수 있도록 구성한 코드입니다.예제 코드<!DOCTYPE html> <html> <head>
내비게이션 바에서 현재 머무르고 있는 페이지의 링크를 강조하려면 .active 클래스에 스타일을 지정하면 됩니다. 강조하고 싶은 메뉴 항목의 <a> 태그에 class=active를 추가한 뒤, CSS에서 해당 클래스에 배경색과 글자색 등을 설정하면 사용자가 자신이 어떤 페이지에 있는지 한눈에 파악할 수 있어 웹사이트의 사용성이 크게 향상됩니다. 예제 <!DOCTYPE html> <html> <head> <style>
CSS로 수직 탐색 모음 만들기 웹사이트에서 세로 형태의 탐색 모음(내비게이션 바)을 만들 때는 HTML 목록 태그와 CSS를 조합하면 아주 간단하게 구현할 수 있습니다. 별도의 이미지나 자바스크립트 없이 순수 CSS만으로 깔끔한 세로 메뉴를 완성할 수 있습니다. 핵심 CSS 속성 이해하기 list-style-type: none — 목록 앞에 기본으로 표시되는 불릿(•) 기호를 제거하여 메뉴처럼 보이게 합니다. margin / padding — 브라우저가 목록에 기본적으로 적용하는 여백을 조절해 레이아웃을 정돈합니다. displa
CSS에서 border-top 속성을 사용하면 요소의 상단 테두리와 관련된 모든 속성을 하나의 선언으로 간편하게 설정할 수 있습니다.border-top 속성이란?border-top은 다음 세 가지 하위 속성을 축약형(shorthand)으로 한꺼번에 지정할 수 있는 단축 속성입니다.border-top-width — 상단 테두리의 두께border-top-style — 상단 테두리의 스타일(solid, dashed, dotted 등)border-top-color — 상단 테두리의 색상속성 값은 border-top: 두께 스타일 색상; 순
웹 페이지에서 스크롤을 내려도 배경 이미지가 화면에 그대로 고정되어 있도록 만들고 싶다면 background-attachment 속성을 사용하면 됩니다. 이 속성의 값을 fixed로 설정하면 페이지가 스크롤되더라도 배경 이미지는 뷰포트(브라우저 화면)를 기준으로 고정되어 표시됩니다.background-attachment 주요 속성값scroll: 기본값으로, 페이지를 스크롤하면 배경 이미지도 함께 움직입니다.fixed: 뷰포트를 기준으로 배경 이미지가 고정되어, 콘텐츠가 스크롤되어도 이미지는 제자리에 머뭅니다.local: 요소 내부의
내비게이션 바 전체에 테두리를 추가하려면 메뉴 항목을 감싸고 있는 <ul> 요소에 border 속성을 설정하면 됩니다. 아래 예시처럼 테두리의 두께, 스타일, 색상을 한 번에 지정할 수 있습니다.ul { border: 2px solid blue; }전체 예제 코드아래 코드를 실행하면 파란색 테두리가 적용된 세로형 내비게이션 바를 확인할 수 있습니다.<!DOCTYPE html> <html> <head> <style> ul {
CSS의 :read-write 선택자를 사용하면 readonly 속성이 없는, 즉 사용자가 자유롭게 값을 입력하거나 수정할 수 있는 요소만 골라서 스타일을 적용할 수 있습니다.:read-write 선택자란?:read-write 선택자는 편집 가능한 상태의 폼 요소(input, textarea 등)를 대상으로 합니다. 반대로 readonly 속성이 설정된 읽기 전용 요소나 disabled 속성이 있는 요소에는 적용되지 않으므로, 입력 가능한 필드와 그렇지 않은 필드를 시각적으로 구분할 때 매우 유용합니다.예제 코드아래 예제에서는 :r
CSS의 :required 선택자는 HTML 폼에서 required 속성이 지정된 <input> 요소에만 특별한 스타일을 적용할 수 있는 강력한 도구입니다. 이 선택자를 활용하면 사용자가 반드시 입력해야 하는 필드를 시각적으로 강조하여, 폼 작성 시 어떤 항목이 필수인지 한눈에 알 수 있도록 유도할 수 있습니다.:required 선택자란?:required는 의사 클래스(pseudo-class) 선택자로, required 속성을 가진 입력 요소를 자동으로 감지합니다. 반대로 필수가 아닌 입력 필드를 대상으로 하려면 :opt
CSS의 position: sticky; 속성을 사용하면 스크롤 위치를 기준으로 요소의 위치를 지정할 수 있습니다. 사용자가 페이지를 아래로 스크롤할 때 특정 요소가 화면 상단에 고정되어 따라오도록 만들 수 있어, 내비게이션 바나 섹션 제목을 고정하는 데 자주 활용됩니다. sticky 동작 원리 sticky는 relative와 fixed의 중간 성격을 가진 속성입니다. 일반적인 문서 흐름 안에서는 relative처럼 동작하지만, 스크롤이 지정된 임계점(top, bottom 등)에 도달하면 fixed처럼 화면에 고정됩니다. 주의할 점
CSS :required 선택자란?CSS의 :required 선택자는 HTML 폼에서 required(필수) 속성이 설정된 <input> 요소에만 특정 스타일을 적용하는 의사 클래스(pseudo-class)입니다. 이 선택자를 활용하면 사용자가 반드시 입력해야 하는 필드를 시각적으로 강조하여, 어떤 항목이 필수인지 한눈에 알 수 있도록 도울 수 있습니다.예를 들어 필수 입력란의 배경색을 변경하면 사용자 경험이 크게 향상되며, 별도의 JavaScript 없이 순수 CSS만으로 구현할 수 있다는 장점이 있습니다.사용 예제아래
CSS의 :root 선택자는 HTML 문서의 최상위(root) 요소를 선택하여 스타일을 적용하는 데 사용됩니다. HTML 문서에서 루트 요소는 항상 <html> 태그이므로, 이 선택자를 활용하면 문서 전체에 영향을 주는 기본 스타일을 손쉽게 설정할 수 있습니다.:root 선택자란?:root 선택자는 문서 트리의 루트 요소를 가리키는 의사 클래스(pseudo-class)입니다. 특히 다음과 같은 경우에 유용하게 활용됩니다.문서 전체의 기본 배경색, 글자색 등 글로벌 스타일 지정CSS 변수(Custom Properties)를
HTML 문서에서 최상위(루트) 요소를 스타일링하려면 CSS의 :root 선택자를 사용하면 됩니다. :root는 문서 트리의 루트 요소, 즉 HTML 문서에서는 <html> 요소를 가리킵니다.:root 선택자란?:root는 가상 클래스(pseudo-class)로, 문서의 최상위 요소를 선택합니다. HTML 문서에서 루트 요소는 항상 <html>이므로, 사실상 html 타입 선택자와 같은 대상을 가리키지만 두 가지 중요한 차이점이 있습니다.명시도(specificity)가 더 높습니다. :root는 클래스 선택자와
CSS의 :target 선택자를 사용하면 URL의 해시(#) 조각과 일치하는 HTML 앵커 요소, 즉 현재 활성화된 대상 요소에 스타일을 적용할 수 있습니다. 페이지 내 링크를 클릭해 특정 섹션으로 이동했을 때 해당 섹션을 시각적으로 강조하고 싶다면 :target 선택자가 가장 간단한 해결책입니다.:target 선택자란?:target은 의사 클래스(pseudo-class)로, 문서 URL에서 # 뒤에 오는 식별자와 ID가 일치하는 요소를 선택합니다. 예를 들어 URL이 page.html#section1이라면 id=section1을
CSS의 :not(selector) 선택자를 사용하면 지정된 요소를 제외한 나머지 모든 요소에 한 번에 스타일을 적용할 수 있습니다. :not은 부정(negation) 의사 클래스로, 괄호 안에 작성한 선택자와 일치하지 않는 요소들만 골라내는 역할을 합니다.:not 선택자 예제아래 코드는 :not 선택자를 실제로 적용한 예제입니다. 모든 문단(<p>)은 빨간색으로, 그 외의 요소(<h1>, <h2>, <h3> 등)는 파란색으로 표시됩니다.<!DOCTYPE html> <htm
웹 페이지에서 링크를 클릭했을 때 해당 섹션이 시각적으로 강조되면 사용자 경험이 크게 향상됩니다. HTML 앵커(Anchor)로 이동한 현재 위치를 CSS만으로 간단하게 하이라이트하려면 :target 선택자를 사용하면 됩니다.:target 선택자란?:target은 URL의 조각 식별자(fragment identifier, 예: #tut1)와 일치하는 ID를 가진 요소가 현재 대상이 될 때 적용되는 CSS 의사 클래스입니다. 즉, 사용자가 페이지 내 앵커 링크를 클릭해 특정 요소로 이동하면, 그 요소에 자동으로 스타일이 적용됩니다.예
CSS의 :valid 선택자는 폼 컨트롤 요소가 유효성 검사를 통과한 상태일 때 스타일을 적용하는 의사 클래스(pseudo-class)입니다. 이를 활용하면 사용자가 올바른 형식의 값을 입력했는지 실시간으로 시각적으로 피드백할 수 있습니다.:valid 선택자란?:valid 선택자는 주로 <input>, <textarea>, <select> 같은 폼 요소에 사용되며, 입력된 값이 해당 요소의 유효성 조건(예: 이메일 형식, 필수 입력 여부 등)을 만족하면 지정한 스타일이 자동으로 적용됩니다.반대로 유효
CSS의 :only-of-type 선택자는 부모 요소 안에서 해당 타입(예: <p>)으로 유일한 자식 요소에만 스타일을 적용할 때 사용합니다. 즉, 형제 요소 중 같은 태그가 하나도 없는 경우에만 선택됩니다.:only-of-type 선택자란?:only-of-type은 지정한 타입과 동일한 형제 요소가 존재하지 않는 요소를 선택합니다. 예를 들어 어떤 <div> 안에 <p>가 단 하나뿐이라면 그 <p>에 스타일이 적용되지만, 같은 <div> 안에 <p>가 여러 개 있다면
CSS의 :only-of-type 선택자를 사용하면, 부모 요소 내부에서 자신과 같은 유형(태그)이 하나뿐인 <p> 요소에만 스타일을 적용할 수 있습니다. 즉, 같은 부모 아래에 다른 <p> 형제 요소가 존재하지 않는 경우에만 해당 선택자가 매칭됩니다. 예제 :only-of-type 선택자를 직접 확인해 보려면 아래 코드를 실행해 보세요. 첫 번째 <div> 안에는 <p>가 하나뿐이므로 스타일이 적용되고, 두 번째 <div>에는 <p>가 여러 개 있으므로 어떤 요소에도