CSS의 filter 속성을 사용하면 포토샵 같은 이미지 편집 도구 없이도 웹 페이지의 이미지에 흐림(blur), 밝기(brightness), 대비(contrast) 등 다양한 시각 효과를 손쉽게 적용할 수 있습니다. 아래 예제 코드를 실행하면 네 개의 동일한 이미지가 원본, 대비 강조, 밝기 증가, 흐림 처리된 상태로 나란히 표시됩니다. 자주 사용되는 CSS 필터 함수 blur(px) : 이미지에 가우시안 블러(흐림) 효과를 적용합니다. 값이 클수록 더 많이 흐려집니다. brightness(%) : 이미지의 밝기를 조절합니다.
CSS만으로 마우스 오버 시 이미지 뒤집기 구현하기 웹 페이지에서 이미지에 마우스를 올렸을 때 이미지를 좌우로 뒤집는 효과는 CSS의 transform 속성만으로 간단하게 구현할 수 있습니다. JavaScript 없이 순수 CSS만 사용하기 때문에 코드가 가볍고 페이지 성능에도 유리합니다. 핵심 원리 이미지를 뒤집을 때는 transform: scaleX(-1) 값을 사용합니다. scaleX()는 요소를 가로 방향으로 확대·축소하는 함수로, 값이 -1이면 이미지가 좌우로 반전됩니다. 만약 세로 방향으로 뒤집고 싶다면 scaleY(-
CSS object-fit 속성이란?CSS의 object-fit 속성은 이미지(img)나 동영상(video) 같은 대체 요소(replaced element)가 자신을 감싸는 컨테이너에 어떻게 맞춰질지를 결정합니다. 고정된 너비와 높이를 가진 박스 안에 콘텐츠를 배치할 때, 원본 비율을 유지하거나 필요한 부분만 잘라내는 등 다양한 방식으로 크기를 조절할 수 있어 반응형 웹 디자인에서 매우 유용하게 사용됩니다.object-fit의 주요 값fill (기본값): 컨테이너 크기에 맞게 콘텐츠를 늘려 채웁니다. 원본 비율이 깨질 수 있습니다.
웹 페이지를 만들다 보면 지정된 컨테이너 크기에 맞춰 이미지나 비디오가 찌그러지거나, 여백이 생기는 문제를 겪게 됩니다. 이럴 때 CSS의 object-fit 속성을 사용하면 콘텐츠가 컨테이너 안에서 어떻게 채워질지 손쉽게 제어할 수 있습니다.object-fit 속성이란?object-fit은 <img>나 <video> 같은 대체 요소(replaced element)의 콘텐츠가 지정된 너비와 높이에 맞게 조정되는 방식을 결정합니다. 주요 값은 다음과 같습니다.fill – 기본값입니다. 가로세로 비율을 무시하고 컨
CSS의 object-fit 속성은 <img>나 <video> 같은 대체 요소(replaced element)의 콘텐츠를 지정된 컨테이너 크기에 맞게 조절할 때 사용합니다. 원본 콘텐츠의 비율을 유지하거나, 컨테이너를 꽉 채우거나, 잘라내는 등 다양한 방식으로 표시할 수 있습니다. object-fit의 주요 속성 값 contain: 콘텐츠의 가로세로 비율을 유지하면서 컨테이너 안에 전체가 들어가도록 크기를 조절합니다. 빈 공간이 생길 수 있습니다. cover: 콘텐츠의 비율을 유지하면서 컨테이너를 꽉 채우도록
CSS 그리드 컨테이너란?CSS에서 그리드 컨테이너(Grid Container)는 내부에 그리드 아이템(Grid Item)들을 포함하는 부모 요소입니다. 이 아이템들은 미리 정의된 행(row)과 열(column) 구조 안에 자동으로 배치되므로, 복잡한 레이아웃도 적은 코드로 깔끔하게 구성할 수 있습니다.그리드 컨테이너를 만들려면 부모 요소에 display: grid;를 선언하고, grid-template-columns 속성으로 열의 개수와 너비를 지정하면 됩니다.예제: 2열 그리드 만들기<!DOCTYPE html> <
CSS로 버튼 배경색 변경하기HTML 버튼의 배경색을 변경하려면 CSS의 background-color 속성을 사용하면 됩니다. 이 속성에 원하는 색상 값을 지정하면 버튼의 기본 회색 배경이 지정한 색으로 바뀝니다.색상 값은 yellow처럼 색상 이름으로 지정할 수도 있고, #FFFF00 같은 HEX 코드나 rgb(255, 255, 0) 형태로도 지정할 수 있습니다.아래 예제 코드를 실행하면 노란색 배경의 버튼이 만들어지는 것을 직접 확인할 수 있습니다.예제 코드<!DOCTYPE html> <html> &nbs
CSS의 flex-wrap 속성은 플렉스 컨테이너 안의 아이템들이 한 줄에 모두 들어가지 못할 때, 줄바꿈 여부와 방향을 결정하는 속성입니다. 이 속성에 wrap-reverse 값을 지정하면 플렉스 아이템(flex item)이 일반적인 wrap과는 반대 방향, 즉 교차 축(cross axis)의 역방향으로 줄바꿈되어 배치됩니다.wrap-reverse 값의 동작 방식기본값인 nowrap은 아이템을 한 줄에 모두 표시하고, wrap은 위에서 아래로 새로운 줄을 만들어 나갑니다. 반면 wrap-reverse를 사용하면 첫 번째 줄이 컨테
CSS에서 버튼의 글꼴 크기를 변경하려면 font-size 속성을 사용합니다. 이 속성은 픽셀(px), em, rem 등 다양한 단위로 지정할 수 있으며, 버튼 내 텍스트의 크기를 자유롭게 조절할 수 있습니다.font-size 속성 사용 예제아래 코드를 실행하면 노란색 배경의 버튼이 생성되며, 버튼 안의 텍스트가 15px 크기로 표시되는 것을 확인할 수 있습니다.예제<!DOCTYPE html> <html> <head> <style>
CSS로 버튼 패딩 변경하기 버튼의 패딩(안쪽 여백)을 조절하려면 CSS의 padding 속성을 사용하면 됩니다. 패딩은 요소의 테두리와 내용 사이의 공간을 의미하며, 이 값을 조정하면 버튼의 크기와 클릭 영역이 함께 달라집니다. 아래 예제 코드를 직접 실행해 보면서 버튼의 패딩이 어떻게 적용되는지 확인할 수 있습니다. 예제 <!DOCTYPE html> <html> <head> <style>
텍스트에 빨간색 네온 글로우(발광) 효과를 적용하려면 CSS의 text-shadow 속성을 사용하면 됩니다. 이 속성은 그림자의 가로 오프셋, 세로 오프셋, 흐림 반경(blur radius), 색상을 순서대로 지정하며, 오프셋을 0으로 설정하고 흐림 반경만 조절하면 텍스트 주변으로 번지는 네온사인 같은 빛 효과를 쉽게 연출할 수 있습니다.예제 코드<!DOCTYPE html> <html> <head> <style> &n
CSS에서 인라인(inline) 목록 항목을 활용하면 간단하게 가로형 내비게이션 바를 만들 수 있습니다. 핵심은 목록 항목인 <li> 요소에 display: inline; 속성을 지정하여 세로로 나열되던 메뉴를 가로 방향으로 배치하는 것입니다.기본 원리<ul> 태그는 기본적으로 불릿(bullet)과 여백(padding/margin)이 적용되어 있으므로, 먼저 list-style-type: none;, margin: 0;, padding: 0;으로 초기화해야 깔끔한 내비게이션 바를 만들 수 있습니다.예제 코드아래
CSS의 text-shadow 속성을 사용하면 텍스트에 그림자 효과를 손쉽게 적용할 수 있습니다. 그림자는 하나만 추가할 수도 있지만, 쉼표(,)로 구분된 목록 형태로 값을 나열하면 하나의 텍스트에 두 개 이상의 그림자를 동시에 지정하는 것도 가능합니다.text-shadow 속성의 기본 문법text-shadow 속성은 아래와 같은 순서로 값을 작성합니다.text-shadow: offset-x offset-y blur-radius color;offset-x: 그림자가 가로 방향으로 이동하는 거리offset-y: 그림자가 세로 방향으로
웹 페이지에서 이미지에 마우스 커서를 올렸을 때(호버) 그림자 효과를 표시하고 싶다면 CSS의 box-shadow 속성과 :hover 가상 클래스를 함께 사용하면 됩니다.box-shadow 속성은 요소 주위에 하나 이상의 그림자를 추가할 수 있게 해주며, 기본 문법은 다음과 같습니다.box-shadow: offset-x offset-y blur-radius spread-radius color;각 값은 순서대로 수평 오프셋, 수직 오프셋, 흐림 반경(blur), 확산 반경(spread), 그림자 색상을 의미합니다. 위 예제에서 사용된
웹 페이지에서 이미지가 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에 맞춰 자동으로 조절되도록 하려면 반응형(responsive) 처리가 필수입니다. 다행히 복잡한 설정 없이 CSS 몇 줄만으로 간단하게 구현할 수 있습니다. 핵심 CSS 속성 이미지를 반응형으로 만드는 가장 기본적인 방법은 max-width와 height 두 가지 속성을 활용하는 것입니다. img { max-width: 100%; height: auto; } max-width: 100% — 이미지가 부모 요소(컨테이너)의 너비를 초과하지 않도록 제
이미지를 화면 중앙(가운데)에 정렬하려면 CSS의 margin-left와 margin-right 속성을 auto 값으로 설정하고, 이미지가 블록 레벨 요소로 동작하도록 display: block을 함께 지정해야 합니다.<img> 태그는 기본적으로 인라인(inline) 요소이기 때문에 좌우 마진 자동 적용만으로는 정렬되지 않습니다. 반드시 display: block;을 먼저 선언한 후 마진을 auto로 지정해야 의도대로 중앙 정렬됩니다.CSS 이미지 중앙 정렬 예제아래 코드를 실행하면 이미지가 화면 가운데 정렬된 것을 확인
툴팁(tooltip)의 상단에 화살표를 추가하려면 CSS의 bottom 속성을 활용하면 됩니다. 화살표는 :after 가상 요소와 테두리(border) 기법을 조합하여 만들 수 있습니다.핵심 원리화살표는 실제 이미지가 아니라 CSS 테두리만으로 구성됩니다. 네 방향 중 세 방향의 테두리 색상을 transparent로 지정하고, 원하는 방향(여기서는 아래쪽)에만 색상을 적용하면 삼각형 모양의 화살표가 만들어집니다.예제아래 코드를 실행하면 마우스 커서를 올렸을 때 상단에 화살표가 달린 툴팁이 나타납니다.<!DOCTYPE html&
웹 디자인에서 버튼의 둥근 모서리는 전체적인 분위기를 부드럽고 세련되게 만들어 주는 중요한 요소입니다. CSS에서는 border-radius 속성 하나만으로 손쉽게 버튼에 둥근 모서리를 적용할 수 있습니다.border-radius 속성이란?border-radius는 요소 테두리의 모서리를 둥글게 만드는 CSS 속성입니다. 값은 픽셀(px), 퍼센트(%) 등 다양한 단위로 지정할 수 있으며, 값이 클수록 모서리가 더 많이 둥글어집니다.border-radius: 15px; — 네 모서리가 15px 크기로 둥글게 처리됩니다.border-
CSS에서 텍스트를 이미지의 오른쪽 상단에 배치하려면 top 속성과 right 속성을 함께 활용하면 됩니다. 핵심은 부모 요소에 position: relative를 지정하고, 텍스트가 들어갈 자식 요소에는 position: absolute를 적용하는 것입니다.핵심 원리 이해하기position: relative는 부모 컨테이너를 위치 기준점으로 만들어 줍니다. 그런 다음 자식 요소에 position: absolute를 선언하고 top과 right 값으로 각각 상단과 우측에서 얼마나 떨어질지 지정하면, 텍스트가 이미지 위의 정확한 위치
CSS Grid 레이아웃에서 열 개수 정의하기CSS Grid 레이아웃에서 열의 개수를 정의하려면 grid-template-columns 속성을 사용합니다. 이 속성에 지정하는 값의 개수만큼 열이 생성되며, 각 값은 해당 열의 너비를 결정합니다.예를 들어 auto auto auto와 같이 세 개의 값을 지정하면 3열 그리드가 만들어집니다. 아래 예제 코드를 실행하여 직접 결과를 확인해 보세요.예제<!DOCTYPE html> <html> <head> &nb