See the Pen CSS - Position bottom center by zinee (@zineeworld) on CodePen. 한글로 적으니까 진짜 이상한데... 상황을 설명하자면, 1. position: abolute로 특정 위치가 정해진 상태 2. 워딩에 따라 width는 유동적 3. 항상 중앙에 위치 보통 저런 경우에는 display: inline-block; width: auto; 해놓고 부모 요소에 text-align: center; 를 많이 하지만, position: absolute 상태여서 적용할 수 없었다. 다국어 지원을 하게 되면서 dynamic width로 인한 이슈가 늘 있다. 잠깐 헤맸지만 금방 해결책을 찾았다! transform: translate(-50%); !!
개발일지/CSS
See the Pen Country Dropdown with flag by zinee (@zineeworld) on CodePen. 구글 계정 생성 폼을 보면 국가코드 드롭다운에 아래처럼 국기가 같이 있다. 그래서 마이뮤직테이스트 모바일 인증 폼에도 적용했었다. 지금은 디자인이 바뀌어서 걷어내게 되었지만 아까워서 코드펜으로 저장해 보았다.
기본 개념 기본 개념은 width 비율 만큼 padding-bottom 값을 동일하게 주면 된다. 100%를 주면 1:1 비율이 되는 것이고, 75% 값을 패딩으로 주면 4:3 비율이 되는 것이다. See the Pen Height equal to dynamic width by zinee (@zineeworld) on CodePen. 응용 사례 See the Pen responsive youtube player by zinee (@zineeworld) on CodePen. 응용하여 쓴 사례로는 모바일 웹에서 유투브 임베디드 플레이어를 가로 폭에 맞춰 높이를 늘려줄 때 사용했다. 유튜브 플레이어 비율은 16:9 이기 때문에 padding-bottom: 56.25% 을 주면 된다. 비율을 빠르게 계산하기 위..
CSS Winner에서 한국인 지원자를 검색해보다가 SERIOUS를 알게 되었다.http://www.csswinner.com/details/serious-study/10663 Interaction Study Lab인데 사이트가 무척 마음에 든다.특히 인트로에 노이즈 효과가 시선을 확 당겼다. See the Pen Pure css - Noise Effect by Hyejin Oh (@mmt-zinee) on CodePen. clip과 content:attr()을 사용한 것이 주요 특징이라고 할 수 있다. content는 가상선택자(:before/:after)를 사용할 때 content: ''으로 제일 많이 썼었는데 다양한 활용 방법이 있다는 걸 오늘 알았다. 참고 https://css-tricks.com/..
css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ See the Pen [Pure CSS] input range custom by zinee (@zineeworld) on CodePen.
See the Pen VjQoEg by Hyejin Oh (@mmt-zinee) on CodePen. https://github.com/darlanrod/input-range-scss
See the Pen link hover effect by Hyejin Oh (@mmt-zinee) on CodePen. text-decoration: underline 으로는 원하는 디자인을 마음껏 적용하기 힘들다.그런데, 언젠가 어떤 사이트 글에서 링크에 이런 효과를 주었던 것을 보아서 기억에 남았었다.그래서 생각나는 대로 비슷하게 구현해봤다.