![]()
이미지 스프라이트 진짜 귀찮은 작업이다. 아이콘 하나 업데이트 될 때마다 다시 해야하니 여간 번거로운 일이 아니다. 하지만 자동화 방법 찾는 것도 귀찮아서 미루다가 오늘 잠깐 시간이 나서 방법을 찾아봤다. 그 중에서 가장 많이 사용되고 있는 gulp.spritesmith 방법으로 진행해보았다. gulp란? gulp(걸프)는 Fractal Innovations과 깃허브 오픈 소스 커뮤니티의 오픈 소스 자바스크립트 툴킷으로, 프론트엔드 웹 개발의 스트리밍 빌드 시스템로 사용된다. Node.js와 npm 기반의 태스크 러너이며, 소형화, 연결(concatenation), 캐시 버스팅(cache busting), 유닛 테스트, 린팅, 최적화 등 웹 개발에 수반되는 시간 소모적이고 반복되는 태스크들을 자동화하기 ..
![]()
요약 출처 : https://hyunjun19.github.io/2018/03/23/package-lock-why-need/ package-lock.json 파일은 의존성 트리에 대한 정보를 모두 가지고 있습니다. package-lock.json 파일은 저장소에 꼭 같이 커밋해야 합니다. package-lock.json 파일은 node_modules 없이 배포하는 경우 반드시 필요합니다. 참고 package-lock.json은 왜 필요할까? (2018) package-losk.json에 대해 알아보기 (2018) package-losk.json에 관하여 (2019) 내 마음을 불편하게 만드는 package-lock.json (2019)
![]()
지원 여부 확인 방법 https://www.caniemail.com/ caniuse 처럼 이메일에서 사용가능한 css 속성을 확인해 볼 수 있는 사이트가 있다. https://www.campaignmonitor.com/css/ 최근에 찾은 사이트인데 caniuse 보다 훨씬 더 좋은 것 같다. CSS Support Guide for Email Clients A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet. www.campaignmonitor.com Email Client Support Scoreboard 최하위 지원률을 보여주는 windows여.... ..
![]()
가장 빈번하게 오는 디자인 요청사항 중 하나가 바로 "스크롤 시 GNB 색상을 바꿔주세요!" 이다. 보통 처음에는 투명색이었다가 스크롤 시 컨텐츠와 구분이 되도록 GNB에 배경색을 채워 넣는 형태이다. IE 에서 테스트 하는데 제대로 동작이 되지 않아서 원인을 찾아봤더니 scrollY의 호환성 이슈였다. Sample Code let last_known_scroll_position = 0; let ticking = false; function doSomething(scroll_pos) { if(scroll_pos > 10) { document.querySelector('.nav').classList.add('is-scroll'); } else { document.querySelector('.nav').cl..
![]()
flex는 이제 현업에서 자주 쓰는데 grid를 현업에서 사용하는 경험이 없었습니다. 현업에 적용하지 않으면 사실 머리속에 자리잡기가 어려운 것 같아요. 그래서 이번에 블로그 디자인 커스텀 하면서 그리드를 사용해 보기로 마음먹었습니다. 안 되는 것도 물론 많지만 기본적은 것들은 어느 정도 fallback 코드로 IE에서 적용되게 할 수 있었습니다. 먼저 읽어보면 좋을 글 아래 글을 정말로 강추합니다!!! 사실 여기에 거의 grid 의 모든 것이 담겨져 있어요. 저도 개념잡을 때 정말 많이 참고했답니다. 저는 가장 핵심적이고 기초적인 레이아웃에 대해서만 정리해볼까 합니다. 좀 더 자세하고 전반적인 내용은 아래글을 참고해주세요~ 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들..
![]()
예제) Flex를 활용한 푸터 위치잡기 Header Footer 흔히 flex를 사용할 때, 위의 예제 코드처럼 margin-top: auto; 를 사용하면 푸터가 바닥에 쉽게 붙일 수 있다. 문제) IE에서는 min-height 값만으로는 적용불가 그런데 ie에서 제대로 적용되지 않는 margin: auto; 값을 제대로 표현해주지 않을 때가 있다. 부모 요소의 높이를 min-height로 잡는 경우에는 적용되지 않는 것을 확인할 수 있다. 해결방법) min-height 보다 작은 값의 height 값을 지정해준다. Header Footer 제일 작은 사이즈의 핸드폰 해상도도 320x568 이기 때문에 height는 임의로 500px을 넣었다. (사실 코드 동작은 height: 0; 만 넣어도 된다.)..
![]()
단순하게 원하는 곳에 아이디를 만들고, 링크에 타겟 이동 하면 되는데 앵귤러에서는 제대로 작동하지 않아서 찾아보니 아래와 같은 방법이 있었다. https://stackoverflow.com/questions/46658522/how-to-smooth-scroll-to-page-anchor-in-angular-4-without-plugins-properly How to smooth scroll to page anchor in angular 4 without plugins properly? What I want to achieve is a click to and do a smooth scroll to bottom / specified div area which i define with hashtag just ..
![]()
만드는 방법 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..
![]()
NULI 모두를 위한 제품 및 서비스 구글 검색에서 지원하는 접근성을 위한 기능들 및 고려사항들을 소개하고, 구글플레이에서 접근성 관련하여 어떤 프로젝트들을 어떤 방식으로 진행하고 있는지 알� nuli.navercorp.com 12:30~13:00 행사 등록 13:00~13:10 개회 13:10~13:50 세션 1. 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성 13:50~14:20 세션 2. AudioBook! AudioClip 14:20~14:50 세션 3. WCAG 2.1 Reflow 성공 기준에 대응하는 우리들의 자세 14:50~15:20 세션4. 비슷하지만 다른 웹과 모바일 접근성 15:20~16:00 Break Time 16:00~16:30 세션 5. 스크린리더 사..
![]()
Chrome Dev Summit 2018에서 처음 공개 된 Portal https://www.zdnet.com/article/google-launches-portals-a-new-web-page-navigation-system-for-chrome/ Google launches Portals, a new web page navigation system for Chrome | ZDNet Google Chrome developers launch new iframe replacement tech. www.zdnet.com https://web.dev/hands-on-portals/ Hands-on with Portals: seamless navigation on the Web The newly proposed ..
