본문 바로가기

webdesign/CSS

-webkit-overflow-scrolling: touch; https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling 모바일 스크롤링 부드럽게 하기 -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */ -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */ auto Use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen. touch Use momentum-based scrolling, where the con.. 2019. 4. 26. 18:14 더보기
미디어쿼리적용 https://blog.naver.com/pjh445/220529001794 2018. 10. 19. 00:30 더보기
모바일 - 고해상도 미디어쿼리 적용 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio -webkit-device-pixel-ratio : Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.The -webkit-device-p.. 2018. 10. 19. 00:27 더보기
모바일 코딩 모바일 텍스트 인풋 자동 확대 방지Disable Auto Zoom in Input “Text” tag - Safari on iPhonehttps://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone I made an HTML page that has an tag with type="text". When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this? The browser will zoom if the font-size is less than 1.. 2018. 10. 18. 02:01 더보기
줄바꿈 하이픈 https://css-tricks.com/almanac/properties/h/hyphenate/ .element { hyphens: none | manual | auto } The hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present. Note that hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defi.. 2018. 9. 14. 17:54 더보기
세로 가운데 정렬, 이미지 영역에 배율대로 맞추기 object-fit:contain; display:table-cell; vertical-align:middle; 이미지 칼라 인버트 https://davidwalsh.name/demo/invert-colors-css.php.normal { filter: invert(0%); } .inverted { filter: invert(100%); } 가상선택자 https://css-tricks.com/pseudo-class-selectors/ 2018. 7. 27. 14:56 더보기
화면 밝기에 따른 미디어쿼리 적용 https://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/ Font Color AccessibilityA website’s content is primarily there to be read, and low-contrast font colors can lead to text being unreadable. Don’t compromise high readability for beautiful comps. This is not just a design tip, this is a necessity when you’re creating content on the web.W3C’s Web Content Accessibility Gui.. 2018. 7. 12. 03:45 더보기
quirks mode / 쿽 모드 / 쿽스 모드 :-| 삑사리들 보호되어 있는 글입니다. 더보기