웹 관련 기록/HTML,CSS19 <meta> 모바일 주소표시줄 색상 지정하기 참조 https://caniuse.com/?search=meta-color https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html 2021. 10. 13. 미디어 쿼리를 이용한 IE11 Hack @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 스타일 작성 */ } 주의사항 IE10 이상 적용이라서 사실상 IE10~11 Hack 이라고 생각하면 될 듯. (하지만 IE11도 이제 공식 지원 종료라고! 제발 그만 지원하자) 2021. 8. 20. IE11 Flex 버그? IE11 에서 flex 사용시 주의 해야하는 부분 flex-basis 값을 지정하지 않으면 문제가 된다. flex: 1; /* 이 경우 그냥 적용 안 됨.*/ flex: 1 1 auto; /* 이 경우 width 값이 명시가 안되어있으면 자식 객체의 폭이 계산 안되서 말줄임 등 처리 할때 문제가 됨. */ 이제 MS 공식 지원도 종료라고... 그만 써... 아니 그만 지원해라 좀... 2021. 8. 20. IOS 사파리 min-height: 100vh 스크롤 버그 컨테이너의 최소 높이를 화면에 채우기위해서 100vh 사용시, ios 사파리에서는 주소표시줄과 툴바 때문에 스크롤시 덜컥거리는 이슈가 있다. 이를 해결하기 위해서 웹킷에서 제공하는 값을 100vh 대신 -webkit-fill-available 값을 사용 할 수 있다. .wrap { min-height: 100vh; } /* 여기서 100vh를 -webkit-fill-available 값으로 대체하여 사용 할 수 있다. */ .wrap { min-height: -webkit-fill-available; } 이 값은 calc 함수 내에서 사용 할 수 없습니다. 2021. 8. 12. 2줄 이상 여러줄 말줄임 처리시, 맨 아래 글자 짤림 현상 해결 여러줄 말줄임 처리시 아래와 비슷한 스타일 많이 사용함 .두줄이상말줄임 { max-height:70px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } 위 코드의 overflow:hidden 으로 인해서 글자 Qpyjg 잘림 현상이 나타났음. padding-bottom 값 추가 { padding-bottom: 0.14em } padding-bottom 추가 했는데도 마지막 줄 글자가 짤린다면 max-height 조절이 추가로 되어야 함. 2021. 3. 25. css3 placeholder 가상선택자, placeholder 글자색 바꾸기 input::input-placeholder {color:#ccc;} input::-webkit-input-placeholder {color:#ccc;} input:-ms-input-placeholder {color:#ccc;} input::-ms-input-placeholder {color:#ccc;} 크롬은 버전 58부터 프리픽스 없이 지원. 사파리 10.1, 오페라 47부터 프리픽스 없이 지원. IE10, 11은 :-ms-input-placeholder 로 사용. IE Edge는 ::-ms-input-placeholder 로 사용. IOS 사파리 10.2부터 프리픽스 없이 지원. 안드로이드 브라우저 56부터 프리픽스 없이 지원. 안드로이드 크롬 59부터 프리픽스 없이 지원. 2020. 12. 13. 이전 1 2 3 4 다음 320x100