728x90 300x250 SMALL Front-end/CSS64 마진 병합 : 인접 요소 마진이 함께 적용되는 문제 해결 문제 시나리오 html css.parent { background-color: lightgrey; height: 150px;}.child { margin-top: 20px; background-color: lightblue; height: 100px; width: 100px;} 이 경우 .child 요소 상단에만 20px의 마진을 기대 했지만의도와 다르게 .parent 요소도 내려가게 된다. 이유.paert 요소 상단 마진과 병합이 된다. 마진 병합은 css 레이아웃 엔진이 블록 요소의 수직 간격을 보다 직관적으로 처리하기 위해 설계되었다.이 개념은 요소 간의 중복된 마진을 줄이고 더 깔끔한 레이아웃을 생성하는데 도움된다. 하지만 이것이 예상치 못한 문제를 야기함.. 2024. 7. 10. @supports 최신 브라우저에만 스타일 적용하기 '@supports'는 css 조건부 규칙 중 하나로, 특정한 css속성이나 값이 브라우저에서 지원되는지 여부를 확인하는데 사용된다.이를 통해서 특정 스타일을 지원하는 최신 브라우저에만 스타일을 적용하거나, 그렇지 않은 경우에는 대체 스타일이나 처리를 정의할 수 있다. @supports (condition) { /* condition이 참일 때 적용되는 스타일 */ } 여기서 condition은 특정한 css 속성이나 값의 지원여부를 확인하는 조건을 나타낸다. 만약 조건이 참이면 괄호 안의 스타일이 적용되고, 그렇지 않으면 무시된다 예시 리스트 아이템 1 리스트 아이템 2 현재 브라우저가 (background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rg.. 2024. 1. 6. 상하 스크롤 하단 뿌옇게 처리하기 하단이 뿌옇게 처리된 상하 스크롤 리스트 아이템 1 리스트 아이템 2 리스트 아이템 3 리스트 아이템 4 리스트 아이템 5 리스트 아이템 6 리스트 아이템 7 #scrollable-list::after 가상 요소를 사용해서 하단 뿌옇게 처리된 배경을 만들었다. 그런데 여기서 문제는 맨마지막 리스트가 가상 요소 영역에 가려서 클릭이 안된다는 것이다. 리스트 아이템 1 리스트 아이템 2 리스트 아이템 3 리스트 아이템 4 리스트 아이템 5 리스트 아이템 6 리스트 아이템 7 pointer-events: none; 해당 요소에 마우스 이벤트를 비활성화하는 스타일을 가상요소에 적용하면 해당 가상 요소 위에서 마우스 이벤트가 발생하지 않아 마우스 클릭 등의 이벤트가 아래의 실제 리스트 아이템에 전달될 수 있게 된.. 2024. 1. 2. 컨텐츠 너비에 따라 박스 크기 조정 width:min-content width: min-content 이 값은 컨텐츠가 가질 수 있는 최소 너비를 기반으로 요소 크기를 결정한다. 해당요소의 내용에 따라서 최소한의 너비 키그로 조절됨 See the Pen width: min-content by kim oya (@ttuttu) on CodePen. 2023. 11. 18. 이전 1 2 3 4 ··· 16 다음 728x90 반응형 LIST