본문 바로가기

DEV

(266)
[Spline 3D] 01. Qoo-Zing-ee Spline 3D Design Tool 스플라인 첫 작품! https://my.spline.design/qoozingee-65f610b68ea082651659dccd31e403d1/ qoozingee my.spline.design https://linktr.ee/splinetool @splinetool | Linktree Spline - Online 3D Design Editor linktr.ee
[CSS Drawing] 춘식이 그리기 (Choonsik of Kakao Friends) 정말 정말 오랜만에 그려보는 CSS 드로잉! 귀염뽀짝한 춘식이를 그려봤습니다 :) See the Pen [CSS Drawing] Choonsik of Kakao Friends by zinee (@zineeworld) on CodePen. 영상 풀버전
[WWDC 2021] Design for Safari 15 Design for Safari 15 - WWDC21 - Videos - Apple Developer Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for... developer.apple.com Theme Color Safe area 확장 https://developer.mozilla.org/en-US/docs/Web/CSS/env() env() - CSS: Cascading Style Sheets | MDN The env() CSS function can be used to insert the value of a user ..
[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; 속성을 적용해서 버튼의 클릭 이벤트를 ..
[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 ..
[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를 잡아주는 경우가 있는데 이와 같은 맥락이었고, 그것을 쌓임 맥락이라고 부른다는 것을 알게 ..
[Git] Git 권한 5단계 - 비개발자에게 어떤 권한을 줘야할까? 배경 : QA 테스트가 필요한건 물론 지라에 이슈를 생성하지만, 디자이너-마크업개발자 혹은 디자이너-프론트개발자 사이의 간단한 작업들은 깃헙 이슈에 쌓아놓고 일괄처리하고 있다. 회사에서 디자이너 분께서 디자인필터링 후 나오는 피드백(=디자인QA)을 깃헙에 이슈로 남겨달라고 요청을 드렸다. 이 때 처음에 Read 권한만 주셔서 이슈 생성이 불가해서 찾아보니 Triage 권한이 필요하다는 것을 알게 됐다. 결론 : 디자이너분들이 이슈 생성해서 Assign, Lable, Project 설정하려면 최소 Triage 권한은 있어야 함! https://docs.github.com/en/github/setting-up-and-managing-organizations-and-teams/repository-permiss..
[HTML] 핵심 웹 요소 <img> 어디까지 알고 있나? 핵심 웹 요소 https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/ 위 문서에서 찾은 키워드와 연관된 링크들입니다. - 이미지와 동영상 요소에 항상 너비 및 높이 크기 속성을 포함하는 것이 좋다. https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ - window.devicePixelRatio https://developer.mozilla.org/ko/docs/Web/API/Window/devicePixelRatio - 트위터도 2x 이미지 제한을 검 https://blog.twitter.com/engineering/en..

반응형