탐구하는 취르미

UI 작업하다 보면 이런 경험 있으실 거예요.텍스트 옆에 작은 뱃지나 아이콘을 붙이고 싶은데, 으로 만들면 수직 중앙이 애매하게 어긋납니다.타이틀 영역입니다 뱃지strong { display: inline-block; color: #131518; font-size: 16px; font-style: normal; font-weight: 700; line-height: 22px; word-break: keep-all; >span { margin-left: 5px; color: #99A1A8; font-size: 13px; font-style: italic; font-weight: 400; line-height: ..

float 속성을 활용함으로써 웹 페이지의 구성 요소들을 자유롭게 배치하고 조합할 수 있으며, 창의적인 디자인을 구현하는 데에 큰 도움이 됩니다. float 속성에 대해서 알아보도록 합시다. float 속성의 이해 float 속성은 CSS에서 요소의 왼쪽이나 오른쪽으로 이동시키는 속성입니다. float 된 요소는 주변의 요소들이 해당 요소를 무시하고 텍스트 및 인라인(inline) 요소가 그 주위로 흐르게 배치됩니다. 마치 워드(Word)에서 텍스트 배치와 비슷한 효과를 표현할 수 있습니다. 요소를 일반적인 흐름에서 벗어나게 하고 해당 요소를 텍스트 및 다른 콘텐츠 주위로 부유시킵니다. float의 초기값 : none float: left; float: right; float: none; float: ..

CSS를 활용하여 overlay(오버레이) 및 toast(토스트) 팝업에서 dim(딤) 영역을 자연스러운 전환효과를 처리하는 방법에 대해서 알아보겠습니다. 이를 위해 opacity와 pointer-events 속성을 적절히 활용하여 부드럽게 전환할 수 있습니다. HTML 팝업 버튼 닫기 본문 내용 SCSS display:none/block; 처리는 해당 요소를 화면에서 완전히 감추어 레이아웃에 포함시키지 않습니다. 따라서, 애니메이션과 트랜지션 효과를 적용할 수 없습니다. opacity 및 pointer-events 요소는 레이아웃에는 여전히 존재하면서, 투명도와 이벤트 처리를 통해 나타내거나 감출 수 있습니다. 이를 통해 부드러운 애니메이션 및 트랜지션 효과를 적용할 수 있는 것이 핵심입니다. * ..