(adsbygoogle = window.adsbygoogle || []).push({});부트스트랩의 scrollspy는 메뉴를 클릭하면 그 부분으로 이동하는 것입니다. 메뉴를 클릭하면 이동하는 것을 여러 사이트에서 많이 봤을 것입니다.세군데의 예제를 보면 무슨 말인지 이해가 됩니다.첫 번째부트스트랩 공식 홈페이지의 scrollspy를 설명한 부분인http://getbootstrap.com/javascript/#scrollspy에서 볼 수 있습니다. 두 번째는 한글 부트스트랩의 자바스크립트 스크롤스파이(scrollspy)에서도 볼 수 있습니다. 세 번째도 저는 w3schools.com의http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp에서 보는 것을 추천합니다. 왜냐하면 비록 거기는 영어라도메뉴가가로와 세로인 예 등 다양한 예제를 볼 수 있어 이해하는데 도움이 됩니다. 위는 메뉴를 클릭하면 바로 이동하는 것이고 이번에 볼 것은 부드럽게 이동하는scollspy입니다. 여..

(adsbygoogle = window.adsbygoogle || []).push({}); .img-wrapper { display: inline-block; overflow: hidden; } .img-wrapper img { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; vertical-align: middle; } .img-wrapper img:hover { transform:scale(1.5); -ms-transform:scale(1.5); /* IE 9 */ -moz-transform:scale(1.5); /* Firefox */ -webkit-transform:scale(1.5); /* Safari and Chrome */ -o-transform:scale(1.5); /* Opera */ } 마우스 커서를 이미지 위로 가져가면 이미지가 확대되는 아래 효과를 만들면서부트스트랩은 쉬우면서사용자가 많다는 것을 다시 느꼈습니다.왜냐하면아래와 같은 효과를 위해 CSS의 scale를 할것 같아CSS와 scale 검색어로 해결하지 못했습니다. 그런데 제가 이 블로그 스킨을부트스트랩을 사용하니 혹시나 하며 bootstrap..

(adsbygoogle = window.adsbygoogle || []).push({});마인드맵 프로그램은 마인드맵을 제작해주는 프로그램입니다. 그럼 마인드맵이 무엇이냐고 할 것인데 그것은 아래 위키백과에 나온 마인드맵의 정의를 봤으면 합니다. 제가 손 아프게 설명해도 모를테니 한 번 보는 것이 좋을 것입니다.아래 더보기 안에 예전에 제가 여기에서 추천할 마인드맵 프로그램인 알마인드로 만든 마인드맵이 있습니다.마인드맵(mind map)은 마치 지도를 그리듯이, 자신이 여태까지 배웠던 내용이나, 자기 관리 등을 할 수 있는 방법이다. - 출처 : 위키백과더보기마인드 프로그램으로 마음에 드는 것으로 하나 있는데 이스트소프트의 알마인드입니다. 알마인드에서 유료인 Pro가 아닌 무료인Lite인 말하는 것입니다. 제가 보기에는 유료가 아니더라도 기능에 제한이 있어도무료 버전도 쓸 만 ..

(adsbygoogle = window.adsbygoogle || []).push({});아래 미리보기는 여기에서 배운 것으로 마스크를 이해한다면 충분히 알 수 있을 것입니다.전에 적었듯이 마스크가 검정이면 가리며 흰색이면 보여줍니다.그래픽에서 마스크를 이해하는 것은 복잡한 것을 하는데 중요한 것 같습니다. 마스크를 이용하는 경우가 많으며 고난도 작업은 마스크를 이용하는 경우가 많으니까요. 나중에 김프에 있는 퀵마스크를 사용하여 색을 바꾸는 것도 할 것입니다. 참고로 사진은https://pixabay.com/ko/파란-눈-여자-여성-메이크업-모델-빨간-립스틱-관능적인-237438/에서 구할 수 있습니다. 많은 사람이 알듯이https://pixabay.com/에서 많은 저작권에 안전한 질 좋은 사진을 구할 수 있습니다. 1사진을 엽니다. 레이어로 이동한 후 이름을 원본으로 변경한 후 레이어를 두 번 복제하여 레이어의..

