-
[비공개] 부트스트랩5 알파에 '그리드 레이아웃'이 없다.
(adsbygoogle = window.adsbygoogle || []).push({}); 이 블로그가 아닌 다른 티스토리 블로그를 부트스트랩4로 만들었다. 부트스트랩4가 적용된 그 블로그에 부트스트랩5 알파의 CSS와 자바스크립트를 그대로 적용해서 얼마나 변했는지 확인해 본다. 몇 년 전 부트스트랩4가 나왔을 때도 부트스트랩3으로 만든 이 블로그를 부트스트랩4를 적용한 적이 있다. 그래서 부트스트랩4로 만든 티스토리 블로그에 5 알파의 CSS와 자바스크립트를 적용했다. 적용 결과 시간을 들여 전체적으로 봐야 하지만 대부분 크게 눈에 띄가 다르게 보이는 것은 없었다. 내 블로그에서 눈에 뛴게 없었다는 것이다. 예로 아래와 같은 캐러셀은 변화가 없었다. 참고로 부트스트랩3에서 그리드가 변해 캐러셀을 변화가 많았다. 바로 눈에 띄는 부분은 커버의 card grid 와 링크 부분이었다. 그래서 부..추천 -
[비공개] 동영상을 GIF 변환을 위해 확장프로그램 설치
(adsbygoogle = window.adsbygoogle || []).push({}); 동영상 파일형식인 MP4를 GIF으로 변환할 때 https://convertio.co/kr/ 홈페이지를 방문하여 변환할 수도 있다. 하지만 나는 크롬 브라우저를 사용하므로 아래 그림 1번처럼 크롬확장프로그램을 설치한 후 동영상변환프로그램을 클릭하여 mp4를 gif으로 변환할 수 있다. Convertio 크롬확장프로그램(크롬) 그러면 홈페이지를 방문하지 않고 크롬에서 변환할 수 있다. 그렇다고 홈페이지에 방문해 변환하면 알 수 있지만크롬확장프로그램에 사용한다고 대단히 편리한 것은 아니다. 내 생각이지만 크롬확장프로그램은 즐겨찾기 역할인 것 같으니 차라리 즐겨찾기를 등록하는 것이 좋을 것도 같다. 아마 변환을 자주 이용하지 않는다면 크롬확장프로그램이 크롬 등을 느리게 할 수 있다. 아래 그림은 나의 웨일 브라우저로 그림을..추천 -
[비공개] 부트스트랩5 알파가 나왔다는 것을 알았다
(adsbygoogle = window.adsbygoogle || []).push({}); 우연히 다른 블로그를 살펴보다가 부트스트랩5 정식 버전이 아닌 알파가 나왔다는 것을 알게 됐다. 그래서 부트스트랩 공식 홈페이지를 방문했더니 아무 소식이 없길래 내가 잘못 봤다고 생각했다. 혹시나 해서 부트스트랩 홈페이지를 공식 블로그를 방문했더니 거기에 5 알파 버전에 대한 내용이 있었다. 위키백과에 따르면 알파 버전은 개발 초기에 있어 성능이나 사용성 등을 평가하기 위한 테스터나 개발자를 위한 버전이라고 한다. 그리고 추가적인 설명이 있는데 미구현 기능이 있거나 동작이 불안정하거나 예상 외의 동작을 하기도 하는 버그가 다수 존재하는 경우가 많고, 심한 경우에는 시스템에 심각한 데미지를 주는 경우 조차 있다. 이 때문에 베타 버전과는 달리 알파 버전이 외부에 공개되는 경우에..추천 -
[비공개] 우분투에서 오피스
(adsbygoogle = window.adsbygoogle || []).push({}); 데비안 리눅스를 기반으로 개발됐으며, 데비안에 비해 사용 편의성에 초점을 맞춘 리눅스 배포판이면서 무료인 우분투를 얼마 전에 윈도우7을 지워버리고 내 예전 컴퓨터에 설치했다. 우분투를 설치하면 기본으로 설치되는 오피스는 리브레오피스이다. 참고로 우분투를 비롯한 리눅스 운영체제는 무료이다. 우분투를 설치하면 리브레오피스를 설치하는 것이 아니라 우분투를 설치하면 기본으로 설치된다. 그리고 리브레오피스는 리브레오피스는 자유 및 공개 소스 프로그램이면서 윈도우 버전도 있으며 마찬가지로 무료이다. 리눅스가 아니라도 윈도우에서 설치해 사용할 수 있다. 윈도우에 MS오피스, 한컴오피스 등 오피스의 많은 대안이 있으니 리브레오피스에 손이 갈 지...하지만 비용 걱정이 된다면 기업..추천 -
[비공개] JSFiddle과 코드펜 삽입은 이상 없었다
(adsbygoogle = window.adsbygoogle || []).push({}); 전에 새 에디터에서 CSS가 사라진다고 적었다. 그래서 온라인 코드 편집기인 JSFiddle과 코드펜(CodePen)의 코드를 작성하여 거기에서 작성한 것을 퍼와 삽입하는데 그것을 점검하고자 한다. 참고로 글에 나오는 온라인 코드 편집기인 JSFiddle은 100% 무료이고 코드펜(CodePen)은 부분 유료이다. 그리고 아래 글에서 JSFiddle과 CodePen에 대해서 부족하지만 적었었다. JSFiddle에서 CodePen으로 JSFiddle을 사용하여 HTML, CSS, 스크립트 등을 테스트한다. 예로 나는JSFiddle에서 아래와 같은 부트스트랩4의 캐러셀(Carousel)이라는 것을 테스트한 적이 있다. 부트스트랩4의 여러 가지 기능을 보고�� min-blog.tistory.com JSFiddle 이 블로그는 부트스트랩3를 사용했기 때문에 아래는 예전에 부트스트랩 4에서 캐러셀(Carousel)이 어떤지 보기 위해 JSFidd..추천 -
[비공개] 백업과 복원을 생각한다면 워드프레스나 구글블로그
(adsbygoogle = window.adsbygoogle || []).push({}); 2016년 12월 21일에 티스토리 블로그 데이터 백업 기능이 종료했다. 만약을 대비해 나는 티스토리 블로그 백업한 데이터를 XE(제로보드XE), 텍스트큐브, 워드프레스로 옮기는 연습을 많이 했다. 그리고 워드프레스에서 복원을 지원하는 구글블로그 등 다양한 블로그도 알아봤다. 또한 PDF 형식으로 글을 백업하는 방법도 적었었다.이제는 백업이 종료한 지금 대부분이 소용없으나 PDF 파일로 백업하는 방법은 그래도 쓸만하다. 그때는 티스토리 블로그에 대한 확신도 없었으므로 백업이 정말 중요했다. 참고로 2014년에 적었던 글로 PDF로 백업하는 것으로 네이버 등 쓸데없는 내용은 넘어갔으면 한다. 티스토리에서 PDF로 글 저장하기 티스토리 블로그에서 제공하는 백업은 블로그의 전체 데이터를 XML 백업하는 것이라..추천 -
[비공개] 사라졌는지 확인
(adsbygoogle = window.adsbygoogle || []).push({}); .itemsContainer { position:relative } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .3s ease; background-color: red; } .itemsContainer:hover .overlay { opacity: 0.3; } .icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } 개인적으로 아래처럼 이미지에 마우스 포인터를 올리면 이미지 중앙에 아이콘이 나오게 하는 것을 좋아한다. 그래서 이 글에서 어떻게 적용하는지 소스 등을 이 블로그 글에 적용했는지 설명하려고 했다. 그런데 메모한 것을 수정하려고 하면 작성한 CSS가 사라져 그냥 적용과정을 적기보다 아래와 같은 것을 적용하는 것을 배울 수 있는 사이트를 적는 것이 좋다고 ..추천 -
[비공개] 에디터 전환할 때 걱정
(adsbygoogle = window.adsbygoogle || []).push({}); 아래 그림처럼 구 에디터로 작성한 글을 수정하기 위해 열면 새로운 에디터로 글을 수정해보라고 한다. 그래서 나는 새 에디터에 있는 오픈그래프 링크 기능 등 사용하기 위해 자주 변환한다. 글수정 시 새 에디터에서 많이 사용하는 기능은 웹페이지 링크를 복사하여 붙이면 아래와 같이 썸네일, 제목, 요약글이 나오는 오픈그래프 링크를 사용한다. 이런 것을 검색에서 찾으니 오픈그래프 방식이라고 하였다. 오픈그래프(Open Graph)라는 말은 처음 네이버 웹마스터 설정에서 처음 들었었다. 네이버 웹마스트 설정에서 Open Graph(오픈그래프)라는 단어가 나온다. 네이버에 블로그를 등록할 때 접할 것이다. 엑스키퍼 - 자녀의 올바른 스마트폰, PC 사용 습관을 만들어주는 필수 앱·프로그램 엑스키퍼는 스마트..추천 -
[비공개] 지금까지 사용하면서 새에디터의 좋은점
(adsbygoogle = window.adsbygoogle || []).push({}); 이 글에서 티스토리 새에디터를 사용하면서 좋은 점을 몇 가지 적어보려 한다. 만약 네이버 유입에 신경썼으면 새에디터를 사용못했을 것이다. 왜냐하면 새에디터를 사용하면 네이버 검색에 썸네일이 안 나오기 때문이다. 올해 4월부터 네이버 유입에 신경 쓰지 않기 때문에 썸네일이 나오는 구에디터 대신 새 에디터를 사용하고 있다. 동영상 삽입 에디터에 링크만 붙여 넣으면 유튜브 등 동영상을 삽입할 수 있다. 그러면 동영상을 쉽게 삽입할 수 있으면서 원하는 곳에 정확히 영상을 삽입할 수 있다. 구에디터를 사용할 때 외부링크를 사용해서 크게 불편한 것은 없었지만 좋았다. 혹시 구에디터에서 HTML 모드에서 동영상을 삽입했다면 정말 편할 것이다. 어떤 사람에게 편할 지 몰라도 나에게 이런 것이 그..추천 -
[비공개] 머리카락 날리는 GIF애니메이션 만들기
(adsbygoogle = window.adsbygoogle || []).push({}); 무료로 사용할 수 있는 모바일 앱에포토디렉터가 있다. 이 글에서 이 앱을 이용해서 아래에서 볼 수 있는 머리카락 날리는 GIF 애니메이션을 만들어 보려 한다. 머리카락 날리는 것을 정교하게 만들지 못했으니 이해하기 바란다. 참고로 포토디렉터 모바일 앱은 무료인데 무료를 사용하면 아래 그림을 보듯이 PhotoDirector라는 워터마크가 생긴다. GIF 애니메이션은 에디터로 삽입할 때 동영상이 아니고 사진으로 삽입해야 한다는 것을 알 것이다. GIF 애니메이션을 JPG,PNG 등과 같은 사진 파일형식이다. 나는 포토디렉터를 구글플레이에서 포토디렉터라는 키워드를 입력하여 설치했다. 머리카락이 날리는 GIF 애니메이션을 만드는 과정의 중요한 부분은 사진으로 설명한다. 최종적으로 녹화한 동영상으로 설명한다. 그..추천