전체 글(107)
-
[Utility] Spectacle, 무료로 화면 분할 프로그램 이용하는 법 (for Mac)
Spectacle은 무료로 화면 분할 서비스를 제공해 주는 응용 프로그램입니다. 아쉽게도 더 이상 업데이트 및 유지보수는 하지 않는다고 합니다! 맥유저로써 화면 전환으로도 작업 스페이스를 다양하게 사용할 수 있어서 만족하지만 듀얼 모니터가 아니기에 화면 분할 기능이 너무 강력하게 다가왔습니다. 단축키로 브라우저 창 사이즈를 조절도 할 수 있고 이동도 할 수 있어서 마우스보다는 키보드를 선호하는 저는 무척 만족하는 프로그램이라 이렇게 소개드립니다. Spectacle 홈페이지 접속 Spectacle 홈페이지에 접속하셔서 Download Spectacle 버튼 클릭하셔서, 다운로드하시면 됩니다. Spectacle www.spectacleapp.com Spectacle 응용 프로그램 실행 받아진 파일의 압축을 ..
2023.03.31 -
[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자
이전 포스팅에서 github pages로 간단하게 사이트 url을 생성해 본 적이 있었는데요. [git] github pages로 나만의 포트폴리오 웹페이지 배포해 보기 [git] github pages로 나만의 포트폴리오 웹페이지 배포해보기 개발자들은 버전관리시스템(Version Control Systyem)으로 git을 많이 사용하는데요. github 서비스로, 계정만 있다면 무료로 웹페이지를 호스팅(hosting)할 수 있는 방법에 대해서 알아보겠습니다. 배포할 dev-chim.tistory.com 포트폴리오 페이지나 제안 작업 시, url 생성 및 도메인이 필요할 때가 있습니다. 무료로 웹호스팅을 지원해 주는 사이트들도 다양하지만 본인이 직접 서버를 세팅해 본다는 것이 의미가 있으니, fireba..
2023.03.30 -
[Javascript] 다양한 방법으로 요소의 높이값 구하기, clientHeight, offsetHeight, scrollHeight, getBoundingClientRect().height
다양한 방법으로 요소의 높잇값 구하는 방법에 대해서 알아보겠습니다. 요소의 높이값을 구하는 속성으로 clientHeight, offsetHeight, scrollHeight 그리고 메서드로 getBoundingClientRect().height 가 있습니다. 어떤 차이점이 있는지 알아보도록 합시다. 1. clientHeight 해당 요소의 내부 높이를 반환합니다. 콘텐츠(contents)와 패딩(padding)을 포함하지만 테두리, 스크롤바는 제외합니다. const elHeightValue = el.clientHeight; 2. offsetHeight 해당 요소의 콘텐츠(contents)와 패딩(padding), 테두리(border)를 포함한 전체 높이를 반환합니다. 스크롤바는 제외합니다. const e..
2023.03.28 -
[git] github pages로 나만의 포트폴리오 웹페이지 배포해보기
개발자들은 버전관리시스템(Version Control Systyem)으로 git을 많이 사용하는데요. github 서비스로, 계정만 있다면 무료로 웹페이지를 호스팅(hosting)할 수 있는 방법에 대해서 알아보겠습니다. 배포할 레파지토리(repository)의 Settings 클릭 우선, github 페이지에 접속하셔서 계정 로그인 처리를 합니다. 레파지토리(repository) 목록들 중 내가 배포할 레파지토리를 선택합니다. 아래는 bts_promo 레파지토리를 선택한 화면입니다. Settings를 클릭하세요. Pages 클릭 왼쪽 사이드바 메뉴들 중, Pages를 클릭합니다. 브랜치(branch)를 main으로 변경 Build and deployment > Branch > None을 main으로 S..
2023.03.28 -
[CSS] Animation 속성 정리, 참고 사이트 추천
자주 사용하는 속성은 막힘없이 써 내려가지만 헷갈리는 속성들이 있어서, 내용을 정리하는 차원에서 포스팅 시작하겠습니다. 1. animation-name : 애니메이션 이름 @keyframes에 애니메이션을 정의할 이름 2. animation-duration : 애니메이션 재생시간 초기값(default): 0s * 초(s), 밀리초(ms) 단위로 설정할 수 있습니다. 3. animation-timing-function : 애니메이션 진행 스타일 초기값(default): ease ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, steps, cubic-beszier 4. animation-delay : 애니메이션 지연시간 초기값(defa..
2023.03.24 -
[Server] 외부에서 파일을 보다 안전하게 공유하는 방법 (feat. Synology Nas Server)
일을 하다 보면 잠시 자리를 비우는 동안 업무 요청사항이 올 때가 있습니다. 그럴 때마다 바로바로 대응을 해줘야 하는 경우에 마음이 급할 때가 있지요 이런 상황에 외부에서 파일을 보다 안전하게 공유하는 방법에 대해서 알아보겠습니다. 참고로 사내 서버는 시놀리지 나스 서버를 이용하고 있습니다. 1. DS file 앱을 다운로드하고, 계정 로그인을 합니다. 2. 파일 트리에서 공유하고자 하는 파일의 더 보기 아이콘을 클릭합니다. 3. 공유 링크를 클릭합니다. 4. 다음 버튼을 클릭합니다. 또 옵션으로 유효기간 및 암호를 설정해서 조금 더 보안적으로 안전하게 파일을 공유할 수도 있습니다! 이런 경우 서버 전체를 공유하지 않고도 원하는 파일만 공유할 수 있어서 유용한 것 같습니다. 5. 다양한 방법으로 파일을 ..
2023.03.23