(adsbygoogle = window.adsbygoogle || []).push({});이 글을 적게 된 이유는 어떤 사람이 닉네임을 도용과 변경하면서 댓글을 적어서 적게 됐습니다. 아마 그 사람은 자신이 대단하다고 생각한 모양입니다. 그렇게 장난치면 재수 없게당합니다. 당하고 싶으면 계속 하세요. 전 어떤 경우는 장난을 다큐로 받습니다.장난이 심하면 내용, 나이 등에 관계 없이 전봐주지 않으니나쁜 사람으로 만들지 마세요. 여담으로 오랫만에 이런 글을 적네요. 2010~2011년에 심한 글과 행동이 많아 자제했거든요. - 봐주지 않습니다 - 그건 그렇고 몇 년 전에 제 네이버 블로그에 티스토리에 댓글을 적을 때 주의하라고 적었던 적이 있습니다. 다름 아니라 네이버 블로그에 댓글을 적으면 댓글 아이피가 아래와 같이 3 자리만 나타나지만그러나티스토리에는4자리 모두가 나타난다는 글이..

(adsbygoogle = window.adsbygoogle || []).push({});여기에서 부투스트랩 무료 테마 및 템플릿을 소개합니다.2016/01/11 - 부트스트랩,affix 기능에서도 적었듯 부트스트랩 affix는 일정 지점에 페이지가 스크롤 되면 특정 영역이 고정되는 것입니다. 그 특정 영역이란 보통 사이드바나 메뉴가 된다는 것은 알 것입니다. 그리고 아래에서 소개하는 테마페이지는 영어이므로 미리보기 및 다운로드가 영어로 나오니 이것에 대해 간단히 설명합니다. 테마를미리보기고 싶다면 PREVIEW 버튼을 누르면 되며 다운로드는 DOWNLOAD 버튼을 누르면 됩니다. 첫 번째로 소개할아래 테마는 사이드바가 없는1단으로 스크롤을 내리면 메뉴가 고정되는 것입니다. 여담으로 메뉴를 클릭하면 이동하는 것은 후에 설명할부트스트랩 scrollspy활용한 것인지 모르겠는데 그것인 것 같습니다. 그리고 상..

처음공식 홈페이지에서 부트스트랩(bootstrap)을 접했을 때 자바스크립트 편에Affix를 설명했으나 몰라 그냥 넘어갔습니다. 그리고 여러 테마와 템플릿을 보니 스크롤을 하면 일정 부분에 와서 메뉴가 고정되는 것이 멋있다고 느꼈습니다.예로스크롤을 아래로 움직이면 특정 부분이계속 올라가 안 보이는 것이 아니라 특정 부분은고정되어 계속 보이는 것입니다.그러나여기에있던 Affix 예제를 보니 어느 정도 알게 되었습니다. 전에도 말했지만 비록 거기는 영어지만 예제가 많기 때문에 이해하는데 도움이 됩니다.Affix 예 :http://www.w3schools.com/bootstrap/bootstrap_affix.asp 그래서 이 블로그가 부트스트랩을 사용하니 아직 100% affix 기능을 파악하지 못했지만 적용해 봤습니다. 우선 제가 알고 있는일정 부분을 내려오면 윗부분이 고정되는 것만 적용해 보았습니다...

이 페이지에서 CSS3와 스크립트를 사용하여 스크롤 애니메이션을 다루는 것을 다루어 보겠습니다. 여담으로 애니메이션을 플래시를 이용하는 것이 아닙니다. PC 크롬에서 NPAPI 플러그인을 중지하여플래시를 자동 재생하지 않습니다. PC가 아닌 모바일 크롬의 경우는 재생조차 할 수 없이아예지원하지 않고요.제 생각에는 몇 년 안에 플래시가사라질 것 같습니다.예전에 티스토리를 비롯한 블로그에서 플래시 사용 현황에 대해서는2015/09/25 - 플래시 사용 현황,티스토리,네이버 블로그,구글 블로그에서에서 적었습니다.여담으로 우리나라 홈페이지는 액티브엑스 처럼 플래시를 너무 많이 사용하는 것 같습니다.그럼 아래에서 CSS3 애니메이션을 몰라도 만들어 주는 사이트와 페이지 스크롤을 움직이면 물체가 애니메이션 되도록 해주는 애니메이션에 대해 ..