CSS를 활용하면 이미지 파일 없이도 스마트폰, 태블릿, 노트북과 같은 실제 기기의 외형을 화면에 그대로 재현할 수 있습니다. 핵심은 border(테두리) 속성인데, 두꺼운 테두리를 기기의 베젤처럼 활용하고 border-radius로 둥근 모서리를 표현하는 방식입니다.기기 모양 구현 원리아래 예제에서 사용된 주요 CSS 속성은 다음과 같습니다.border: 16px solid — 좌우 얇은 베젤을 표현합니다.border-top-width: 60px; border-bottom-width: 60px; — 상하 테두리를 두껍게 하여 스마
HTML에서 contenteditable 속성을 사용하면 사용자가 직접 텍스트를 수정할 수 있는 편집 가능한 요소를 만들 수 있습니다. 하지만 이러한 요소를 클릭하면 기본적으로 파란색 외곽선(outline)이 나타나 디자인을 해치는 경우가 많습니다.이때 CSS의 outline 속성을 활용하면 간단하게 테두리를 제거할 수 있습니다. 핵심 코드는 다음과 같습니다.[contenteditable] { outline: 0px solid transparent; }위 코드는 outline: none;과 동일한 효과를 내며, 모든 conte
웹 폼을 디자인할 때 입력 필드의 플레이스홀더(placeholder) 텍스트 색상을 기본 회색 대신 원하는 색으로 바꾸고 싶은 경우가 많습니다. CSS에서는 ::placeholder 가상 요소(pseudo-element)를 사용하면 간단하게 해결할 수 있습니다.다만 브라우저마다 지원 방식이 다르기 때문에, 크로스 브라우징을 위해 아래처럼 표준 선택자와 함께 인터넷 익스플로러(IE), 엣지(Edge)용 벤더 접두사 선택자를 함께 작성해 주는 것이 좋습니다.::placeholder — 표준 가상 요소 (크롬, 파이어폭스, 사파리 등 대
웹 페이지에서 스크롤을 내릴 때 헤더가 자연스럽게 작아지는 효과는 사용자 경험을 개선하는 대표적인 UI 기법입니다. CSS의 transition 속성과 JavaScript의 스크롤 이벤트를 함께 활용하면 손쉽게 구현할 수 있습니다. 아래 예제 코드를 통해 자세히 알아보겠습니다.전체 예제 코드<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"
CSS만으로 반응형 가격표 구현하기가격표(Pricing Table)는 요금제나 멤버십 플랜을 사용자에게 한눈에 비교해 보여주는 대표적인 UI 요소입니다. CSS의 float 레이아웃과 미디어 쿼리(Media Query)를 활용하면 별도의 JavaScript 없이도 화면 크기에 따라 자동으로 배치가 조절되는 반응형 가격표를 손쉽게 만들 수 있습니다.핵심 원리는 다음과 같습니다.각 가격표 컬럼에 width: 50%를 지정해 데스크톱에서는 두 개가 나란히 배치되도록 합니다.미디어 쿼리로 화면 너비가 600px 이하일 때 width: 10
CSS의 background-attachment: fixed 속성을 활용하면 자바스크립트 없이도 간단하게 시차 스크롤(패럴랙스) 효과를 구현할 수 있습니다. 핵심 원리는 배경 이미지를 화면에 고정해 두고, 콘텐츠 영역만 위로 스크롤되도록 하는 것입니다. 이렇게 하면 페이지를 내릴 때 배경은 그대로 머물러 있는 반면 텍스트는 흘러가기 때문에 깊이감 있는 시각적 효과가 연출됩니다.예제 코드<!DOCTYPE html> <html> <head> <meta name="viewport"
CSS로 요소의 종횡비 유지하기웹 페이지에서 이미지, 비디오, 카드 레이아웃 등은 화면 크기가 변하더라도 일정한 종횡비(aspect ratio), 즉 가로세로 비율을 유지해야 하는 경우가 많습니다. 예를 들어 16:9 동영상 플레이어나 1:1 정사각형 썸네일이 대표적입니다.CSS에서 종횡비를 유지하는 대표적인 방법은 두 가지입니다. 하나는 전통적으로 널리 쓰인 padding-top 퍼센트 기법이고, 다른 하나는 최신 브라우저에서 지원되는 aspect-ratio 속성입니다.방법 1: padding-top 퍼센트 기법padding의 백
JavaScript를 사용하면 몇 줄의 코드만으로 다크 모드와 라이트 모드를 자유롭게 전환할 수 있습니다. 핵심 원리는 버튼 클릭 시 document.body 요소에 미리 정의해 둔 CSS 클래스를 추가하거나 제거하는 것입니다. 아래 예제를 통해 그 구현 과정을 자세히 살펴보겠습니다. 핵심 동작 원리 이 기능은 크게 세 단계로 구성됩니다. 기본 스타일 정의: 라이트 모드(흰색 배경, 검은색 글자)를 body의 기본 스타일로 지정합니다. 다크 모드 클래스 작성: .dark-mode 클래스에 검은색 배경과 흰색 글자 스타일을 정의
웹 페이지에서 파일 탐색기처럼 계층 구조를 보여주고 싶다면 트리 뷰(Tree View)가 유용한 UI 요소입니다. CSS와 JavaScript만으로도 별도의 라이브러리 없이 클릭 시 노드를 펼치고 접을 수 있는 트리 뷰를 손쉽게 구현할 수 있습니다.이 글에서는 중첩된 <ul>, <li> 목록과 간단한 JavaScript 이벤트 처리를 활용해 트리 뷰를 만드는 전체 과정을 예제와 함께 살펴보겠습니다.전체 예제 코드<!DOCTYPE html> <html> <head> <meta
CSS로 마우스 오버 시 요소 확대(Zoom)하기CSS에서는 :hover 가상 클래스와 transform 속성을 조합하면, 마우스 커서를 요소 위에 올렸을 때 해당 요소를 부드럽게 확대하거나 축소할 수 있습니다.핵심 원리는 간단합니다. 기본 상태의 요소에 transition 속성으로 애니메이션 효과를 미리 지정해 두고, :hover 상태에서 transform: scale() 값으로 크기를 변경하면 됩니다. 이렇게 하면 갑작스럽게 크기가 변하는 것이 아니라 자연스러운 전환 효과가 적용됩니다.예제 코드<!DOCTYPE html&g
CSS의 3D 변환(transform) 속성을 활용하면 자바스크립트 없이도 마우스를 올렸을 때 앞면과 뒷면이 뒤집히는 플립 카드(Flip Box) 효과를 쉽게 만들 수 있습니다. 핵심은 perspective, transform-style: preserve-3d, 그리고 backface-visibility 세 가지 속성입니다.전체 예제 코드<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-
CSS에서 요소를 세로 및 가로 방향으로 가운데 정렬하는 것은 웹 개발에서 자주 마주치는 작업입니다. 과거에는 여러 가지 번거로운 기법이 필요했지만, 현재는 Flexbox(플렉스박스)를 사용하면 단 몇 줄의 코드로 손쉽게 해결할 수 있습니다.핵심 원리: Flexbox 활용하기가운데 정렬의 핵심은 부모 컨테이너에 다음 세 가지 속성을 적용하는 것입니다.display: flex; — 해당 요소를 플렉스 컨테이너로 지정합니다.justify-content: center; — 가로 방향(주축)으로 자식 요소를 중앙에 배치합니다.align-i
CSS를 사용해 버튼을 수직 및 수평으로 가운데 정렬하려면 Flexbox(플렉스박스) 레이아웃을 활용하는 것이 가장 간단하고 효과적인 방법입니다. 부모 요소에 display: flex를 지정한 후, justify-content와 align-items 속성을 center로 설정하기만 하면 됩니다.핵심 속성 살펴보기display: flex — 해당 요소를 플렉스 컨테이너로 만들어 자식 요소의 정렬을 제어할 수 있게 합니다.justify-content: center — 자식 요소를 가로 방향(주축) 기준으로 중앙에 배치합니다.align-
CSS의 text-shadow 속성과 @keyframes 애니메이션을 활용하면 별도의 이미지나 JavaScript 없이도 부드럽게 깜빡이는 빛나는 텍스트(Glowing Text) 효과를 쉽게 구현할 수 있습니다. 아래 예제 코드를 확인해 보세요.예제 코드<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>
웹페이지 하단에 항상 고정되어 있는 푸터(fixed/sticky footer)는 스크롤을 내려도 화면 아래쪽에 계속 머물러야 하는 요소입니다. CSS의 position: fixed 속성을 활용하면 간단하게 구현할 수 있습니다.핵심 원리고정 푸터를 만들 때 가장 중요한 속성은 다음과 같습니다.position: fixed; — 요소를 뷰포트 기준으로 고정시킵니다.bottom: 0; left: 0; — 화면의 맨 아래, 맨 왼쪽에 배치합니다.width: 100%; — 화면 전체 너비를 차지하도록 설정합니다.전체 예제 코드<!DOCT
CSS 고정(sticky) 요소란?CSS의 position: sticky 속성을 사용하면 페이지를 스크롤할 때 특정 지점까지는 일반적인 흐름을 따르다가, 지정된 위치에 도달하면 화면에 고정되는 요소를 만들 수 있습니다. 주로 내비게이션 바나 헤더를 구현할 때 많이 활용됩니다.sticky 요소를 만들려면 반드시 top, bottom, left, right 중 하나 이상의 값을 함께 지정해야 한다는 점을 기억하세요.예제 코드다음은 CSS로 고정(sticky) 요소를 만드는 전체 예제입니다.<!DOCTYPE html> <
웹 페이지 레이아웃을 만들다 보면 여러 개의 열(column)이 내용의 길이와 상관없이 항상 같은 높이를 유지하도록 만들어야 하는 경우가 자주 있습니다. CSS에서는 display: table 속성을 활용하면 간단하게 이를 구현할 수 있습니다.CSS로 동일한 높이의 열 만들기핵심 원리는 다음과 같습니다.부모 컨테이너에 display: table을 적용합니다.각 열에 display: table-cell을 적용합니다.테이블 셀은 기본적으로 같은 행 안에서 서로 높이가 맞춰지는 특성이 있기 때문에, 별도의 JavaScript 없이도 순수
CSS에서 요소에 float 속성을 적용하면 부모 컨테이너가 자식 요소의 높이를 인식하지 못해 레이아웃이 무너지는 문제가 발생할 수 있습니다. 이때 clearfix 핵(hack)을 사용하면 별도의 추가 마크업 없이도 플로트된 요소를 깔끔하게 정리(clear)할 수 있습니다.clearfix란 무엇인가?clearfix는 플로트된 자식 요소 때문에 부모 요소의 높이가 0으로 계산되는 문제를 해결하는 기법입니다. 가장 간단한 방법은 부모 요소에 overflow: auto; 또는 overflow: hidden;을 적용하는 것입니다. 이렇게
CSS의 float 속성과 미디어 쿼리를 함께 활용하면 화면 크기에 따라 요소의 위치가 자동으로 바뀌는 반응형 플로팅 레이아웃을 손쉽게 구현할 수 있습니다.핵심 개념 이해하기플로팅(float)은 요소를 좌측 또는 우측으로 배치하여 주변 텍스트가 자연스럽게 흐르도록 하는 CSS 기법입니다. 여기에 @media 쿼리를 추가하면 특정 화면 너비 조건에서 플로트 방향을 전환할 수 있어, 데스크톱과 모바일 환경 모두에서 최적화된 레이아웃을 제공합니다.예제 코드다음 코드는 화면 너비가 768px 이하로 줄어들면 플로팅 요소들의 위치가 서로 교
CSS만으로 부드러운 스크롤(smooth scrolling) 효과를 구현하는 방법을 소개합니다. 핵심은 바로 scroll-behavior 속성입니다.CSS 부드러운 스크롤이란?scroll-behavior: smooth; 속성을 html 요소에 적용하면, 앵커 링크(예: #secondSection)를 클릭했을 때 페이지가 순간적으로 점프하지 않고 자연스럽게 스크롤되며 목표 위치로 이동합니다. 별도의 JavaScript 없이 순수 CSS만으로 구현할 수 있어 매우 간편합니다.예제 코드<!DOCTYPE html> <htm