웹프로그래밍/CSS (16) 썸네일형 리스트형 cursor 의 종류 카테고리CSS 값예제설명일반링크와 상태선택드래그 앤 드롭크기 조절과 스크롤확대와 축소 auto 사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다. default 플랫폼에 따라 다른 기본 커서. 보통 화살표입니다. none 커서 없음. context-menu 콘텍스트 메뉴 사용 가능. help 도움말 사용 가능. pointer 링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다. progress 프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (wait과 반대) wait 프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (progress와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다. ce.. Vertical scrolling in iOS not smooth div에 overflow를 사용해 scroll 를 만들었을때, ios 등에서 smooth scroll이 안될 경우. * { -webkit-overflow-scrolling: touch; } 위 코드 삽입. * 로 설정은 부담이 될 수 있으므로 해당 태그에만 적용시켜도 된다. iphone X 웹뷰 safe-area-inset 관련 프로젝트에서 상단 하단 position:fixed된 레이아웃 상태에서 아이폰X 웹뷰 대응 방법이다. 메타태그 뷰포트쪽에 viewport-fit=cover 를 추가 padding-top: env(safe-area-inset-bottom); 2번의 속성값을 응용하는 건데 기본적으로 env(safe-area-inset-bottom); // IOS 11.0 이상 (신) constant(safe-area-inset-bottom); // IOS 11.0 버전 (구)ios 11.2 업데이트에서 constant가 제거됨 env를 사용. 해당 값이 필요한 부분에 위값을 응용하여 집어 넣었다. (저는 커스텀한곳에 위 env,constant 둘다 삽입 했습니다;) safe-area-inset의 기본값이 있어 값을 수정하고 .. CSS overflow scrolling and hidden scrollbar (iOS) I just played with this CodePen and it seems that if you set the background-color to transparent for all three properties below (and in this example also remove box-shadows), the scrollbar is not visible at all: #style-1::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1); background-color: transparent; } #style-1::-webkit-scrollbar { background-color: transparent; } #.. 안드로이드 웹뷰 스크롤바 안보일 때 (Android Webview scrollbar not visible, div overflow auto, scroll case) 앱 내에 웹뷰 방식으로 서비스를 런칭할일이 있는데, body scroll 이 아닌 div overflow auto 로 스크롤을 만들었는데 스크롤바가 나타나지 않았다. (어디서 영향을 준걸까...) 아래 css 코드를 적용하니 해결되었다. 스타일은 취향에 맞게 맞추면 된다. ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); -webkit-border-radius: 10px; border-radius: 10px; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px;.. ios mobile 에서 터치시 background 색상 들어가는 문제 -webkit-tap-highlight-color: rgba(0,0,0,0); 출처: https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/ 구글 Noto 한국어 글꼴을 웹에서 마음껏! 훈민정음 반포 569돌을 맞이해서 자그마한 선물을 마련했습니다. 작년 7월에 발표한 Noto Sans CJK 글꼴을 이제 여러분의 웹 사이트에서도 마음대로 쓸 수 있습니다. Noto Sans CJK 글꼴 패밀리 가운데 한국어 전용인 Noto Sans KR을 Google Fonts Early Access를 통해 제공합니다. Noto Sans KR은 현대 한국어 뿐 아니라, 옛한글도 완벽하게 지원하고 총 6가지 굵기(weight) 중에 마음대로 골라 쓸 수 있습니다. ( 데모 페이지 ) 구글은 웹과 인터넷에서 한글을 보다 아름답고 다양하게 표현할 수 있도록 많은 노력을 기울여 왔습니다. 그 일환으로 국내 글꼴 제작사가 만든 여러 종류의 한국어 글꼴을 구글 웹 폰트 서비스에 더해 왔습니다. 이제 Noto Sa.. IE에서 input text 박스 x 버튼 숨기기 input[type=text]::-ms-clear {display: none;} 이전 1 2 다음
