📗TIL/css
-
[css] 중첩된 영역 중 뒤에 있는 요소 클릭 이벤트처리 - pointer-events 속성📗TIL/css 2023. 3. 16. 15:27
이런식으로 검은 영역이 클릭 이벤트가 달려있는 슬라이드 배너이고, 그 위에 네비게이션 바를 제작하였다. (아래는 리액트로 제작한 코드이고, 가독성을 위해 주제와 관련 없는 내용은 지웠다.) onClickBanner(bannerImg?.ban_url)} /> 하지만 네비게이션 영역이 1240px을 가지고 있기 때문에 해당 분홍색 영역은 배너의 클릭이벤트가 발생하지 못했다. 해결방법 클릭 이벤트를 가로막는 곳에 pointer-events 속성을 추가해주면 된다. pointer-events : 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 지정 SwiperNavWrap에 pointer-events: none;을 추가하고, 네비게이션 버튼은 클릭 이벤트가 발생해야 하기 때문에 SwiperNa..
-
css로 한줄/ 여러줄 말줄임표 만들기📗TIL/css 2022. 5. 1. 23:59
1. 한줄 말줄임표 만들기 우선 말줄임표를 만들기 위해서는 max-width 나 width가 존재해야하며, width가 적용되기 위해서는 display속성이 block 혹은 inline-block 이어야합니다. 그리고 아래 세 코드를 추가하면 한줄짜리 말줄임표는 끝입니다. div{ white-space: nowrap; /*텍스트가 줄바꿈 되지 않게 해줌*/ overflow: hidden; /*영역을 벗어난 텍스트는 보이지 않게 해줌*/ text-overflow: ellipsis; /*영역을 벗어난 텍스트가 있을경우 말줄임표 ...으로 만들어줌*/ } See the Pen Untitled by sott120 (@sott120) on CodePen. 2. 두줄 이상 말줄임표 만들기 한줄 말줄임표만 text-..
-
background-image 비율 유지하며 반응형 만드는법📗TIL/css 2022. 4. 15. 00:14
[padding과 calc()를 이용해 background-image를 반응형으로 만드는 방법] background-image는 img 태그가 아니어도 영역 안에 이미지를 넣을 수 있는 속성 반응형 레이아웃을 짤 때 보통 width 값을 기준으로 잡기 때문에, 이미지가 들어간 태그의 부모요소에 width 값은 (2그리드 : 50%, 3그리드 : 33.33% 4그리드 : 25% 등등..) 퍼센트를 이용하여 너비를 정해주고 , 자신의 width값은 100%를 줍니다. 문제는 height값인데, 여기서 img태그의 경우에는 높이값을 auto로 해두면, 문제 없이 작동합니다. [ img태그를 이용한 반응형 코드 ] See the Pen bg-img1 by sott120 (@sott120) on CodePen. ..