진스

1.input 결론css: appearance: none;-moz-appearance: none;-o-appearance: none;border:none;-webkit-appearance: none;border-radius:0; 아이폰에서의 input 태그에는 기본 CSS가 적용되어 데스크톱으로 볼 때랑 디자인이 다릅니다. 테두리와 내부 그림자가 기본적으로 적용되어 본인이 설정한 CSS와 달라 디자인이 틀어질 수 있기 때문에 이 기본 CSS를 제거해야 합니다. 변경 전 변경 후 아래 CSS 코드를 CSS 파일이나 HTML의 태그에 적용하면 위 사진처럼 기본 CSS가 제거됩니다. input { -webkit-appearance: none; -webkit-border-radius: 0; } 'appearan..

body {-webkit-text-size-adjust: none;} 추가해주시면 됩니당.

[CSS] 크롬에서 이미지가 흐릴 때 크롬은 고질적인 이미지 랜더링 문제가 있다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 문제없지만, 원본 해상도보다 확대 또는 축소되는 경우에 이미지가 눈에 띄게 흐려진다. lpla.tistory.com (좌) 익스플로러11, (우) 크롬 90 크롬은 고질적인 이미지 랜더링 문제가 있다. 웹에 게시된 이미지 해상도가 원본 해상도와 일치한다면 문제없지만, 원본 해상도보다 확대 또는 축소되는 경우에 이미지가 눈에 띄게 흐려진다. 이것은 크롬 뿐만 아니라 다른 브라우저에서도 일어나는 현상이지만 유독 크롬에서 심하게 나타난다. 이 문제를 해결하기 위해 오랜 시간 찾아봤지만 아주 마음에 드는 해결책은 찾을 수 없었고 적정선에서 타협할만한 수준은 몇 가지 알 수 있었..

css transfrom translate(-50%,-50%) 사용시 이미지,텍스트 흐림 현상 webkit 브라우저에서 가운데로 정렬하기 위해 position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 를 사용할때 텍스트 또는 사진이 흐릿하게,, 뿌옇게 보이는 버그가 발생한다. 그럴때!! tr.. chaeyoung2.tistory.com webkit 브라우저에서 가운데로 정렬하기 위해 position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 를 사용할때 텍스트 또는 사진이 흐릿하게,, 뿌옇게 보이는 버그가 발생한다. 그럴때!! transform:translate(-50%,..

https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com

출처 [css] css 선택자(selector) 개념 정리 CSS(Cascading Style Sheets)는 HTML 요소(Element)의 스타일을 주는 역할을 하는데요, 그러려면 스타일을 적용하고자하는 HTML 요소를 특정할 필요가 있기 때문에 선택자(selector)에 대해 잘 알아둬야 합니다. velog.io CSS selector에 대해 CSS(Cascading Style Sheets)는 HTML 요소(Element)의 스타일을 주는 역할을 하는데요, 그러려면 스타일을 적용하고자하는 HTML 요소를 특정할 필요가 있기 때문에 선택자(selector)에 대해 잘 알아둬야 합니다. 먼저 css의 기본적인 규칙은 다음과 같은데요, 여기서 h1이라고 되어있는 부분이 바로 셀렉터 입니다. h1이라는 h..

출처 웹 접근성을 고려한 텍스트 숨김처리 이전에 작성한 글에서 콘텐츠의 영역마다 제목을 지정함으로써 스크린 리더 등 보조기기 사용자가 웹페이지를 이용하면서 콘텐츠를 이해하는데 도움을 받을 수 있다고 했다. 이렇게 heading태그를 이용하여 각 영역에 제목을 입력하면 시각장애인의 사이트 탐색이 용이하고, 사이트의 컨텐츠에 대한 이해를 높일수 있기 때문에 텍스트를 넣어주는데 디자인상으로는 필요없으므로 숨김처리를 해야한다. 텍스트를 숨기는 방법 텍스트를 화면에 표시하지 않게 하는 방법에는 여러가지가 있다. 여러 방법들 중 화면에서는 보이지 않게 하면서 보조기기 사용자의 접근성에도 문제되지 않는 방법에는 어떤게 있을까? 1. display:none; display: none; display속성의 값을 none..

css-compact https://marketplace.visualstudio.com/items?itemName=jsonchou.css-compact css-compact - Visual Studio Marketplace Extension for Visual Studio Code - let's go back to original way to write our css marketplace.visualstudio.com 코드를 한 줄로 만드는 VScode의 확장 프로그램은 더 있지만, 주석을 삭제하지 않는 확장 프로그램은 이것밖에 찾지 못했다. 코드를 수정한 후에 단축키 shift+alt+f를 사용하면 코드가 한 줄로 돌아온다. scss-compact https://marketplace.visualstud..