[HTML] 핵심 웹 요소 <img> 어디까지 알고 있나?
·
개발일지/2021
핵심 웹 요소 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..
[Angular] host에 class 넣는 방법
·
개발일지/2021
@Component({ selector: 'admin-lnb', templateUrl: './admin-lnb.component.html', styleUrls: ['./admin-lnb.component.scss'], host: { class: 'block' } // 이렇게 하면 됩니다. }) https://stackoverflow.com/questions/34641281/how-to-add-class-to-host-element How to add "class" to host element? I dont't know how to add to my component a dynamic class attribute but inside the template html (component.html). The o..
[SVG] 제플린에서 뽑은 svg 에셋이 디자인과 달리 미묘하게 색이 흐리다면?
·
개발일지/2021
제플린에서 뽑은 svg 에셋이 디자인과 달리 미묘하게 색이 흐리다면? 원인은 스케치에서 tint 로 색상값을 조절한 경우 → svg 코드 상에 feColorMatrix 가 생성되어 이 부분이 색상 차이를 유발함 → 번거롭라도 아래와 같이 fill, border 색상을 직접 변경시켜줘야 함! AS-IS TO-BE 이 바로 들어가진 형태여야 오차없이 표현됩니다!
[레퍼런스] 스크롤 다운에 맞춰 카드가 겹쳐지는 인터랙션 (position: sticky) #애플뮤직
·
개발일지/2021
이렇게 카드가 겹쳐지는 인터랙션을 position: sticky로 구현하고 있는데 IE에서는 지원이 되지 않는 속성이다. IE에서는 어떻게 예외처리 했을까 적용안되도록 놔뒀을까 궁금해서 들어가봤는데 아예 IE로는 접속되지 않도록 Edge로 자동 재접속 되도록 설정을 해놨다.
[CSS] IE 에만 적용하기 / CSS only for IE
·
개발일지/2020
시스템 기본 폰트를 사용한다면 같은 글자수여도 맥의 가로폭과 윈도우의 가로폭이 다르다. 이럴때 흔히 'IE만 자간 조정 가능한가요?' 라는 질문을 받게 되는데, 쉽게 생각하기엔 userAgent 체크를 해서 해당 브라우저가 IE인지 아닌지 판단하고 IE 일때 특정 클래스를 넣어서 블라블라~ 이런 식으로 의식의 흐름이 닿아서 '아... 굳이...?' 이런 생각이 들었다. 그러다 며칠전에 특정 브라우저일때를 미디어쿼리로 판단하는 핵을 봤던게 생각이 나서 IE도 있을 것 같아서 검색을 해봤다. 역시나 있었다. 나는 일을 시작한 이래로 쭉 글로벌 서비스 위주로만 일을 했어서 사실 IE 대응이 능숙하진 않다. 그래서 다들 이미 알고 있을 수도 있지만 이렇게 새롭게 알아가는 것들이 생긴다. @media all an..
[Git] 깃플로우 핫픽스 이해하기
·
개발일지/2020
핵심개념 핫픽스는 무조건 마스터 브랜치에서 딴다. 작업완료 된 핫픽스는 마스터와 디벨롭에 각각 적용한다. 추가사항 핫픽스 생성시에 태그를 따둔다. package.json 내 버전을 업데이트한다. 참고영상 git flow의 간략한 특징은 이렇습니다. 브랜치를 master, develop, feature, release, hotfixes로 구분해서 저장소를 운영합니다. master에는 완성된 버전만이 속해야 합니다. 언제나 실행 가능해야 합니다. 실제 개발은 develop에서 진행합니다. 신규 기능은 'feature/기능명'으로 구분해서 쉽게 버릴 수 있도록 하고 있습니다. 출시 준비는 'release/버전명'에서 진행하고 준비가 끝나면 master로 병합합니다. 긴급 수정사항은 'hotfixes/차기버전명..
[Git] git config --unset credential.helper (username, password 초기화)
·
개발일지/2020
깃헙에서 비밀번호를 변경 후에 로컬에서 푸시를 하려고 하면 에러가 난다. 바뀐 비밀번호를 적용해야 하는데 그 전에 초기화 하는 방법은 아래와 같다. $ git config --unset credential.helper 이후 git push 하면 다시 Username, Password 를 입력하라는 안내가 나온다. 이에 맞춰서 다시 업데이트 된 값을 넣어주면 완료!
앵귤러 스토리북(Storybook) 활용기
·
개발일지/2020
시작하며💡 안내이 스토리북 활용기는 마크업 개발자를 대상으로 작성되어 있습니다. 앵귤러의 아주 기초적인 기능을 활용한 방법이므로 프론트엔드 개발자 분들이 보시기에는 오류가 있을 수 있습니다. 더 좋은 방법이 있다면 코멘트로 알려주세요 :) 마크업 개발을 하는 사람들은 저마다 다양한 방식으로 작업물을 관리합니다. 프론트엔드 개발과 완전히 동떨어져서 정적인 결과물을 만드는 사람도 있고 별도의 마크업 산출물 없이 프론트 개발과 같은 선상에서 진행을 하기도 합니다. 마크업 개발자의 숙련도나 개발 환경에 따라 다르지만 마크업 개발도 더 나은 협업 방식에 대해 고민해야 한다고 생각합니다. 이 프로젝트 같은 경우에는 하나의 템플릿이 여러가지 케이스로 갈리는 화면들이 많이 필요했습니다. 기획자/디자이너와의 원활한 소..
[Angular/Storybook] Can't bind to 'x' since it isn't a known property of 'y'
·
개발일지/2020
dev.to/tasnimreza/remember-this-error-can-t-bind-x-since-it-is-not-a-known-property-of-y-4a8e