탐구하는 취르미

overflow: hidden 대신 CSS의 touch-action: none 속성을 활용해 스크롤 방지를 구현하는 방법에 대해서 알아보겠습니다. 웹에서 팝업을 띄울 때, 배경 스크롤을 막는 것은 흔한 UX 요구사항입니다. 이를 위해 보통 overflow: hidden을 사용하지만, 이 방식은 스크롤바를 숨기고 강제로 스크롤을 차단하는 방식이라 사용자 경험에 영향을 줄 수 있습니다. 특히, 모바일 환경에서는 더 섬세한 조작이 필요합니다.AOS와 iOS 환경에서의 팝업 스크롤 결함1. AOS 환경에서의 문제팝업이 열릴 때 overflow: hidden으로 인해 dim 뒤로 보이는 배경이 scrollTop: 0 위치로 초기화되는 이슈가 발생했습니다. 2. iOS에서의 문제overflow: hidden이 적..

웹사이트에 맞춤형 폰트를 적용하는 방법에 대해서 알아보겠습니다.@font-face 란?@font-face는 CSS 규칙으로, 외부 폰트를 불러와 웹페이지에서 사용할 수 있게 해 줍니다. 이를 통해 디자이너와 개발자는 웹브라우저에 기본으로 설치된 폰트 외에도 다양한 폰트를 활용할 수 있습니다. - font-family : 폰트의 이름을 정의- src : 폰트 파일의 경로를 지정- font-weight, font-style : 굵기와 스타일 설정다양한 폰트 파일 형식웹에서 사용되는 주요 폰트 파일 형식은 다음과 같습니다. - TTF (TrueType Font): 가장 일반적인 폰트 형식으로, 대부분의 운영 체제에서 지원됩니다.- OTF (OpenType Font): TTF와 유사하지만, 더 많은 타이포그래피..

CSS 랜더링 과정은 레이아웃(Layout), 페인트(Paint), 컴포짓(Composite) 단계를 거쳐 화면에 웹페이지를 표시하는데 각각의 단계에서 브라우저는 다른 작업을 수행합니다. 이에 대해 알아봅시다. Layout (레이아웃) 레이아웃 단계에서 브라우저는 요소들의 위치와 크기를 결정합니다. 이 단계에서는 각 요소의 크기, 위치, 레이아웃 트리(layout tree)를 구축하는 과정이 포함되어 있습니다. 브라우저는 요소의 스타일과 구조를 분석하고, 각 요소의 크기와 위치를 계산해 화면에 배치합니다.Paint (페인트) 레이아웃이 단계가 완료되면, 브라우저는 화면에 표시할 내용을 그리는 작업을 합니다. 이 단계에서는 픽셀을 채우고 색상을 입히는 등의 작업이 이뤄집니다. 이는 각 요소의 스타일과 내..

플렉스 박스(Flexbox)는 웹 레이아웃을 구성하는 데 유용한 강력한 도구입니다. 이를 통해 요소들을 유연하게 정렬하고 배치할 수 있으며, 다양한 디바이스와 화면 크기에 대응하여 일관된 레이아웃을 제공할 수 있습니다. 이번 글에서는 플렉스 컨테이너와 아이템을 제어하는 주요 속성에 대해 살펴보겠습니다. Flex Container display:flex;로 설정하면 해당 요소가 플렉스 컨테이너로 작동합니다. 이는 그 안에 있는 아이템들을 플렉스 아이템으로 만듭니다. 플렉스 아이템들의 배치 및 정렬을 제어하는 각 속성들에 대해 간단히 알아보겠습니다. flex-direction 플렉스 아이템의 배치 방향을 결정합니다. 주요 값으로는 row(가로 방향), row-reverse(가로, 반대 방향), column..

Flexbox는 웹 개발자들이 레이아웃을 구성하는 데 매우 유용한 도구 중 하나입니다. 그러나 Flexbox를 처음 사용하는 사람들에게는 각 속성들의 역할과 상호작용이 혼란스러울 수 있습니다. 특히, 크기를 제어하는 데 사용되는 속성들인 flex-basis, flex-grow, flex-shrink, width, max-width, min-width의 차이점에 대해 이해하는 것은 중요합니다. 이러한 속성들을 올바르게 이해하는 시간을 가져보겠습니다. flex-basis 플렉스(flex) 아이템(item)이 플렉스 컨테이너(container) 내에서 차지할 초기 크기를 지정합니다. 기본값은 auto이며, 해당 아이템의 너비(width)를 해당 아이템의 내용 또는 고정된 너비에 따라 결정합니다. width ..

텍스트 말줄임 효과는 긴 텍스트를 제한된 공간에 맞추어 보기 좋게 표시하는 디자인 기법으로, 레이아웃을 깔끔하게 유지하고 사용자 경험을 향상합니다. 디바이스의 화면 크기에 따라 텍스트를 자동으로 조절하여 다양한 화면 크기에 대응합니다. CSS로 텍스트 말줄임 효과를 어떻게 반영하는지 알아보겠습니다. 한 줄 텍스트 말줄임 .textBox { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; } 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 두줄 이상 텍스트 말줄임 다중 행 텍스트 말줄임은 -webkit-line-clamp 속성에 원하는 줄 수의 값을 부여하면 됩니다. .tex..