전체 글 53

[잡담] 깃헙 데스크톱 vs 소스트리

깃데 아주 잘 쓰고 있었는데 브랜치 그래프가 안보여서 (원래 깃헙 홈페이지에서도 그래프 보려면 결제해야하는 것으로 알고 있다.) 회사 개발자 한분이 소스트리를 사용중인걸 봤는데 그래프가 기본적으로 제공되는 것 같아서.. 갈아타야 하나 고민이된다. 브랜치가 어떻게 빠졌고 병합이 되었는지 여부를 눈으로 보는게 개발하면서 고민을 줄여준다고 생각한다.. 흠..

카테고리 없음 2023.08.28

[CSS, JAVASCRIPT] onafterprint, onbeforeprint, 미디어쿼리 디바이스 분기를 이용한 프린트 퍼블리싱

크롬에서 [Ctrl + P] 를 누르면 현재 열고 있는 웹페이지의 인쇄 미리보기 레이어가 나타나잖아요? 그렇지만 예시로 수료증/증명서인 경우 최종적으로 인쇄되어 나올 용지에 알맞는 HTML만 리렌더링 되어있어야 할 거예요 1. [Javascript] window.onafterprint , window.onbeforeprint 이런 경우를 대비하여 만들어진 자바스크립트의 두가지 메서드를 소개해 드릴게요! window.onafterprint 와 window.onbeforeprint 에요. 말 그대로 인쇄 미리보기 (앞서설명한 Ctrl+P 할때나오는 브라우저의 인쇄 미리보기 레이어) 직전에 호출할 함수를 넣을 수 있고 인쇄 직후에 호출할 함수를 넣을 수 있어요. window.onload = function()..

[CSS] 이미지 비율 유지하기 (.sustain_ratio_img)

//이미지 비율 유지하기 : S //사용법: // .sustain_ratio_img { display: block; width: 100%; height: 0; padding-bottom: calc(100% * ( var(--pc-height) / var(--pc-width) )); background-position: center center; background-repeat: no-repeat; background-size: cover; text-indent: -9999px; &.is_mobile { padding-bottom: calc(100% * ( var(--mobile-height) / var(--mobile-width) )); } } //이미지 비율 유지하기 : E 반응형으로 어느 가로폭에서든..

[Typescript] 타입스크립트에서 !(느낌표)란 무엇을 의미할까?

선언부에서 사용한 변수혹은 인자가 (undifinded or null)일 수 있는 상황에서 계산식을 사용하면 계산이 불가능할 상황이 올 수 있기 때문에 타입스크립트는 이것을 에러로 표시한다. 그래서 느낌표를 사용하면 "null 이나 undifined가 될 일 절대없으니까 안심하고 계산해~" 라는 의미가 된다. 나이스!!

Flex를 이용한 Grid 사용방법 (Html단계에서 반응형까지 커버하기)

1탄에서는 기초적인 원리를 설명했다고 하면 2탄인 지금에서는 그것을 플러그인(?)화를 한 것입니다. 틀은 알고 있으니 매번적기는 뭐하고 아예 함수화를 해버린 것이지요 var의 우선순위 적용하는 방법 적용하느라고 애먹었네요 중간단계가 빠져 있으면 상위에 적은 값이 적용되도록 작성한 코드입니다. 사용법은 .flexgrid-list .flexgrid-item 을 사용하면 됩니다. 추가로 작성된 responsive-height도 마찬가지로 html단에서 height를 반응형으로 조절할 수 있게 됩니다. 자세한 어트리뷰트의 값 넣는 방법은 아래 코드를 확인해주세요 //아래는 scss입니다 .responsive-height { height: var(--height); } .flexgrid { &-list { dis..

[css] flex, gap을 이용한 박스 리스트 grid 만들기

가끔, 이런 경우가 있습니다. 보통의 퍼블리셔는 디자인 시안 그대로를 퍼블합니다. 이는 잘못된게 아니고 자신의 일을 잘하는것입니다. 개발을 고려한 퍼블리싱을 하는 사람은 은근히 드물기 때문인것 같습니다. 하지만 개발이 들어갈 경우 css를 수정해야할 경우가 많이 발생하게 됩니다. 그 예로, 한줄에 3개의 아이템이 들어가는 형태를 퍼블리싱 했을때 flex를 이용하여 justify-content를 sapce-between으로 코딩했다면 2개의 아이템이 있을때는 말 그대로 양쪽으로 분산된다. 1개 혹은 2개 혹은 4개.. 즉, 3n+m개의 아이템이 있을 경우는 대비하지 않은 것입니다. 실제 작동할 때는 항상 아이템이 3개만 표시되라는 법은 없기도 하구요. 이러한 경우를 고치기 위해서 아래 방법을 사용해보는것은..