DEV/CSS 85

[CSS] :not(:placeholder-shown) input에 값이 있을 경우를 나타내는 선택자

시작 input에 값이 있는 경우에만 submit button이 활성화 되도록 요구되는 시나리오는 매우 흔합니다. 그럴때 input에 값이 있는지 없는지를 자바스크립트가 아닌 css만으로 알 수 있는 방법이 있을까 찾아보게 되었습니다. 그렇게 :placeholder-shown 이라는 선택자를 알게 되었습니다. 플레이스 홀더가 보여지는 상태를 나타내므로, 값이 있는 상태라면 플레이스 홀더가 가려질테니 :not(:placeholder-shown)으로 사용해보았습니다. 예제 See the Pen [CSS] :placeholder-shown by zinee (@zineeworld) on CodePen. input 값이 없는 경우 버튼에 pointer-event: none; 속성을 적용해서 버튼의 클릭 이벤트를 ..

DEV/CSS 2021.09.28

[CSS] iOS 사파리, 크롬 height: 100vh 버그 해결 방법

문제상황 iOS 기기 브라우저에서 100vh 를 브라우저의 도구바 영역까지 잡고 있어서 하단에 무언가 배치하면 (이를테면 아래로 버튼이라던가) 가려서 안보이는 현상이 있다. 정확한 영역을 못잡고 있다는 건데 예전에 해결하던 CSS 핵 방법이 지금은 먹히지 않아서 다른 방법을 찾아보았다. 해결방법 https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ The trick to viewport units on mobile | CSS-Tricks Viewport units have always been controversial and some of that is because of how mobile browsers have made things more ..

DEV/CSS 2021.06.16

[CSS] iOS 사파리, 크롬 border-raidus / overflow: hidden 버그

문제상황 비디오 영역의 radius가 iOS 사파리, 크롬에서는 적용되지 않는 현상 iOS 사파리, 크롬 border-raidus / overflow: hidden 버그 https://www.sungikchoi.com/blog/safari-overflow-border-radius/ .vid-box { position: relative; // 또는 isolation: isolate; border-raidus: 8px; overflow: hidden; } 해결방법 본질은 쌓임 맥락 (stacking context) 에 있었다. 가끔 스타일 작업을 하다보면 z-index 위계가 꼬여서 position: relative를 잡아주는 경우가 있는데 이와 같은 맥락이었고, 그것을 쌓임 맥락이라고 부른다는 것을 알게 ..

DEV/CSS 2021.06.15

[CSS] CSS value <revert>, CSS Property <all: revert>

revert 현재 적용된 값이 제거된다면 보여질 상태를 확인 할 수 있는 CSS value 값입니다. revert The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. developer.mozilla.org .color-blue 로 파란색을 적용했지만 revert 값을 통해 제거했고, 그 전에 캐스케이딩 된 빨간색이 적용됨을 확인할 수 있습니다. See the Pen [CSS] rever..

DEV/CSS 2020.07.23

[CSS] 이미지 스프라이트(image sprite) 레티나 대응하기

만드는 방법 1. 이미지들을 1배수, 2배수를 각각 모아놓습니다. 파일명을 기반으로 클래스명이 생성되기 때문에 이미지 파일명을 시멘틱하게 정리하는 것이 좋습니다. 2. 스프라이트 생성 페이지에 접속합니다. https://spritegen.website-performance.org/ CSS Sprite Generator, Editor, and Code --> --> --> CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Havin..

DEV/CSS 2020.06.24

[CSS] Multiline underline hover effect

See the Pen [CSS] Multiline hover underline effect by zinee (@zineeworld) on CodePen. 피그마(https://www.designsystems.com/) 사이트 들어갔다가 대문글 효과가 인상적이어서 바로 가져왔다. background-image: linear-gradient()로 만든 효과였다. 먼저 투명하게 깔고 밑줄로 표현하고 싶은 부분에만 색상을 넣어주면 이렇게 만들 수 있다! background-image: linear-gradient(transparent 60%, #F8CD07 40%) 간단한 개념이지만 이걸 처음 생각해낸 사람들이 진짜 멋지다. 얼마나 창의적으로 CSS를 활용하는가는 정말 쓰는 사람에게 달려있는 것 같다. 오늘도 ..

DEV/CSS 2019.04.25

[Angular] -webkit-line-clamp is not working (v.7.1.2)

앵귤러6에서 이미 리포트 된 내용이라고 한다. 현재 앵귤러 v.7.1.2에서도 같은 문제가 발생해서 찾아보게 됐다. https://github.com/angular/angular/issues/24183 -Webkit-Line-Clamp Not Working in Angular 6 · Issue #24183 · angular/angular I'm submitting a... [ X ] Regression (a behavior that used to work and stopped working in a new release) [ ] Bug report [ ] Performance issue [ ] Feature request [ ] Documentation issue or requ... github.com ..

DEV/CSS 2019.04.14

[CSS] iOS 11.2.1 max-height: calc(% - px) is not working

< 페어 드롭다운이 보이지 않고 있음 > 문제환경 : 아이폰X iOS 11.2.1 (크롬, 사파리)문제현상 : 트레이드 페어 드롭다운이 보이지 않음문제원인 : max-height: calc(100% - 44px) 이 먹히지 않음 해결방법특정 iOS 버전에서 발생하는 이슈라고 생각하여, min-height: 85% 값을 방어책으로 넣어 둠85% : iphone5 (최소 디바이스 사이즈) 기준으로 가로모드에서도 하단이 잘리지 않는 값정상적인 다른 버전에서는 max-height 값이 더 크기 때문에 min-height 값에 영향없음 문제해결과정화살표 방향, 배경색이 바뀌는 것으로 보아 .is-open 상태는 정상적으로 ON/OFF 되는 것으로 확인DOM 구조상 dropdown 부분이 제일 하단에 있어서 z-i..

DEV/CSS 2018.12.20
반응형