탐구하는 취르미

CSS를 다루다 보면 위치를 설정할 때 자주 사용하는 속성이 top, right, bottom, left입니다. 하지만 이 속성들을 각각 지정하다 보면 코드가 길어지고 유지보수가 어렵게 느껴질 때가 있죠. 이런 문제를 해결하기 위해 등장한 속성이 바로 inset 속성입니다. 이 포스팅에서는 inset 속성의 기본 사용법과 실전 활용 팁을 알려드리겠습니다.inset 속성이란?inset은 CSS에서 top, right, bottom, left를 한 번에 지정할 수 있는 단축 속성(Shorthand)입니다. 간결한 코드를 작성할 수 있도록 도와주며, 특히 레이아웃 작업 시 깔끔하고 직관적인 스타일링을 제공합니다. element { inset: ;} position 값별 inset 적용 가능 여부✅ re..

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

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

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

SVG는 웹 디자인과 개발에서 매우 유용한 포맷으로, 화면 해상도와 크기 조절에 유연하고 고품질의 이미지를 제공합니다. 그러나 때로는 SVG가 다양한 환경에서 제대로 랜더링 되지 않을 수 있습니다. 특히 iOS Safari와 같은 플랫폼에서는 SVG 렌더링 문제가 발생할 가능성이 높습니다. 이 문제를 해결한 방법에 대해서 공유드리겠습니다. SVG 렌더링 문제를 해결하기 위해 추가적으로 체크해 볼 수 있는 몇 가지 방법 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. SVG의 width, height, viewBox 들의 값 확인해보기 이들 값이 일치하지 않으면 SVG가 원하는 대로 화면에 표시되지 않을 수 있습니다. XML 네임스페이스 (XMLNS) 선언 확인해 ..

background-image와 img는 모두 이미지를 웹 페이지에 표시하는 데 사용되는 요소들이지만, 사용되는 목적에 따라 다르게 활용됩니다. 마크업(markup)할 때, img vs background-image 선택하는 기준에 대해서 알아봅시다. img img는 주로 콘텐츠 내에 이미지를 전경으로 표시하는 데 사용됩니다. 주로 콘텐츠의 중요한 부분으로 사용되며, HTML 코드 내에 태그를 사용합니다. 이미지 처리가 서버에서 호출되어 개발 처리가 돼야 하는 경우 img 태그를 권장합니다. 태그는 srcset 속성을 통해 다양한 해상도의 이미지를 제공하고, 브라우저가 적절한 이미지를 선택할 수 있도록 합니다. img 요소는 대체 텍스트(alt 속성)를 제공할 수 있기 때문에 시각적으로 콘텐츠를 이해할 ..