브라우저는 오랫동안 CSS 작업을 번거롭게 만들어 왔습니다. 특히 구형 브라우저나 아직 실험 단계에 있는 최신 CSS 속성들은 브라우저마다 동작 방식이 달라서, 모든 환경에서 UI가 동일하게 보이고 작동하도록 만들려면 특정 속성에 접두사(prefix)를 붙여야 했습니다. 대표적인 예시: flexbox 가장 좋은 예가 바로 CSS의 flexbox입니다. flexbox는 모든 최신 브라우저와 IE10·IE11(flexbox가 여전히 부분적으로만 지원됨)에서 정상 작동하기 위해 무려 4개의 접두사가 필요했습니다. display: -web
모바일 퍼스트 설계란 웹사이트를 처음부터 모바일 화면 기준으로 제작한 뒤, CSS 미디어 쿼리(Media Query)를 활용해 태블릿이나 데스크톱처럼 더 큰 화면에서 어떻게 보일지 조정하는 방식을 말합니다. 다시 말해, 미디어 쿼리를 통해 반응형 웹사이트(다양한 화면 크기에 맞춰 유연하게 적응하는 사이트)를 만드는 것입니다. 미디어 쿼리를 사용할 때 우리는 이를 브레이크포인트(breakpoint)라고 부릅니다. 예를 들어, 화면 너비가 800px가 되는 시점에 레이아웃이 모바일에서 태블릿 형태로 전환되기를 원한다면 아래와 같은 미디
CSS 특이성(Specificity)이란?CSS에는 각 선택자의 힘을 수치로 계산하는 규칙이 있습니다. 여기서 말하는 힘이란 어떤 선택자가 더 강력한지, 즉 특이성(specificity)이 높은지를 의미합니다. 특이성 수치가 가장 높은 선택자는 다른 약한 선택자들이 적용한 스타일과 무관하게 항상 HTML 요소의 최종 모습을 결정합니다.예를 들어 버튼(button) 요소가 있다면, 스타일을 적용하는 방법은 여러 가지입니다. CSS에서 가장 많이 쓰이는 세 가지 선택자는 type(타입), class(클래스), id입니다.세 가지 기본
CSS의 :not(:first-child) 선택자를 사용하면 첫 번째 요소를 제외한 나머지 HTML 요소를 한 번에 선택할 수 있습니다. 이번 글에서는 그 원리와 실무 활용 방법을 알아보겠습니다. 예를 들어 다음 규칙(rule-set)을 CSS 스타일시트에 추가하면, 웹사이트 전체의 모든 h2 요소에 64px의 상단 마진이 적용됩니다. h2 { margin-top: 64px; } 하지만 만약 첫 번째 h2 요소에는 이 상단 마진을 적용하고 싶지 않고, 나머지 모든 h2 요소에만 적용하고 싶다면 어떻게 해야 할까요? :not(
대문자 텍스트 요소에 약간의 자간(letterspacing)을 추가하면 왜 좋은지, 그리고 CSS로 어떻게 구현하는지 알아봅니다. 타이포그래피에서 텍스트 요소에 대문자(올캡스)를 사용할 때는 글자 사이에 약간의 호흡 공간을 두는 것이 좋습니다. 그렇지 않으면 글자가 너무 빽빽해져서 편안하게 읽기 어려워집니다. 자간(Letterspacing)은 트래킹(Tracking)이라고도 부릅니다. 두 용어는 동의어로, 글자 그룹(단어) 사이의 간격을 의미합니다. 일반적으로 웹 분야에서는 letterspacing이라는 용어를 더 많이 쓰고, 인
키프레임(keyframes)과 다양한 CSS 애니메이션 속성을 활용하면 자바스크립트 없이 순수 CSS만으로 부드럽게 반복되는 배경색 애니메이션을 만들 수 있습니다. 이 글에서는 그 과정을 단계별로 살펴봅니다. 이번 예제에서는 HTML <body> 요소에 직접 CSS를 적용하지만, 소개하는 코드는 모든 HTML 요소, 클래스(class), 아이디(id)에 동일하게 적용할 수 있습니다. 완성된 코드 아래 데모를 참고용으로 활용해 보세요. 참고: 이 코드는 IE9(Internet Explorer 9)에서는 작동하지 않습니다.
별도의 자바스크립트 없이 순수 CSS만으로 요소에 마우스를 올렸을 때 확대되는 효과를 만들 수 있습니다. 핵심은 transform 속성의 변형 메서드인 scale()입니다. 호버 시 요소 확대하기 아래 박스 위에 마우스 커서를 올려보세요. 박스가 원래 크기의 정확히 1.5배, 즉 50% 더 커지는 것을 확인할 수 있습니다. 이것이 바로 CSS만으로 구현한 호버 확대 효과입니다. CSS transform 속성의 scale() 메서드는 요소의 크기를 늘리거나 줄일 수 있으며, 2D와 3D 환경 모두에서 동작합니다. 이번 예제에서는 간단
pointer-events 속성을 사용하면 특정 HTML 요소에서 발생하는 마우스오버/호버(:hover) 이벤트를 제거하거나 무시할 수 있습니다. 이 글에서는 그 구체적인 해결 방법을 단계별로 소개합니다. 최근 클라이언트를 위해 팀 소개 갤러리 페이지를 제작했습니다. 각 갤러리 항목은 UI 카드 형태로 표현되며, 마우스를 올리면 색상이 변하는 오버레이 효과가 적용되어 있습니다. 그런데 개발 과정에서 예상치 못한 문제에 부딪혔고, 이 경험이 바로 이 튜토리얼을 작성하게 된 계기가 되었습니다. UI 카드의 콘텐츠와 구조 각 갤러리 카드
때때로 HTML 이메일 템플릿처럼 인라인 CSS를 작성해야 하는 상황이 생깁니다. 사용하는 이메일·뉴스레터 서비스 제공업체에 따라 스타일을 태그 안에 직접 삽입해야 하기 때문입니다. 그렇다면 인라인 CSS만으로 호버(hover) 효과를 구현할 수 있을까요? 결론부터 말하면 불가능합니다. 인라인 style 속성은 :hover 같은 가상 클래스(pseudo-class)를 지원하지 않기 때문입니다. 대신 JavaScript의 onMouseOver와 onMouseOut 메서드를 활용하면 동일한 호버 효과를 만들어낼 수 있습니다. 예를 들어
CSS 속성 두어 가지만 추가하면 HTML pre 태그를 빠르게 100% 반응형으로 만들 수 있습니다. 이 글에서 그 방법을 단계별로 알아보겠습니다. 문제 상황: 코드 블록이 레이아웃을 깨뜨릴 때 여러 튜토리얼 사이트에서 자주 발견되는 문제 중 하나는, pre 태그로 감싸진 긴 코드 스니펫이 페이지 너비를 벗어나면서 전체 레이아웃이 깨지는 경우입니다. 그 이유는 기본적으로 pre 태그의 CSS white-space 속성이 다음과 같이 설정되어 있기 때문입니다. pre { white-space: normal; } 1단계: whit
웹 개발에서 요소를 화면의 정중앙에 배치하는 것은 의외로 자주 마주치는 과제입니다. 예전에는 position과 음수 마진을 조합한 복잡한 방식을 써야 했지만, 지금은 CSS Flexbox 덕분에 단 몇 줄의 코드로 깔끔하게 해결할 수 있습니다.Flexbox 중앙 정렬의 기본 원리Flexbox는 부모 요소(컨테이너)에 display: flex;를 선언하면 활성화됩니다. 이후 두 가지 핵심 속성만 알면 중앙 정렬이 완성됩니다.justify-content: center; — 주 축(기본적으로 가로 방향) 기준으로 자식 요소들을 중앙에 배
오늘은 CSS 애니메이션을 활용해 SVG 화살표 아이콘이 위아래로 튀어 오르는 효과를 만드는 방법을 알아보겠습니다. 아울러 CSS 애니메이션 속성들을 사용해 애니메이션의 유형, 타이밍, 지속 시간을 자유롭게 조절하는 방법도 함께 배워보겠습니다. 왜 이 기술이 유용할까요? 애니메이션을 적절하게 활용하면 다음과 같은 효과를 얻을 수 있습니다. 사용자를 자연스럽게 안내할 수 있습니다 사용자가 행동을 취하도록 유도할 수 있습니다 사용자의 관심을 사로잡을 수 있습니다 준비물 실습을 따라 하려면 코드 편집기가 필요합니다. 로컬 개발
일부 브라우저에서는 웹사이트의 입력 필드를 자동완성으로 채울 때 보기 좋지 않은 노란색 배경이 강제로 적용되곤 합니다. 왜 브라우저가 이런 동작을 하는지는 명확히 밝혀져 있지 않지만, 다행히 이 불편한 배경색은 몇 줄의 CSS로 손쉽게 제거할 수 있습니다. 노란 배경색, 왜 문제가 될까? 사이트의 색상 팔레트가 우연히도 연한 노란색과 잘 어울린다면 큰 문제가 아닐 수 있습니다. 하지만 대부분의 경우 브라우저가 임의로 넣어주는 이 노란 배경은 정교하게 설계된 UI와 어울리지 않으며, 디자인의 완성도를 떨어뜨리는 요인이 됩니다.
CSS를 사용해 단어의 첫 글자를 대문자로 바꾸려면 first-letter 선택자를 활용하면 됩니다. 예를 들어, 모든 글자가 소문자로 작성된 제목이 있다고 가정해 보겠습니다: 여기서 this의 첫 글자인 t를 대문자로 바꾸고 싶다면, CSS 스타일시트에서 h2 요소에 first-letter 선택자를 연결해 주기만 하면 됩니다: h2:first-letter { text-transform: capitalize; } :first-letter는 블록 레벨 요소의 첫 번째 글자에만 스타일을 적용하는 가상 요소(pseudo-elemen
CSS의 shape-outside 속성을 활용하면 원형 이미지 주변으로 텍스트가 흐르는 잡지 스타일의 레이아웃을 손쉽게 만들 수 있습니다. 왜 원형 텍스트 래핑인가? 콘텐츠를 좀 더 흥미롭고 잡지 같은 느낌으로 연출하고 싶다면, CSS를 활용해 텍스트가 다양한 형태의 요소를 따라 정렬되고 감싸지도록 만들 수 있습니다. 특히 원형 이미지 옆으로 본문이 부드럽게 흐르는 레이아웃은 시각적인 완성도를 크게 높여 줍니다. 먼저 기본이 될 HTML 콘텐츠를 작성해 보겠습니다. 여기서 눈여겨볼 점은 <article> 요소에는 pos
버튼 하나가 들어 있는 flexbox 컨테이너가 있다고 가정해 보겠습니다. justify-content 속성을 사용해 버튼(자식 요소)을 가로 방향으로 가운데 정렬하려고 하면 어떻게 될까요? .container { height: 300px; display: flex; justify-content: center; } 문제: 플렉스 항목이 부모 높이만큼 늘어남 위 코드를 적용하면 버튼(자식 요소)의 높이가 부모 요소의 높이(여기서는 300px)만큼 세로로 늘어나 버립니다. 아마 원하는 결과가 아니겠죠? 기본적으로 플렉스
CSS를 활용해 웹사이트에 유튜브 동영상을 삽입하고, 모바일부터 데스크톱까지 어떤 기기에서든 완벽하게 반응형으로 표시되도록 만드는 방법을 소개합니다. 유튜브에서 동영상 퍼가기 코드를 복사하면 아래와 같은 형태의 <iframe> 코드를 얻게 됩니다. 그런데 여기서 문제가 있습니다. iframe은 브라우저에서 올바른 화면 비율로 표시되기 위해 고정된 너비와 높이가 필요합니다. 그래서 iframe은 기본 상태로는 반응형 디자인과 잘 맞지 않습니다. 다행히 해결 방법은 간단합니다. iframe을 부모 컨테이너 요소로 감싸주기만
CSS로 텍스트 선택 비활성화하기 CSS의 user-select 속성을 사용하면 웹 페이지에서 텍스트가 선택되지 않도록 간단하게 설정할 수 있습니다. 이 글에서는 기본 문법부터 클래스 활용 예시, 그리고 브라우저 호환성을 위한 벤더 접두어까지 차근차근 살펴봅니다. 텍스트 선택은 기본적으로 허용됩니다 기본적으로 웹 브라우저는 모든 웹사이트에서 텍스트 선택을 허용합니다. 단, 이미지 위에 포함된 텍스트가 아니라 실제 텍스트 요소여야 한다는 조건이 있습니다. 텍스트는 마우스로 드래그하거나 키보드 단축키를 통해 선택할 수 있습니다. 예를
CSS의 list-style-type 속성을 사용해 순서 없는 목록에 사각형 글머리 기호를 적용하는 방법을 알아보세요. 웹 페이지에서 순서 없는 목록(<ul>)은 기본적으로 동그란 원형 글머리 기호(disc)가 표시됩니다. 기본 원형 글머리 기호는 아래와 같이 스타일링되어 있습니다: ul { list-style-type: disc; } 실제로 브라우저에는 이렇게 보입니다: HTML CSS JavaScript 글머리 기호를 사각형으로 바꾸고 싶다면, 기본 list-style-type
CSS의 list-style-type 속성을 활용하면 정렬된 목록(ordered list)의 번호를 대문자 로마 숫자(I, II, III…)로 손쉽게 변경할 수 있습니다. 이 글에서는 그 구현 방법을 예제와 함께 자세히 살펴봅니다. HTML에서 정렬된 목록 만들기 HTML에서 정렬된 목록을 작성할 때는 다음 두 가지 태그를 사용합니다. <ol>: 정렬된 목록 요소 전체를 정의합니다. <li>: 목록 안의 각 항목을 정의합니다. 기본적인 작성 예시는 다음과 같습니다. <ol> <li>