CSS에서 word-wrap 속성을 사용하면 요소의 너비를 벗어나는 긴 단어나 텍스트를 강제로 줄을 끊어 다음 줄로 넘겨 표시할 수 있습니다. 특히 띄어쓰기 없이 이어진 아주 긴 단어(예: URL이나 영문 문자열)가 컨테이너 밖으로 삐져나가는 문제를 해결할 때 유용합니다.아래 예제 코드를 실행하면 word-wrap 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.예제<!DOCTYPE html> <html> <head> <style&
웹 글꼴(Web Fonts)은 사용자의 컴퓨터(로컬 시스템)에 설치되어 있지 않은 글꼴을 웹 페이지에서 사용할 수 있도록 지원하는 CSS 기능입니다. 덕분에 방문자가 특정 글꼴을 갖고 있지 않아도 개발자가 의도한 디자인 그대로 텍스트를 표시할 수 있습니다.@font-face 규칙이란?CSS3에서는 @font-face 규칙을 사용해 서버에 저장된 사용자 지정 글꼴 파일을 불러올 수 있습니다. 이 규칙의 핵심 속성은 다음과 같습니다.font-family: 불러온 글꼴에 부여할 이름을 정의합니다.src: 글꼴 파일의 경로(URL)를 지정
CSS3 2D 변환(Transform)이란?CSS3의 2D 변환(2D Transform)은 HTML 요소를 이동(translate), 회전(rotate), 확대·축소(scale), 기울이기(skew)하여 시각적 구조를 자유롭게 변경하는 기능입니다. JavaScript 없이 순수 CSS만으로 요소의 위치, 크기, 모양을 조작할 수 있어 웹 애니메이션, 인터랙티브 UI, 반응형 디자인에서 폭넓게 활용됩니다.아래 표는 2D 변환에서 가장 많이 사용되는 주요 함수와 그 설명을 정리한 것입니다.2D 변환 주요 함수 정리번호함수 및 설명1ma
CSS의 transform 속성과 rotate() 함수를 사용하면 div 요소를 원하는 각도만큼 자유롭게 회전시킬 수 있습니다. 이번 글에서는 div를 시계 반대 방향으로 -20도 회전시키는 방법을 예제 코드와 함께 살펴보겠습니다.예제 코드아래 코드를 실행하면 두 개의 div 중 두 번째 div(id=myDiv)만 -20도 회전되어 표시됩니다.<html> <head> <style> div { width: 300px; heigh
CSS의 matrix() 변환 함수를 사용하면 2차원 좌표계에서 요소의 형태와 위치를 자유롭게 조절할 수 있습니다. 이 함수는 6개의 매개변수를 받아 회전, 확대·축소, 기울이기, 이동 등의 효과를 하나의 행렬로 처리합니다.아래 예제는 matrix(1, -0.3, 0, 1, 0, 0) 값을 적용하여 div 요소를 기울여 회전시키는 방법을 보여줍니다.예제 코드<html> <head> <style> &nbs
CSS의 matrix() 함수를 사용하면 요소를 원하는 방향으로 자유롭게 변형할 수 있습니다. 이번 예제에서는 매트릭스 변환을 활용해 요소를 다른 방향으로 기울이고 이동시키는 방법을 알아보겠습니다.매트릭스 변환이란?matrix() 함수는 6개의 인수를 받아 요소에 복합적인 변형(스케일, 회전, 기울임, 이동)을 한 번에 적용합니다. 아래 코드에서는 matrix(1, 0, 0.5, 1, 150, 0)을 사용하여 요소를 비스듬히 기울인 후 오른쪽으로 이동시켰습니다.예제 코드다음 코드를 실행하면 두 개의 div 요소 중 두 번째 요소가
CSS3의 다중 열(multi-column) 레이아웃에서 column-rule-width 속성은 열과 열 사이에 그려지는 구분선(열 규칙선)의 너비를 지정하는 데 사용됩니다. 이 속성은 단독으로 사용하기보다는 column-rule-style, column-rule-color와 함께 사용해야 하며, 구분선 스타일이 먼저 지정되지 않으면 너비 값을 설정해도 화면에는 아무것도 표시되지 않습니다. 기본 문법 column-rule-width: thin | medium | thick | <길이값>; thin(얇게), medium(보
CSS3 다중 열 규칙 스타일 속성이란?CSS3의 다중 열(multi-column) 레이아웃에서 column-rule-style 속성은 열과 열 사이에 표시되는 구분선(룰 라인)의 스타일을 지정하는 데 사용됩니다. 이 속성은 일반 테두리(border-style)와 마찬가지로 solid, dotted, dashed, double 등의 값을 가질 수 있으며, column-rule-color 속성과 함께 사용하면 구분선의 색상까지 자유롭게 꾸밀 수 있습니다.아래 예제 코드를 직접 실행해 보면, 네 개의 열로 나뉜 텍스트 사이에 핑크색(#
CSS에서는 text-shadow 속성을 사용하여 텍스트에 다양한 그림자 효과를 추가할 수 있습니다. 이 속성을 활용하면 글자에 입체감을 부여하거나 네온사인 같은 독특한 시각 효과를 연출할 수 있어 웹 디자인의 완성도를 높이는 데 큰 도움이 됩니다.text-shadow 속성의 기본 문법text-shadow 속성은 최대 네 개의 값을 순서대로 지정할 수 있습니다.text-shadow: 가로거리 세로거리 흐림정도 색상;가로 거리(h-shadow): 그림자가 좌우로 이동하는 거리 (음수 값 가능)세로 거리(v-shadow): 그림자가 상
CSS에서 HTML 요소에 그림자 효과를 추가하려면 box-shadow 속성을 사용합니다. 이 속성을 활용하면 요소에 입체감을 부여하거나 시각적인 강조 효과를 쉽게 만들 수 있습니다.box-shadow 속성의 기본 문법box-shadow 속성은 아래와 같은 값들을 순서대로 지정할 수 있습니다.box-shadow: offset-x offset-y blur-radius spread-radius color;offset-x: 그림자의 가로 방향 위치 (양수는 오른쪽, 음수는 왼쪽)offset-y: 그림자의 세로 방향 위치 (양수는 아래쪽,
CSS3의 text-align-last 속성은 블록 요소 내 텍스트의 마지막 줄(또는 강제 줄바꿈 직전의 줄)이 어떻게 정렬될지 지정합니다. 일반적인 text-align 속성이 문단 전체의 정렬을 담당하는 반면, text-align-last는 마지막 줄에만 별도의 정렬 방식을 적용할 수 있어 양쪽 정렬(justify)된 긴 글에서 시각적 균형을 잡을 때 특히 유용합니다. 주요 속성값 auto – 기본값으로, text-align 속성의 설정을 따릅니다. start / end – 텍스트 쓰기 방향의 시작점 또는 끝점을 기준으로 정렬합
CSS text-emphasis 속성이란?text-emphasis 속성은 요소의 텍스트 위나 아래에 강조 기호(emphasis mark)를 표시하는 CSS 속성입니다. 주로 동아시아권 언어(한국어, 일본어, 중국어)에서 특정 단어나 문구를 강조할 때 사용되며, 마침표·원·삼각형 등 다양한 기호를 텍스트에 덧붙여 시각적으로 돋보이게 만들 수 있습니다.기본 문법text-emphasis: text-emphasis-style text-emphasis-color;주요 하위 속성1. text-emphasis-style요소의 텍스트에 표시될 강
text-overflow 속성이란?CSS의 text-overflow 속성은 요소 안에서 표시되지 못하고 넘쳐버린(오버플로된) 텍스트를 사용자에게 어떤 방식으로 알려줄지 결정하는 속성입니다. 이 속성은 단독으로는 동작하지 않으며, 일반적으로 overflow: hidden;(넘친 내용 숨기기)과 white-space: nowrap;(줄바꿈 방지) 속성과 함께 사용해야 합니다.주요 값clip: 넘친 텍스트를 요소의 경계에서 그대로 잘라냅니다. 별도의 표시가 없기 때문에 뒤에 내용이 더 있는지 사용자가 알기 어렵습니다.ellipsis: 잘
CSS의 word-break 속성은 텍스트가 요소의 너비를 초과할 때 줄바꿈(행갈이)이 어떤 기준으로 이루어질지를 지정합니다. 특히 한글·일본어·중국어처럼 띄어쓰기가 적은 언어나 긴 영단어가 포함된 콘텐츠에서 텍스트가 컨테이너 밖으로 넘쳐흐르는 현상(오버플로우)을 방지할 때 매우 유용합니다. 주요 속성값 normal: 브라우저의 기본 줄바꿈 규칙을 따릅니다. keep-all: 공백과 하이픈(-)에서만 줄바꿈을 허용합니다. 한글 문장에서 단어가 중간에 잘리지 않도록 할 때 자주 사용됩니다. break-all: 모든 문자 사이에서 줄
CSS의 word-wrap 속성은 단어가 컨테이너의 너비를 초과할 때 줄을 강제로 끊고 다음 줄로 넘겨주는 기능을 합니다. 특히 띄어쓰기 없이 길게 이어진 영어 단어나 URL처럼 한 단어가 매우 긴 경우에 유용하게 사용됩니다.word-wrap 속성의 대표적인 값은 break-word로, 이 값을 지정하면 단어 중간에서도 줄 바꿈이 가능해져 텍스트가 부모 요소 밖으로 벗어나는 것을 방지할 수 있습니다.예제다음은 word-wrap 속성을 사용하는 기본 문법 예제입니다.<!DOCTYPE html> <html> &nb
CSS text-emphasis 속성으로 텍스트 강조하기CSS의 text-emphasis 속성을 사용하면 텍스트에 강조 표시(emphasis mark)를 추가하고, 그 강조 표시의 색상까지 한 번에 지정할 수 있습니다. 이 속성은 주로 일본어·중국어 등 동아시아 언어권에서 흔히 볼 수 있는 점이나 원 모양의 강조 기호를 텍스트 위쪽이나 아래쪽에 표시할 때 유용하게 활용됩니다.기본 문법다음 예제처럼 강조 스타일과 색상을 함께 지정합니다.text-emphasis: text-emphasis-style text-emphasis-color;
CSS의 text-align-last 속성은 블록 요소 안에서 텍스트의 마지막 줄이 어떻게 정렬될지를 지정합니다. 일반적인 text-align 속성은 모든 줄에 적용되지만, text-align-last를 사용하면 마지막 줄만 별도로 정렬할 수 있어 문단 스타일을 더 세밀하게 제어할 수 있습니다.text-align-last의 주요 속성값auto – 기본값으로, text-align 속성의 설정을 그대로 따릅니다.start / end – 텍스트 쓰기 방향에 따라 시작 또는 끝 위치에 정렬합니다.left / right – 각각 왼쪽 또는
CSS3 방사형 그라디언트란?방사형 그라디언트(radial gradient)는 지정한 색상이 요소의 중심점에서 시작하여 사방으로 원형 또는 타원형 모양으로 퍼져 나가는 효과입니다. 선형 그라디언트가 한 방향으로 색이 변화한다면, 방사형 그라디언트는 동심원을 그리듯 중심을 기준으로 색이 자연스럽게 전환되는 것이 특징입니다.아래 예제 코드를 직접 실행해 보면 CSS3에서 방사형 그라디언트를 구현하는 방법을 손쉽게 확인할 수 있습니다.예제 코드<html> <head> &n
CSS3의 repeating-radial-gradient 함수를 사용하면 방사형 그라디언트가 지정된 색상 정지점(color stop)을 기준으로 무한히 반복되는 패턴을 손쉽게 만들 수 있습니다. 일반적인 radial-gradient가 마지막 색상으로 채워지고 끝나는 것과 달리, 반복 방사형 그라디언트는 정의된 구간이 중심에서 바깥쪽으로 계속 순환되어 줄무늬나 동심원 패턴 같은 효과를 냅니다.기본 문법background: repeating-radial-gradient(시작 색상, 색상1 위치1, 색상2 위치2, ...);예제 코드아래
CSS3에서 색상을 지정하는 방법 중 하나인 HSL은 Hue(색조), Saturation(채도), Lightness(명도)의 약자입니다. HSL 방식을 사용하면 직관적으로 색상을 조절할 수 있어 웹 디자인에서 널리 활용됩니다.HSL 구성 요소 이해하기HSL 함수는 다음과 같은 형식으로 작성됩니다.hsl(hue, saturation, lightness)색조(Hue): 색상환에서의 각도를 의미하며 0~360도 범위의 값을 가집니다. 0은 빨강, 120은 초록, 240은 파랑을 나타냅니다.채도(Saturation): 색의 선명한 정도를