웹 페이지에서 사용자에게 중요한 정보를 전달할 때 경고(알림) 메시지는 매우 유용한 UI 요소입니다. CSS만으로도 별도의 라이브러리 없이 깔끔하고 직관적인 경고 메시지를 만들 수 있습니다. 이번 글에서는 빨간색 배경의 경고 박스와 마우스를 올리면 색이 변하는 닫기(X) 버튼까지 포함된 예제를 살펴보겠습니다.전체 예제 코드아래 코드는 CSS와 약간의 인라인 자바스크립트를 활용해 경고 메시지를 구현한 예제입니다.<!DOCTYPE html> <html> <head> <meta name="v
툴팁(Tooltip)은 사용자가 특정 요소에 마우스를 올렸을 때 추가 정보를 보여주는 작은 팝업 상자입니다. 자바스크립트 없이 CSS만으로도 손쉽게 구현할 수 있으며, :hover 선택자와 opacity, visibility 속성을 활용하면 부드러운 전환 효과까지 적용할 수 있습니다.CSS 툴팁의 핵심 원리CSS 툴팁은 크게 세 가지 요소로 구성됩니다..tooltip — 툴팁이 붙을 기준 요소로, position: relative;를 지정해 기준점 역할을 합니다..toolText — 실제로 화면에 나타나는 말풍선으로, 평소에는 숨겨
CSS의 box-sizing 속성을 활용하면 요소의 너비(width)뿐만 아니라 높이(height)까지 계산 방식을 자유롭게 변경할 수 있습니다. 이 속성은 패딩(padding)과 테두리(border)가 요소의 실제 크기에 어떻게 영향을 주는지를 결정하며, 레이아웃 설계 시 매우 유용하게 사용됩니다.box-sizing 속성이란?기본적으로 CSS에서 요소의 너비는 콘텐츠 영역만을 기준으로 계산됩니다(content-box). 따라서 패딩이나 테두리를 추가하면 실제 화면에 표시되는 요소의 전체 크기가 지정한 너비보다 커지게 됩니다.반면
CSS의 :hover 가상 클래스를 사용하면 마우스 커서를 특정 요소 위에 올렸을 때 숨겨져 있던 요소를 화면에 표시할 수 있습니다. 이 기법은 툴팁이나 추가 설명 텍스트를 구현할 때 매우 유용하게 활용되며, JavaScript 없이 CSS만으로 간단히 처리할 수 있다는 장점이 있습니다.예제 코드<!DOCTYPE html> <html> <head> <style> body{
CSS의 opacity 속성과 :hover 선택자를 함께 사용하면, 마우스를 이미지 위에 올렸을 때(마우스 오버) 불투명도를 아주 간단하게 변경할 수 있습니다. JavaScript 없이 순수 CSS만으로 구현되기 때문에 코드가 가볍고 성능에도 부담이 없습니다.기본 원리opacity 속성은 요소의 불투명도를 결정하며, 값의 범위는 0(완전히 투명)부터 1(완전히 불투명)까지입니다. :hover 선택자는 사용자가 해당 요소에 마우스 포인터를 올려놓는 순간 스타일을 적용해 줍니다. 여기에 transition 속성을 더하면 투명도가 급격히
웹 개발을 하다 보면 지정된 너비보다 긴 단어나 텍스트가 컨테이너 밖으로 삐져나오는 오버플로우(overflow) 현상을 자주 마주하게 됩니다. 이런 문제를 해결하려면 CSS3의 word-wrap 속성을 활용하면 됩니다.word-wrap 속성의 값을 break-word로 설정하면, 단어가 컨테이너 너비를 초과할 경우 강제로 끊어서 다음 줄로 넘겨줍니다. 반면 기본값인 normal은 긴 단어를 끊지 않기 때문에 요소 밖으로 텍스트가 넘쳐 흐르게 됩니다.예제 코드아래 예제는 두 개의 div 요소에 서로 다른 word-wrap 값을 적용하
CSS3의 box-sizing 속성을 활용하면 요소의 크기가 계산되는 방식을 조절할 수 있어 레이아웃 작업이 훨씬 수월해집니다. 특히 border-box와 content-box 값의 차이를 이해하면 패딩이나 테두리로 인해 레이아웃이 깨지는 문제를 효과적으로 방지할 수 있습니다. box-sizing 속성의 두 가지 방식 border-box : 요소의 너비(width)와 높이(height)에 안쪽 여백(padding)과 테두리(border)가 모두 포함됩니다. 지정한 크기 그대로 유지되므로 반응형 레이아웃에서 널리 사용됩니다. cont
HTML과 CSS만으로도 별도의 JavaScript 없이 시각적으로 매력적인 캘린더를 만들 수 있습니다. 이 글에서는 월 표시 영역, 요일 헤더, 날짜 그리드로 구성된 캘린더를 CSS 스타일링으로 구현하는 방법을 예제 코드와 함께 소개합니다. CSS 캘린더의 기본 구조 캘린더는 크게 세 부분으로 나뉩니다. 월(month) 영역 – 현재 월과 연도를 표시하며, 좌우 화살표로 이전/다음 달을 나타냅니다. 요일(Days) 영역 – 월요일부터 일요일까지 요일 이름을 가로로 배치합니다. 날짜(daysNumber) 영역 – 1일부터 말일까지
CSS3는 플렉시블 박스(Flexible Box), 흔히 Flexbox라고 불리는 레이아웃 모드를 제공합니다. Flexbox를 사용하면 복잡한 웹 애플리케이션과 웹 페이지의 레이아웃을 손쉽게 만들 수 있습니다. Flexbox 컨테이너의 주요 속성 Flexbox 레이아웃은 컨테이너(container)와 플렉스 아이템(flex items)으로 구성됩니다. 컨테이너에 적용할 수 있는 대표적인 속성은 다음과 같습니다. flex-direction — 플렉스 아이템이 배치되는 주축(main axis)의 방향을 지정합니다. flex-wrap
CSS를 활용하면 별도의 JavaScript 없이도 화면 크기에 맞춰 자동으로 레이아웃이 조정되는 반응형 타임라인을 손쉽게 만들 수 있습니다. 이 글에서는 중앙에 세로 선이 지나가고, 좌우로 번갈아 배치된 이벤트 카드와 화살표, 마커로 구성된 타임라인을 구현하는 방법을 소개합니다.핵심 구현 원리이 타임라인은 다음과 같은 CSS 기법으로 구성됩니다.· ::after 가상 요소: 타임라인의 중앙 세로선과 각 이벤트의 원형 마커를 그립니다.· ::before 가상 요소: 이벤트 카드에서 중앙 선 방향으로 향하는 삼각형 화살표를 만듭니다.
툴팁(tooltip)은 추가 정보를 표시하는 작은 팝업 상자입니다. 방문자가 마우스 포인터를 특정 요소 위에 올리면 화면에 나타나며, 버튼이나 링크의 기능을 설명하거나 보조 안내를 제공할 때 유용하게 사용됩니다. 자바스크립트 없이 순수 CSS만으로도 간단하게 툴팁을 구현할 수 있습니다. 핵심은 position, visibility 속성과 :hover 가상 클래스를 조합하는 것입니다. CSS 툴팁 예제 코드 다음은 CSS를 사용하여 툴팁을 만드는 전체 코드입니다. <!DOCTYPE html> <html> <
포트폴리오나 이력서 웹사이트에서 자주 볼 수 있는 스킬 바(Skill Bar)는 특정 기술의 숙련도를 시각적으로 표현하는 UI 요소입니다. CSS만으로도 JavaScript 없이 간단하게 만들 수 있으며, 핵심 원리는 다음과 같습니다. 스킬 바의 기본 원리 스킬 바는 크게 두 개의 요소로 구성됩니다. 외부 컨테이너: 전체 진행 막대의 배경 역할을 하며, 회색 계열의 배경색과 둥근 모서리(border-radius)를 적용합니다. 내부 채우기 바: 실제 숙련도를 나타내며, width 속성으로 백분율(%)을 지정하고 색상으로 강조합니다
CSS3에서 opacity 속성을 활용하면 배경 이미지 위에 반투명한 상자를 만들고, 그 안에 가독성 좋은 텍스트를 손쉽게 배치할 수 있습니다. 이 기법은 배경과 텍스트가 겹칠 때 시각적 대비를 확보하는 데 매우 유용합니다.예제 코드<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .tr
CSS3에서 키프레임(keyframe) 애니메이션을 만들려면 개별 키프레임을 정의해야 합니다. 키프레임은 CSS3 애니메이션의 중간 단계를 제어하는 역할을 하며, @keyframes 규칙을 사용해 애니메이션이 시작부터 끝까지 어떻게 변화할지 지정할 수 있습니다.CSS3 키프레임 애니메이션의 기본 구조키프레임 애니메이션은 크게 두 부분으로 구성됩니다.animation 속성: 요소에 적용할 애니메이션의 이름, 지속 시간, 반복 횟수 등을 설정합니다.@keyframes 규칙: 애니메이션의 각 단계별 스타일 변화를 정의합니다.예제 코드다음
CSS 투명도란 무엇인가?CSS에서 요소의 불투명도(opacity) 또는 투명도(transparency)를 조절하려면 opacity 속성을 사용합니다. 이 속성은 0.0부터 1.0 사이의 값을 가지며, 값이 작을수록 더 투명해집니다.1.0 – 완전히 불투명 (기본값)0.5 – 반투명0.0 – 완전히 투명 (보이지 않음)예를 들어, 요소를 30%만 보이게 설정하고 싶다면 다음과 같이 작성합니다.opacity: 0.3;rgba() 색상값으로 배경만 투명하게 하기opacity 속성은 요소 전체(텍스트 포함)에 영향을 줍니다. 반면 rgb
CSS의 pointer-events 속성은 요소 위에서 포인터 이벤트가 발생했을 때, 해당 요소가 이벤트에 반응하여 어떤 동작을 수행할지 여부를 지정합니다.포인터 이벤트는 마우스 클릭뿐만 아니라 터치, 스타일러스 펜 등 다양한 입력 장치에 의해 트리거될 수 있습니다.pointer-events 속성의 주요 값auto – 기본값으로, 요소가 포인터 이벤트에 정상적으로 반응합니다.none – 요소가 포인터 이벤트의 대상이 되지 않으며, 클릭·호버 등의 상호작용이 비활성화됩니다.예제 코드다음 코드는 CSS에서 pointer-events 속
CSS의 position 속성은 요소의 위치를 지정하는 핵심 속성입니다. 웹 페이지에서 요소를 원하는 위치에 배치하려면 position 속성과 함께 top, right, bottom, left 같은 오프셋 속성을 조합하여 사용합니다.position 속성의 주요 값static – 기본값입니다. 요소가 일반 문서 흐름(normal flow)에 따라 배치되며, 앞선 요소와 뒤따르는 요소의 순서를 그대로 따릅니다. 오프셋 속성(top, left 등)이 적용되지 않습니다.relative – 요소가 일반 문서 흐름에 따라 배치된 후, 지정한
CSS에서는 text-shadow 속성으로 텍스트에, box-shadow 속성으로 요소(박스)에 각각 그림자 효과를 추가할 수 있습니다. 이 두 속성을 활용하면 별도의 이미지 없이도 입체적이고 세련된 디자인을 손쉽게 구현할 수 있습니다.그림자 속성의 기본 문법두 속성 모두 아래와 같은 형태로 값을 지정합니다.색상(color) — 그림자의 색을 지정합니다.수평 오프셋(offset-x) — 그림자가 좌우로 이동하는 거리입니다.수직 오프셋(offset-y) — 그림자가 상하로 이동하는 거리입니다.흐림 반경(blur-radius) — 값이
화면이 좁은 모바일 기기에서도 표가 깨지지 않고 자연스럽게 보이도록 하려면 반응형 테이블(Responsive Table)을 구현해야 합니다. CSS만으로 아주 간단하게 만들 수 있는데, 핵심은 overflow-x: auto 속성입니다.반응형 테이블의 원리테이블을 <div> 같은 컨테이너 요소로 감싸고, 해당 컨테이너에 overflow-x: auto를 적용하면 화면 너비보다 테이블이 클 경우 가로 스크롤바가 자동으로 생성됩니다. 이렇게 하면 열이 많은 테이블도 모바일 환경에서 내용을 잘라내거나 뭉개지 않고 그대로 확인할 수
웹 페이지에서 요금제나 제품의 기능을 한눈에 비교할 수 있게 해주는 비교 테이블(Comparison Table)은 사용자 경험을 높이는 데 매우 유용한 요소입니다. 이번 글에서는 CSS만을 활용해 화면 크기에 맞춰 자동으로 조절되는 반응형 비교 테이블을 만드는 방법을 단계별로 살펴보겠습니다.CSS 비교 테이블 예제 코드아래 코드는 HTML과 CSS를 조합하여 깔끔하고 반응형인 비교 테이블을 구현한 전체 예제입니다.<!DOCTYPE html> <html> <head> <meta name="