분류 전체보기 54

[잡담] 깃헙 데스크톱 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()..

[2022] 퍼블리셔에서 프론트엔드로의 전향기록

1. 현재 다니고 있는 회사는? 저는 서울 가산디지털단지에있는 한 웹 에이전시 및 웹 솔루션 제작업체(그냥 알아듣기 쉽게 웹에이전시라고 부르겠습니다)에서 퍼블리셔로 만 1년 9개월의 경력을 가지고있습니다. 재직중인 회사의 돈벌이 수단은 크게 두가지로 나뉩니다. 하나, 그누보드와 영카트를 이용한 저가홈페이지 제작사업. 회사에서는 이 사업을 일명 명함 홈페이지라고 부르곤 합니다. 주로 찾는 기업들이 중소기업인데 명함처럼 홈페이지의 구실만 갖추면 되는 단계의 기업이기 때문이죠. 둘, 프리모아나 크몽(일반적으로 프리랜서와 수요업체를 연결해주는 플랫폼으로 유명하지만 뒷쪽에서는 기업간 기업의 연결을 해준다고 합니다)에서 또는 대표님의 지인을 통해 비즈니스 로직이 각각 다른 외주를 받고 프로젝트를 진행합니다. 하는 ..

프론트엔드 2022.03.16

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