-
[비공개] 부트스트랩 슬라이드, carousel 효과
(adsbygoogle = window.adsbygoogle || []).push({});부트스트랩에포함된CAROUSEL 효과입니다. 아래에서 볼 수 있는 효과로 부트스트랩에서는 carousel이라고 합니다. 한글 부트스트랩에서는 캐러셀이라고 번역했더라고요. 사전을 찾아보니 회전목마, 컨베이벨트 등라고 하니 여러분도 찾아보세요. 그건 그렇고 이것을 구현하는 것은부트스트랩에 포함되어 있어서 소스만 알고 있다면 만드는 것은 대단한 것이 아닙니다. 모르면 대단히 어려운 효과처럼 보입니다.아래와 같은 효과를 만드는데 기본은 이미지의 크기의 가로가 1200 인 이미지가 필요합니다. 왜냐하면 1200이냐하면부트스트랩에서 container 설정시 가로폭은 1200이기 때문입니다. 부트스트랩을 익힌다면 알 것입니다.단 부트스트랩에서 container-fuild라고 설정했다면 가로폭은 1200이 아닙니다. 왜냐하면 contain-fluid..추천 -
[비공개] 미치겠네! 낮은 버전 익스플로러
(adsbygoogle = window.adsbygoogle || []).push({});며칠 전에 https://scrollrevealjs.org/에서 볼 수 있는애니메이션을 열심히 구현했습니다. 그런데 저의 컴퓨터에설치된 익스플로러 8로 보니 그 애니메이션을 사용한 것은 하나도 보이지 않았습니다. 전에 사용했을 때는 익스플로러 8에서 보였으나 이번에 업그레이드되면서 안 보이게 된 것입니다. 참고로 주로 사용하는 브라우저는 크롬이며 금융, 공공기관등의 사이트에서는 어쩔 수 없이 익스플로러를 사용합니다.애니메이션 등 점검시우리나라에서 사용자가 많은 익스플로러를 위해 익스플로러 8에서 보는 경향이 있습니다. 제가 주로 사용하는 크롬에서 보면 거의 문제가 없지만 낮은 버전의 익스플로러 8로 보면 안 나오는 경우가 많습니다.그 사이트 애니메이션을 익스플로러 8에서 점점만 했더라면....업그레이드 ..추천 -
[비공개] 티스토리 body id가 유용하네.
(adsbygoogle = window.adsbygoogle || []).push({});티스토리를 7 년을 하고 있는데 얼마 전에 치환자를 사용했네요.사용해보니 아주 유용하더라고요. 여기에서 그것에 대해 적으려고요.비록 제가 티스토리에 대해서 많이 다루었지만 스킨만들기에 대해 다루지 않아 몰랐거든요. 여담으로 저는 이 스킨을 만들면서로 할 수 있는 것은 아래 그림처럼 skin.html내에 을 사용했거든요. 얼마 전에 알았던로 할 수 있는 것은로 할 수 있어서 별 불편함이 없었습니다. 예로 스킨에 를 몰라도 치환자에 을 넣으면 됐거든요. 에 관련된 글을http://ccmscore.tistory.com/216에서 볼 수 있습니다. 그 글은2009년에 썼지만 도움이 될 것입니다. 그런데를 사용했습니다. 위에서 에 대해서 적었는데 이것은 티스토리 스킨 만드는 사람에게 관련된 것이니 이해하려고 골머리 썩을 필요 ..추천 -
[비공개] 애드센스 설치 후 했으면 하는 것
(adsbygoogle = window.adsbygoogle || []).push({});애드센스 광고를 블로그에 설치해서몇 달러가 그 관리에 찍혔다고 감격하지 말았으면 합니다. 관리에 찍힌 수익은 당장 찾지도 못하는 그림에 떡입니다. 수익금을 찾는데 최소 금액이 100 달러라는 것이며 그 금액이 도달해야 다음 달 약 22~24 일 경에 지급된다는 사실을 알았으면합니다.그러니 광고로 단지 몇 달러 벌었다는 것에.....감격은 돈이 내 주머니로 완전히 들어왔을 때 ! 이 말은 애드센스를 하는 구글이 내 통장에 지급했을때라는 것을 알게 됩니다. 그래야 돈을 통장에서 빼 내 손에 쥘 수 있습니다.관리에 찍히는 수익에 감격하는 설레발 금지입니다. 그 수익금은 언제 없어질 지 모릅니다. 애드센스를 설치를 하면서 오래하면 알게 됩니다.- 와! 애드센스 수익급이 지급됐다 -자세히 들어가서 애드센스 수..추천 -
[비공개] 익스플로러, 골치 아픈 낮은 버전
(adsbygoogle = window.adsbygoogle || []).push({});부트스트랩에서 요소를 보이고 감추는 것을2015/11/03 - 부트스트랩,요소 감추기에서 다루었습니다. 그때 부트스트랩에서 요소를 보이고 감추는 것은 아래 그림을 보듯이 visible-*과 hidden-*을 사용할 수 있다는 것을 알았습니다.그러나 익스플로러 8에서 요소를 visible를 사용해서 없어지게 했더니 제대로 되지 않이 이상했습니다. 저의 크롬에서는 없어졌으나 익스플로러 8에서는 봤더니 보였습니다.이상했으나 그냥 넘어갔습니다. 의문이 들면 어떤 경우는 그냥 넘어가는 경우가 많거든요.- 그림 출처 :http://bootstrapk.com/css/#helper-classes-show-hide-그런데 얼마 전 HTML/CSS를 수정하면서 익스플로러 8에서 제대로 나오게 하고 싶다면 visible-*을 사용하면 안 되고 오직 hidden-*을 사용해야 된다는 것을 알았습니다. 익스플로러 8에서 ..추천 -
[비공개] 김프에서 퀵마스크를 사용하여 색변경
(adsbygoogle = window.adsbygoogle || []).push({});아래 사진을 보듯이 퀵마스크를 사용하여 회색을 파란색으로 변경하는 것으로퀵마스크에 들어가는 퀵은 빠른의 quick입니다. 그러니 빠르게(퀵)마스크(mask)를 한다고 할 수 있을 것입니다.참고로 포토샵에서 퀵마스크와 동일하리라 생각합니다. 무료인 김프가 유료인 포토샵에 비해 많이 부족하지만 비슷한 점이 많거든요.그러나 포토샵과 같은 기능에 무료로 회사, 공공기관 등에서상업적으로 사용하고 싶다면 김프를 사용하세요. 포토샵은 좋지만 비용 등 부담이 있잖아요. 아래를 만들기 위해 이용한 사진은https://pixabay.com에서 구한 것입니다. 그럼 제가 어떻게 김프의 퀵마스크를 사용해서 색을 변경했는지 설명하겠습니다. 1사진을 열어 레이어에서 사진을 복제합니다. 웬만하면 원본 사진을 보호하기 위해 원..추천 -
[비공개] 썸네일 사진에 재생 버튼 만들기
(adsbygoogle = window.adsbygoogle || []).push({}); .videos img { width:100%; height:auto; } a.video { float: left; position: relative; } a.video span { width: 100%; height: 100%; position: absolute; background: url("http://cfile28.uf.tistory.com/image/272B024E567617E839D24D") no-repeat; background-position: 50% 50%; background-size: 15%; } @media screen and (max-width: 480px) { a.video span { background-size: 20%; } } 예전에 부트스트랩 소스에서 동영상 재생을 버튼을 만드는 것을2015/12/04 - 부트스트랩 소스,동영상 표시 아이콘 나타내기에서 다루었습니다.이번에는 부트스트랩을 사용하지 않고 아래와 같이 동영상 재생 버튼이 나오게 하는 것입니다. 그런데 익스플로러 7,8에서 보이는지 모르겠네요.재생 이미지가 이미지 위에 있게 하는 것입니다. 썸네일에 동영상 버튼이 없으면 사진인지 동영상인지 알 수 없으나 재생 버튼..추천 -
[비공개] 우수블로그 배지의 달콤함
(adsbygoogle = window.adsbygoogle || []).push({});블로그를 하는 사람에게는 블로그 서비스를 하는 업체에서 주는 우수블로그 배지는 달콤한 것 같습니다. 요전에 티스토리에서도 블로그 어워드 2015 라는 이름으로 우수블로그 배지를 줬는데 그것에 경품을 걸 만큼 얻고 싶은 달콤할 것 같습니다. 특히 블로그를직업으로 하는사람에게는요. 어떤 사람에게는안 받으면 그만 이지만요. 이번에 그까짓우수블로그 배지에 어떤 사람은 창피함이나 양심은 개나 줘버리고 경품을 걸고 얻었다네요. 우스울 것입니다. 아래에서 그것에 대해간단히 적어보려 합니다.예전 이 블로그에우수블로그배지가 없던 2010년에는 저의 블로그를 무시하는 것 같았습니다. 예로모 블로그에 잘못된 글을 지적했더니 니 따위가 지적질을 생각했는지 몰라도 내 블로그로 와서자신의 버는애드..추천 -
[비공개] 베낀 글에 화났다.
(adsbygoogle = window.adsbygoogle || []).push({});남의 글을 무단으로 퍼가 자신이 적은 것처럼 하는 기분 잡치게 하는사람들이 많아 몇 년 간 네이버, 구글 등에서 내 글을 검색하지 않았다, 그런데 오늘 특정 키워드로 네이버에서검색했다. 우연하게 내가 생각과 같은 네이버 블로그의 글을 봤다. 꼭 내가 예전에 적었었던 글 같아 티스토리로 돌아와 글을 찾아봤다. 관련 글이 있었다.그래서 내가 어떻게 적었는지 읽었는데 내 경험담을 자신의 경험담처럼 적었다는 것을 알았다.비록 내 글이 네이버 상단에 있지는 않았지만 남의 글을 베낀 글이 네이버 상단이란 것이 기분이 나빴다. 일부분만 베꼈으니 읽는 사람은모를 것이다. 베낌을 당한 사람은비록일부분만 베꼈어도 전체를 다른 글을 짜집기 해서 작성한 것 아닌가 의심이 들 것 같다. 나는 그런 의심이 들었..추천 -
[비공개] 부트스트랩,ScrollSpy
(adsbygoogle = window.adsbygoogle || []).push({});부트스트랩의 scrollspy는 메뉴를 클릭하면 그 부분으로 이동하는 것입니다. 메뉴를 클릭하면 이동하는 것을 여러 사이트에서 많이 봤을 것입니다.세군데의 예제를 보면 무슨 말인지 이해가 됩니다.첫 번째부트스트랩 공식 홈페이지의 scrollspy를 설명한 부분인http://getbootstrap.com/javascript/#scrollspy에서 볼 수 있습니다. 두 번째는 한글 부트스트랩의 자바스크립트 스크롤스파이(scrollspy)에서도 볼 수 있습니다. 세 번째도 저는 w3schools.com의http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp에서 보는 것을 추천합니다. 왜냐하면 비록 거기는 영어라도메뉴가가로와 세로인 예 등 다양한 예제를 볼 수 있어 이해하는데 도움이 됩니다. 위는 메뉴를 클릭하면 바로 이동하는 것이고 이번에 볼 것은 부드럽게 이동하는scollspy입니다. 여..추천