전체보기

문제 다른 레포에 같은 패키지를 설치했는데, 딱히 다를게 없는데 에러를 뱉어서 당황했다. 삽질 구글링을 해도 적당한 방법이 나오지 않아서 헤매다가 정식 레포 이슈를 찾아봤더니 해결방법이 나왔다. 원인 앵귤러 버전 이슈였다. 해결 9 이상에서 정상동작하는데 에러가 발생한 레포는 8 버전이었다. 앵귤러 버전업으로 해결! github.com/arkon/ng-click-outside/issues/69 Uncaught Error: Type ClickOutsideModule does not have 'ngModuleDef' property. · Issue #69 · arkon/ng-click-outside Hi! Trying to run the library, but have this error in me brow..

시작하며 카카오 프로필의 가장 대표적인 형태라고 할 수 있는 스퀘어클(squircle)에 대해 이야기 해보려고 합니다. Squicle은 Squre+Circle이 합성된 신조어로 모서리가 둥근 정사각형을 말합니다. 카카오에서 흔히 프로필을 표현할 때 자주 쓰곤 합니다. 처음에는 radius 값으로 비슷하게 깎아 놓았었는데 디자이너님께서 임의 값 대신 SVG path 그대로 사용해야 한다고 하셔서 수정했습니다. 계열사 디자인도 본사의 디자인 시스템에 소속되어 관리되기 때문에 공통 컴포넌트는 그 규칙을 잘 따라야 합니다. SVG 이해를 위한 추천 글 : a11y.gitbook.io/graphics-aria/svg-graphics 요구사항 - SVG 스퀘어클 path 를 반영 - 테두리에 inside 1px r..

지난 23일 네이버TV를 통해 제 8회 널리 웹 접근성 세미나가 웨비나 형태로 진행되었습니다. 매끄러운 진행과 높은 웨비나 퀄리티가 돋보이는 행사였습니다. 여러 세션 중에 가장 기억에 남았던 와 위주의 후기를 적어보도록 하겠습니다. 전체 영상은 이 곳에서 다시볼 수 있습니다. 세션 1. 스마트에디터 ONE 접근성 개선 사례 공유 8회 널리웨비나_01_이주용, 오광민_스마트에디터 ONE 접근성 개선 사례 공유 NULI SEMINAR tv.naver.com zinee comment; 실제 개발 사례를 공유하면서 설명해 주셔서 굉장히 좋았습니다. 문제 상황을 정의하고, 스토리를 선정한 뒤, 해결 방법을 도출하는 과정이 모두 자세하게 담겨 있어서 참 알찬 발표였습니다. See the Pen contentedit..

2020.06.29. 월 코로나19 때문에 비대면 녹화강의로 대체되었다. 학생들을 직접 만나서 소통할 수 없는 점이 아쉽긴 했지만 교수님께서 좋은 강연이었다고 칭찬을 많이 해주셔서 뿌듯했다.

좋은 기회로 발표할 수 있는 기회를 가졌습니다 :) 이 글을 바탕으로 발표를 했습니다. zinee-world.tistory.com/520 [Sass] background-image에 SVG를 넣어 사용하기 1. SVG 코드를 활용할 순 없을까? See the Pen gyrqYe by zinee (@zineeworld) on CodePen. 2. SVG 코드를 Data URI로 변환하기 검정색 아이콘이 SVG의 Data URI 값을 넣은 것이고, 파란색이 SVG 코드를 그대로.. zinee-world.tistory.com 발표영상 www.youtube.com/watch?v=Eky82h2M3Mc&t=357s

2020.07.24. 공지 [안내] 2차 도메인 사용 시 유의사항 안녕하세요. 티스토리팀 입니다. 티스토리는 블로그 개설 시 지정하신 블로그 주소 (000.tistory.com)외 가지고 계신 별도의 도메인 (www.000.com 등)으로도 서비스를 이용하실 수 있도록 2차 도메인 연�� notice.tistory.com 안녕하세요. 티스토리팀 입니다. 티스토리는 블로그 개설 시 지정하신 블로그 주소 (000.tistory.com)외 가지고 계신 별도의 도메인 (www.000.com 등)으로도 서비스를 이용하실 수 있도록 2차 도메인 연결을 제공하고 있습니다. 브라우저 정책 변경 등의 이유로 이미 주요 블로그 서비스에서 별도 도메인 연결을 중단하고 있으나 저희는 이용자의 확장성과 효율성을 최대한 보장한다..

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..

revert 키워드 지원 스타일 창의 자동 완성 UI는 revert CSS 키워드를 감지합니다. revet 키워드는 현재 적용된 스타일이 적용되지 않았을 경우 캐스케이딩 된 값을 보여줍니다. revert는 initial과 다릅니다. developer.mozilla.org/en-US/docs/Web/CSS/revert 에서 정확한 기능을 확인하세요. See the Pen [CSS] revert keyword by zinee (@zineeworld) on CodePen. Chromium Bug: #1075437 이미지 미리보기 스타일 창에서 background-image 값 위에 마우스를 올려 놓으면 툴팁에서 이미지의 미리보기를 볼 수 있습니다. Chromium Bug: #1040019 새로운 색상 표기법 ..

download 특성으로 를 PNG로 저장하기 download 특성과 data: URL을 사용해 요소의 콘텐츠를 이미지로 저장할 수 있습니다. 저장 링크를 가진 그림판 예제 See the Pen [HTML] Download Canvas to PNG by zinee (@zineeworld) on CodePen. 브라우저 호환성

요구사항 나는 1배수/2배수 스타일이 따로 필요하지 않았다. 2배수 이미지로 만들어진 스프라이트 이미지와 1배수 사이즈 기반으로 작성된 코드만 있으면 되었기에 좀 더 파보기로 했다. 1. 원하는 scss 파일 형식으로 자동화 하기 (100% 성공) 2. 이미지 최적화 적용 (50% 성공) 원하는 SCSS 파일 형식으로 자동화하기 gulp 패키지 추가 설치 이미지 최적화를 위해 아래 패키지를 추가로 설치한다. npm install --save-dev gulp-imagemin vinyl-buffer gulpfile.js ⚠️ spConfig 안에 있는 경로값는 각자의 환경과 다르므로 주의하길 바란다. const gulp = require('gulp'); const buffer = require('vinyl-..