Language/CSS,HTML
-
react에서 text길이에 따라서 css 속성 변경Language/CSS,HTML 2023. 7. 26. 11:29
js에서 비교문을 넣지 않고 text의 길이에 따라서 css 속성을 변경하려고 하는데 구글링해도 입맛에 맞는 마땅한게 없어 보여서 직접 잔머리좀 굴려 보았다. CSS css에서 data-length 값에 따라 css속성을 부여한다. ... .wrap > :global(.global-header) .new-count[data-length="1"] { left: 25px; } .wrap > :global(.global-header) .new-count[data-length="2"] { left: 23px; } .wrap > :global(.global-header) .new-count[data-length="3"] { left: 20px; } ... JS css 판단할 수 있도록 text의 길이를 data-..
-
이미지 두번 load되는 현상Language/CSS,HTML 2021. 4. 22. 17:41
안녕하세요, 건담아빠입니다. 이번 포스팅은 Image가 두번 load되는 버그입니다. 아래와 같이 background-image: url 에 empty 문자열이 들어가게 되면 style="background-image: url('')" 페이지를 두번 load되는 현상이 발견되었습니다. 이럴때는 쉽게 empty 체크후 about:blank가 들어가게 하면 페이지가 두번 load되는 현상을 방지할 수 있습니다. background-image: url('about:blank') css에서도 url-prefix("about:blank") 하는 방식이 있는것 같긴 하지만, 이미 해결되 이슈여서 해보진 않았습니다. 다음에 같은 이슈가 발생하게 되면 해봐야 겠습니다. 각 프로젝트 형평성에 맞도록 융통성 있게 적용하면..
-
check box IE에서 background 표시 이슈Language/CSS,HTML 2021. 3. 17. 15:33
프로젝트 진행중에 custom checkbox에서 이슈가 발생하여 기록해 둔다. 상황 : IE에서 간헐적으로 checkbox의 background가 안나오는 상황 발생 퍼블소스에서는 재현 안되어서 퍼블리싱쪽에서 해결에 어려움을 겪어서 원인 추적 문제분석 - 아코디언 + 체크박스를 동시에 사용할때 간헐적으로 발생하는 이슈로 추측 처리방식 아래와 같이 두가지 해결 방식에 대해 추적 후 퍼블리싱 측에 전달하였다. - 방식1 ㄴ 아코디언 처리시에 show 하는 부분을 setTimeout(function () { // show }, 0); setTimeout(function () { $$.cont.show(); }, 0); - 방식2 ㄴ css에서 -ms-high-contrast 사용하여 처리 @media all..