• 동영상 배경으로 티스토리를 멋있게 정보/스크립트,HTML,CSS... 2016.05.27 11:30

    예전에 동영상 배경에 대해 설명이 잘 됐던 다른 사람 글이 안 보여 제가 이 블로그에 사용한 동영상 배경에 대해 설명하려고 합니다. 나중에 누가 물어볼 것 같은 예감이...방명록에 가끔 멋있다고 하거든요.자세히 설명할 정도 많이 아는 것도 없으니 이 블로그에서 어떻게 했는지만 적겠습니다. 제한이 있는 네이버, 다음 등의 블로그에는 적용할 수 없으니 헛고생하지 마세요. 해보지 않았지만 경험상 네이버 블로그는 여기에서 사용하는 video 태그에..

  • 그래픽을 CSS로 해결하려고 한다 정보/스크립트,HTML,CSS... 2016.05.16 11:19

    티스토리를 하면서 그래픽이 아닌 CSS로 해결하게 됩니다. 왜 CSS로 해결하려 경향이 있냐면 CSS를 어느 정도 알고 그래픽 프로그램을 잘 다루지 못하기 때문입니다. 결정적으로 티스토리는 네이버나 다음 블로그와 다르게 거의 제한이 없기 때문입니다. 만약 네이버 블로그처럼 제한이 있다면 CSS를 사용하지 못합니다. 어떤 사람은 속도 때문이라 생각할지 몰라도 짜증만 나지 않으면 속도는 그렇게 신경을 안 씁니다. 가령..

  • 동영상 배경 나오는 것을 해결했다. 정보/스크립트,HTML,CSS... 2016.03.08 11:30

    #background_1899 { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-5..

  • 썸네일 사진에 재생 버튼 만들기 정보/스크립트,HTML,CSS... 2016.02.02 07:30

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

  • CSS3와 스크롤 애니메이션 정보/스크립트,HTML,CSS... 2016.01.08 09:00

    이 페이지에서 CSS3와 스크립트를 사용하여 스크롤 애니메이션을 다루는 것을 다루어 보겠습니다. 여담으로 애니메이션을 플래시를 이용하는 것이 아닙니다. PC 크롬에서 NPAPI 플러그인을 중지하여 플래시를 자동 재생하지 않습니다. PC가 아닌 모바일 크롬의 경우는 재생조차 할 수 없이 아예 지원하지 않고요. 제 생각에는 몇 년 안에 플래시가 사라질 것 같습니다. 예전에 티스토리를 비롯한 블로그에서..

  • 다양한 배경을 익혔다. 정보/스크립트,HTML,CSS... 2015.11.24 07:30

    #background { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) t..

  • jquery와 CSS3를 사용한 아이콘 나오기 정보/스크립트,HTML,CSS... 2015.08.29 08:00

    이 블로그의 스킨을 부트스트랩 반응형 스킨으로 변경하고 확인하니 jQuery 를 사용한 것은 제대로 안 되네요. jQuery로 사용한 것은 CSS를 사용한 것처럼 보여야 합니다. 아마 부트스트랩과 충돌하는 것 같습니다. 그리고 스킨을 변경하니 다른 페이지에 있는 jQuery fancybox도 안되더라고요. 몇 년 전에 적었던 2011/12/16 - 티스토리 스킨변경, 적극 권하지 않는 이유라는 글..

  • 반응형 메뉴 - CSS 만 사용 정보/스크립트,HTML,CSS... 2014.05.12 07:00

    .iconicmenu { position: relative; height: 45px; overflow: hidden; } .iconicmenu, .iconicmenu * { -moz-box-sizing: border-box; box-sizing: border-box; } .iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu ..

  • 착각 말기와 결정 자유 - 플래시,HTML5,CSS3,jQuery 사용 정보/스크립트,HTML,CSS... 2013.05.06 07:00

    이 페이지 글을 읽는다면 홈페이지나 블로그 디자인할 때 어떤 것을 유념해야 할지 도움이 될 것이다. 그리고 홈페이지나 블로그 디자인에 관심없어도 심심풀이도 읽어보기 바란다. 착각하지 말자 크롬,사파리,파이어폭스,오페라,익스플로러10의 경우는 익스플로러 6,7,8,9에서 지원하지 않는 HTML5 태그,CSS3 속성을 지원한다는 것을 알기 바란다. 그러면 익스플로러 6,7,8,9에서 지원하지 않는 태그나 속성을 많이 사용하여 만든 ..

  • 플래시가 아니고 CSS3의 transitions이다 정보/스크립트,HTML,CSS... 2013.04.29 07:00

    CSS3의 Transitions 속성을 transitons를 시험하려고 했다. 그러나 멋있는 것만 보면 플래시라 생각하는 고정관념이 있어 플래시와 연관해서 설명하면 좋을 것 같아 적을 까한다. 플래시가 아니고 CSS이다. 아래는 플래시를 이용한 것이 아니라 CSS3의 Transitons를 이용한 것이다. 몇년전까지만 해도 트랜지션 효과는 열에 아홉은 플래시였으나 요즘은 CSS3,HTML5,jQuery 등을 사용한 것이 많아서 의심되는 것이 많다. ..

  • HTML5와 CSS3, jQuery 사용시 생각할 사항 2 정보/스크립트,HTML,CSS... 2013.04.20 07:00

    p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: al..

  • #right-menu { display : none; } .txc-textbox3 { position:relative; padding:10px; color:#fff; /* 글자색 */ font-weight:bold; font-size:14px; background:#000; /* default background for browsers without gradient support */ /* css3 */ -moz-bo..

티스토리 툴바