단순하게 원하는 곳에 아이디를 만들고, 링크에 타겟 이동 하면 되는데 앵귤러에서는 제대로 작동하지 않아서 찾아보니 아래와 같은 방법이 있었다. 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..

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

다양한 이메일 클라이언트이메일 클라이언트는 정말 다양하기 때문에 우선순위를 정해서 적용하는 것이 바람직하다. Gmail을 쓰는 유저의 경우에도 모바일 웹(크롬, 사파리, 삼성브라우저, 웨일 브라우저)에서 열어보는지, 앱(지메일, 메일앱에 지메일연동, Outlook앱에 지메일 연동)을 통해 열어보는지 바로 알 수는 없습니다. 그래서 테스트 해야할 양도 늘어나게 된다. 하지만 모든 테스트 환경을 갖추고서 확인하기는 쉽지 않기 때문에 메일링 서비스가 매우 중요하다면 아래와 같은 유료 서비스를 통해서 검증할 수도 있다. HTML Email Check and Validation Tool | HTML Email CheckCheck the markup (HTML, XHTML, CSS) of HTML emails an..

입사하고 처음 할당 된 메인 업무였습니다. 처음에는 디자인팀에서 티스토리 스킨 편집에서 어려움을 겪으시면 돕는 개념으로 투입이 되었으나 TF로 발령이 나면서 생각보다 오랜 기간 작업을 하게 되었습니다. 원래 티스토리 블로그를 사용 중이어서 낯설지는 않았지만 이정도로 스킨 편집을 해본 건 처음이라 크고 작은 시행착오들이 많이 있었습니다. 나름 이것저것 손 댄 것이 많아서 주요 수정사항들을 정리해 보았습니다. 최종 요구사항메인슬라이더 기능커버영역 비디오 삽입공통카테고리 추가, 카테고리별 색상 추가채용 섹션 추가푸터 확장게시글 리스트 형식페이지목차 추가각주 추가내부 포커스 링크 생성작성자 서명 추가채용공고 추가latex 플러그인 추가 1-1. 메인 슬라이더 기능기본적인 커버영역 슬라이더가 제공되고 있긴 했지만..

어떤 의도를 가지고 디자인이 변화하게 되었는지를 아는 과정은 참 흥미롭다. 10년도 더 된 글이지만 네이버 디자인팀에서 정리해 준 글 들이 있어서 묶어보았다. 전국민이 사용한다고 해도 과언이 아닌 녹색창 메인 화면을 개선한다는 건 정말 쉬운 일이 아닐 것 같다. 좋은 싫든 익숙함에서 조금만 벗어나게 되면 일단 혹평부터 듣게 되니까 말이다. [디자인] 날개모자는 네이버에 언제 등장 했을까요? 되돌아 본 네이버 메인 디자인의 변화 산뜻하고 세련된 디자인은 네이버가 이용자 여러분께 많은 사랑을 받... blog.naver.com [디자인-웹] 네이버 메인 페이지에 담고 싶은 가치 메인 페이지 디자인 두 번째 이야기 ‘집에 담고 싶은 모든 가치’라는 아파트 브랜드 광고 카피가 있었죠?... blog.naver...

비디오 영역에 재생버튼이 한가운데에 뙇! 보이는 이슈가 제보되었으나 재현이 되지 않아서 궁금해하고 있었다. 디자인 팀장님께서 아이폰 저전력 모드에서 그런 현상이 발생한다고 알려주셔서 처음으로 원인을 알게 되었다. 우측상단 배터리가 노란색으로 표시되고 있다면 저전력 모드였던 것이다! 제보 스크린샷을 다시 확인해보니 저전력 모드인 것이 맞았고, 나도 설정 > 배터리 > 저전력 모드를 활성화 시키고 다시 확인해 보니 재현이 되었다. 유사 증상에 대해 가장 많이 추천되고 있는 방법은 아래와 같다. (2014년 글!! https://stackoverflow.com/questions/8911247/hide-iphone-html5-video-play-button) 하지만 ios10 까지는 먹혔던 것 같은 트릭이 이제..

회사를 옮기거나 새로운 맥 장비 세팅을 할 때 내가 항상 하는 것들을 글로 정리해봤다. 개인적으로 이거 없이는 절대로 일 못한다!! 싶은 것들로만 적었다. 1. 손쉬운 사용 > 포인트 제어기 > 트랙패드 옵션 > 드래그 활성화 [체크] > 세 손가락으로 드래그하기 2. 키보드 > 단축키 > 스크린샷 설정 변경 3. Safari 로 Chrome 을 다운 받아 설치 https://www.google.com/intl/ko/chrome/ 4. Spectacle 설치 https://www.spectacleapp.com/ 화면 분할해주는 유틸인데 이거 없으면 일 못함.... 5. Kakaotalk PC 버전 설치 https://apps.apple.com/us/app/kakaotalk/id869223134?mt=12..

ACL (Access Control List, 접근 제어 목록) 접근 제어 목록[1](access control list, ACL) 또는 액세스 제어 목록[2]은 개체나 개체 속성에 적용되어 있는 허가 목록을 말한다. 이 목록은 누가 또는 무엇이 객체 접근 허가를 받는지, 어떠한 작업이 객체에 수행되도록 허가를 받을지를 지정하고 있다. 전형적인 ACL에서 목록 안의 각 항목은 주제나 운영을 지정한다. 이를테면 XYZ 파일에 대한 ACL 위의 항목(Alice, delete)은 Alice에게 XYZ 파일을 삭제할 허가 권한을 제공한다. ACL 기반 보안 모델에서, 객체가 어떤 한 객체에 작업 수행을 요청할 때, 시스템은 먼저 적용할 수 있는 항목의 목록을 확인하여 운영의 처리 여부를 결정한다. https:/..