CSS에서 의사 요소(Pseudo-elements)는 HTML 요소에 직접 적용할 수 있을 뿐만 아니라, CSS 클래스에도 함께 적용할 수 있습니다. 이를 활용하면 특정 클래스를 가진 여러 요소에 일관된 스타일 효과를 손쉽게 부여할 수 있습니다.핵심 개념 정리의사 요소와 클래스를 조합하면 다음과 같은 장점이 있습니다.::selection — 사용자가 텍스트를 드래그하여 선택했을 때의 배경색과 글자색을 지정합니다.:nth-child() — 부모 요소 안에서 몇 번째 자식인지에 따라 스타일을 다르게 적용할 수 있습니다.클래스 선택자와
CSS 앵커 의사 클래스(Pseudo Classes)란? CSS에서는 의사 클래스 선택자인 :link, :visited, :hover, :active를 사용하여 링크(앵커)의 각 상태별로 서로 다른 스타일을 지정할 수 있습니다. 이를 활용하면 사용자가 링크와 상호작용하는 순간마다 시각적인 피드백을 제공할 수 있어, 웹 페이지의 사용성과 디자인 완성도가 크게 향상됩니다. 네 가지 의사 클래스가 의도한 대로 정확하게 작동하려면 선언 순서가 매우 중요합니다. 반드시 아래의 순서(LVHA 순서)대로 작성해야 합니다. :link — 아직
CSS의 z-index 속성을 활용하면 개발자는 여러 요소를 서로 겹쳐 쌓을 수 있습니다. z-index 값은 양수 또는 음수 모두 지정할 수 있으며, 값이 클수록 화면 앞쪽(위쪽)에 배치됩니다.참고 − 겹치는 요소들에 z-index가 지정되어 있지 않다면, 문서에서 마지막에 작성된 요소가 가장 위에 표시됩니다. 또한 z-index는 position: absolute;, relative;, fixed;, sticky; 등 위치 속성이 설정된 요소에서만 동작한다는 점도 기억해 두세요.그럼 z-index 속성의 예제를 살펴보겠습니다 −
CSS의 ::first-line 가상 요소(pseudo element)는 요소 콘텐츠의 첫 번째 줄만 선택하여 스타일을 적용할 수 있는 강력한 선택자입니다. 문단의 첫 줄만 강조하고 싶을 때 유용하게 활용됩니다.다만 주의할 점이 있습니다. 텍스트를 감싸고 있는 요소의 너비가 고정되어 있지 않다면, 브라우저 창 크기에 따라 한 줄에 들어가는 텍스트의 양이 달라지므로 첫 번째 줄의 길이도 함께 변하게 됩니다.::first-line 기본 예제먼저 p 태그의 첫 번째 줄에 배경색과 글자색을 적용하는 간단한 예제를 살펴보겠습니다.<!D
CSS의 @import 규칙은 외부 스타일시트를 현재 문서로 불러올 때 사용하는 at-규칙입니다. 특히 URL 뒤에 미디어 타입을 함께 지정하면, 화면(screen), 인쇄(print) 등 특정 대상 미디어에 맞춰 스타일 정보를 다르게 적용할 수 있습니다.@import 기본 문법@import 규칙의 기본 문법은 다음과 같습니다.@import url(/* 파일 경로 */) 미디어타입 { CSS 코드; }미디어 타입은 생략할 수 있으며, 생략 시 모든 미디어에 스타일이 적용됩니다. 이제 실제
CSS 미디어 유형(Media Types)은 문서가 렌더링되는 기기의 종류를 의미하며, 각 미디어 유형별로 서로 다른 스타일을 지정할 수 있습니다. 예를 들어 같은 웹 페이지라도 컴퓨터 화면에서 볼 때와 프린터로 출력할 때 각각 최적화된 디자인을 적용할 수 있습니다.CSS3 및 Media Queries 4에서 지원하는 미디어 유형번호값 및 설명1all모든 미디어 유형 기기에 스타일시트를 적용합니다.2print프린터 출력 시 스타일시트를 적용합니다.3screen컴퓨터 화면, 태블릿, 스마트폰 등 화면 기기에 스타일시트를 적용합니다.4
CSS 이미지 스프라이트(Image Sprite)는 웹 페이지에서 사용하는 여러 개의 이미지를 하나의 파일로 합쳐 놓은 결합 이미지입니다. 모든 이미지를 한 번만 로드하면 되므로 HTTP 요청 횟수가 줄어들어 페이지 로딩 속도가 크게 향상됩니다.합쳐진 스프라이트 이미지에서 원하는 부분만 화면에 보여주려면 CSS의 background-position 속성을 활용하면 됩니다. 각 요소에 고유한 좌표 값을 지정함으로써 하나의 큰 이미지 안에서 필요한 영역만 노출시키는 방식입니다.예제 코드<!DOCTYPE html> <ht
CSS의 :last-child 의사 클래스(pseudo-class)는 어떤 부모 요소 안에서 마지막 자식 요소에 해당하는 요소를 선택합니다. 목록의 마지막 항목이나 표의 마지막 열처럼 특정 위치의 요소에만 별도의 스타일을 적용하고 싶을 때 매우 유용하게 활용됩니다.문법(Syntax):last-child 의사 클래스의 기본 문법은 다음과 같습니다.:last-child { /* 선언부 */ }그럼 실제 예제를 통해 CSS :last-child 의사 클래스가 어떻게 동작하는지 살펴보겠습니다.예제
CSS 시각적 서식(Visual Formatting)은 문서 내 각 요소를 처리하고 변환하여, CSS 박스 모델(CSS Box Model)에 부합하는 하나 이상의 박스를 생성하는 알고리즘에 해당하는 모델입니다.CSS 박스 생성 유형처리된 요소는 다음 두 가지 방식으로 박스가 생성됩니다.1. 블록 레벨(Block Level) 요소요소의 위와 아래에서 줄바꿈이 강제로 발생하며, 콘텐츠가 전체 너비를 필요로 하지 않더라도 사용 가능한 전체 너비를 차지합니다.예시: <div>, 제목 태그(<h1> ~ <h6>
CSS float 속성이란?CSS의 float 속성을 사용하면 요소를 부모(컨테이닝) 요소 기준으로 왼쪽(left) 또는 오른쪽(right) 방향으로 띄울 수 있습니다. float가 적용된 요소는 일반적인 문서 흐름에서 벗어나 배치되며, 나머지 요소들은 띄워진 콘텐츠 주위로 자연스럽게 정렬됩니다.또한 동일한 float 값이 적용된 여러 요소는 서로 인접하게 나란히 배치됩니다. 이 특성을 활용하면 이미지 갤러리나 카드 레이아웃처럼 요소를 가로로 나열하는 효과를 쉽게 만들 수 있습니다.예제: 버튼 클릭으로 float 방향 바꾸기아래 예
CSS의 margin(마진) 속성을 활용하면 블록 레벨(block-level) 요소를 손쉽게 수평 가운데 정렬할 수 있습니다. 다만 이 방법이 정상적으로 작동하려면 해당 요소에 width 속성이 반드시 설정되어 있어야 합니다.핵심 원리는 간단합니다. 좌우 마진 값을 auto로 지정하면(margin: 10px auto;), 브라우저가 부모 요소 안의 남은 공간을 좌우로 균등하게 나누어 자동으로 요소를 중앙에 배치합니다. 아래 예제를 통해 직접 확인해 보겠습니다.예제 1: 음양 심볼 가운데 정렬하기<!DOCTYPE html>
CSS에서 font-size 속성에 픽셀(px) 값을 지정하면 텍스트가 정해진 픽셀 수만큼의 크기로 표시됩니다. 픽셀은 화면 해상도와 브라우저가 이를 계산하는 알고리즘을 기준으로 하기 때문에, 대부분의 환경에서 일관되고 예측 가능한 텍스트 크기를 얻을 수 있습니다.기본 문법CSS font-size 속성의 기본 문법은 다음과 같습니다.Selector { font-size: /*값*/; }픽셀 단위로 지정할 때는 값 뒤에 px를 붙입니다. 예를 들어 font-size: 16px;처럼 작성하면
CSS의 table-layout 속성은 브라우저가 테이블의 행(row), 열(column), 셀(cell)을 배치할 때 사용할 알고리즘을 정의합니다. 이 속성을 활용하면 테이블 레이아웃을 세밀하게 제어할 수 있습니다.table-layout 속성의 주요 값auto (기본값): 셀 내용에 따라 열 너비가 자동으로 조정됩니다.fixed: 테이블과 열의 너비가 지정된 값에 고정되며, 셀 내용과 무관하게 레이아웃이 결정됩니다. 렌더링 속도가 빨라지는 장점이 있습니다.문법(Syntax)CSS table-layout 속성의 기본 문법은 다음과
CSS 단위는 글꼴 크기, 문자 크기, 뷰포트(화면) 크기 등 다양한 용도에 따라 여러 종류로 나뉩니다. 크게 절대 단위(Absolute Units)와 상대 단위(Relative Units) 두 가지 범주로 분류할 수 있으며, 각 범주는 앞서 언급한 하위 단위들로 구성됩니다.1. CSS 절대 단위절대 단위는 화면 크기나 다른 요소에 영향을 받지 않고 항상 고정된 물리적 크기를 나타냅니다. 주로 인쇄물 설계나 정확한 크기 지정이 필요한 경우에 사용됩니다.다음은 대표적인 CSS 절대 단위입니다.번호단위 및 이름1cm센티미터 (1cm =
CSS의 empty-cells 속성은 표(table)에서 내용이 없는 빈 셀을 어떻게 표시할지 지정하는 데 사용됩니다. 이 속성을 활용하면 빈 셀의 테두리와 배경을 그대로 보여주거나, 반대로 화면에서 숨길 수 있어 표 디자인을 더 깔끔하게 다듬을 수 있습니다.문법(Syntax)CSS empty-cells 속성의 기본 문법은 다음과 같습니다 −Selector { empty-cells: /*값*/}empty-cells 속성에 사용할 수 있는 값은 다음 두 가지입니다.show (기본값)
CSS 선택자(selector)는 지정된 패턴과 일치하는 요소를 찾아 HTML 요소를 선택하는 데 사용됩니다. 선택자 안에 속성(property)과 값(value)을 선언함으로써 해당 요소에 원하는 스타일을 적용할 수 있습니다.기본 문법CSS에서 스타일을 선언하는 기본 문법은 다음과 같습니다.선택자 { 속성: 값;}CSS는 단순 선택자뿐만 아니라 속성 선택자, 의사 클래스(pseudo-class), 의사 요소(pseudo-element)를 제공하며, 표준 결합자(combinator)를 통해 여러 선택자를 조합할
CSS의 :lang() 가상 클래스는 요소에 지정된 lang 속성 값을 기준으로 해당 요소를 선택하는 선택자입니다. 이를 활용하면 콘텐츠가 어떤 언어로 작성되어 있는지에 따라 서로 다른 스타일을 적용할 수 있어, 다국어 웹사이트를 개발할 때 특히 유용하게 사용됩니다.문법(Syntax):lang() 가상 클래스의 기본 문법은 다음과 같습니다.:lang(언어코드) { /* 스타일 선언 */괄호 안에는 ko(한국어), en(영어), it(이탈리아어), es(스페인어)처럼 BCP 47 표준에 따른
CSS에서 주석(comment)을 활용하면 코드의 가독성을 높이고, 각 선언이 어떤 역할을 하는지 쉽게 파악할 수 있습니다. 특히 여러 사람이 함께 작업하는 프로젝트나 나중에 코드를 다시 수정할 때 주석은 매우 유용합니다.CSS의 주석은 C 언어 스타일의 문법을 따릅니다. 즉, 슬래시와 별표(/* */)로 시작하고 끝나며, 그 사이에 주석 내용을 작성합니다. /* */ 안에 작성된 모든 선언은 브라우저에 의해 무시되며 화면에 아무런 영향을 주지 않습니다.문법(Syntax)CSS 주석의 기본 문법은 다음과 같습니다./*주석 내용*/예
CSS 선택자(Selector)를 사용하면 HTML 문서 안에서 원하는 요소만 골라 자유롭게 스타일을 적용할 수 있습니다. HTML DOM에서 요소를 선택하는 방법은 매우 다양하며, 상황에 맞는 선택자를 활용하면 더욱 효율적이고 체계적인 스타일링이 가능합니다.기본 문법CSS 선택자의 기본 문법은 다음과 같습니다.선택자 { /* 선언부 */ }선택자 뒤에 중괄호({ })를 열고, 그 안에 적용하고 싶은 스타일 속성과 값을 선언하면 됩니다. 아래 예제들을 통해 실제로 CSS 선택자를 활용해 요소를 스타일링하는 방
CSS에서는 요소의 특정 부분만 스타일링할 수 있는 강력한 기능을 제공합니다. 예를 들어 텍스트의 첫 글자(first-letter), 첫 줄(first-line)에 서로 다른 스타일을 적용하거나, 요소의 앞(before)과 뒤(after)에 새로운 콘텐츠를 삽입하는 것이 가능합니다. 이러한 작업을 위해 사용되는 것이 바로 CSS 의사 요소(Pseudo Elements)입니다.참고: CSS3부터는 의사 클래스(Pseudo Classes)와 의사 요소(Pseudo Elements)를 명확히 구분하기 위해, 의사 요소는 이중 콜론(::)