Tistory Blog 검색 결과

해당 글 78건

[jQuery]마우스 반응하는 3D팝업 및 click toggle 이벤트

팝업 관련해서 코드를 찾다가 재미있는 3D 팝업을 발견해서 'ㅡ' 소개를 해볼까하네요. 마우스에 반응하는 3D팝업이며, 추가로 버튼을 클릭하면 팝업이 사라지고 나타나게 jQuery의 click 이벤트 toggle를 적용 해놓았습니다. ↓↓↓↓↓↓ I'm a new kind of popup. Move your mouse around ! POPUP Show/Hide I'm a new kind of popup. Move your mouse around ! POPUP Show/Hide var moveForce = 30; // max popup movement in pixels var rotateForce = 20; // max popup rotation in deg $(document).mousemove(fun..

Tistory Blog/Html,Css 편집 2016. 6. 23. 00:03

[CSS] 이메일 디자인 html에 inline CSS 합치기(combine)

오늘은 inline CSS style 에 대해서 알아보겠습니다. HTML 문서에 CSS를 사용하는 방법은 크게 3가지가 있습니다. 1.외부 스타일 시트(External Style Sheet) *.css 파일을 만들어 html과 링크로 연결해서 사용하는 방식 가장 많이 선호하는 방식이며, 권장되는 방식입니다. html을 일관성있게 수정이 가능하며, 관리하기도 편하고, 웹문서의 크기도 가장 줄일 수 있는 방식(compressor하기도 좋고) 전문적인 홈페이지를 만들 때 효율을 극대화 하는 방식. html5에서도 html과 css는 분리를 권장하고 있음. 다만 css파일이 다수 일 때는 관리가 필요하다는 단점(?) 2.내부 스타일 시트(Internal Style Sheet) 두 번째는 내부 스타일 시트입니다...

Tistory Blog/Html,Css 편집 2016. 6. 22. 21:54

[html/css] table 태그 속성에 대해서 알아보자(부트스트랩 테이블)

오랫만에 블로그 포스팅을 하다 보니 ㅠ_ㅠ 기본 코딩도 자꾸 잊어먹게 된다. 오늘은 table 태그를 사용해서 작업을 하다가 헷갈려서, 이번 기회에 오늘은 table 태그 및 속성에 대해서 알아보겠습니다. table 태그는 HTML5에서는 사용이 권장되지는 않는 태그 요소로 알려져있습니다. 왜냐하면 더럽다고 해야하나.. 브라우저별로 맞추기도 힘들고, 브라우저 또한 많은 자원을 소모해서 구현하기 때문에 비권장되는 요소로 알려져있습니다. 반응형 테이블 태그를 만들 수 있지만 일부 브라우저에는 호환도 되지않고.. 자제가 필요한 태그이지만 어쩔수없이 사용하게 되는 경우가 매우 많은 태그입니다. 예를들어.. 지금 작성하는 블로그 텍스트 편집기에 포함되어있는 [표삽입] 기능으로 표를 집어넣으면 style과 code..

Tistory Blog/Html,Css 편집 2016. 6. 21. 21:06

CSS-CROSS스킨 신고 기능 글자 깨짐현상 수정

요즘 바빠서 ㅠ_ㅠ 티스토리 스킨 관련해서 자주 글을 작성 못하고있네요. 작성할 세이브 원고는 많이 작성을 해놓고 있는데.. ㅠ_ㅠ 오늘은 스킨에 버그가 발생해서 수정하는 법에 대해서 알아보겠습니다. 티스토리측에서 새롭게 신고 기능을 개선을 하면서 발생하는 문제입니다. 스킨 치환자 와 그리고 이부분이 문제인데요. 바로 이치환자가 들어가는 부분에 강제적으로 신고 버튼이 생기게 됩니다. 우선 아래와 같이 보호 정책에 따라 바뀌는 부분이기 때문에 어쩔 수는 없는 것 같습니다.. 그래도 기존의 치환자를.. 사용해서 일괄적으로 적용시켜버리다니... 뭐 티스토리 측도 어쩔수 없겠죠. 정부에서 하라고 하는거니깐요.. -_-; 암튼 필요한 기능이긴 한데.. 뺄수도 없고.. 빼려면 시간표시를 할 수가 없으니..(치환자만..

Tistory Blog/Html,Css 편집 2016. 6. 13. 01:04

[CSS]티스토리 사진 이미지 테두리 적용하기 ( 추가 또는 삭제 )

최근 블로그 글을 쓰다가 보니 집에 있는 모니터로는 확인을 못했는데.. 조금 밝은 모니터로 확인을 해보니 사진과 텍스트 경계선이 구분 되지 않아서 가독성이 많이 불편 하였습니다. 그래서 티스토리 블로그의 이미지, 사진 테두리 설정하는 방법에 대해서 알아보겠습니다. 티스토리 사진 이미지 테두리 적용하기 현재 블로그 이미지에 모든 테두리가 적용이 되어 있습니다. 테두리를 설정하는 방법은 간단합니다. 이미지 태그인 img에다가 border CSS 속성을 설정을 해주면 됩니다. border이 바로 테두리를 정하는 CSS속성이기 때문입니다. 각방향의 테두리 색상도 정할 수 있고 다양한 테두리 무늬도 표현할 수 있습니다. 현재 제블로그는 아래와 같이 설정이 되어 있습니다. img{border:2px outset r..

Tistory Blog/Html,Css 편집 2016. 5. 18. 20:20

랜덤 로우폴리 배경화면(Lowpoly Dynamic Background)

랜덤 로우폴리 배경화면 입니다.페이지가 새로고침 될 때마다 새로운 로우폴리 색상과 패턴이 나타납니다. 페이지 새로고침 스킨 HTML 편집에서 위에 붙여넣기 하면 됩니다. PC화면에서만 적용 되게 하려면 if (window.matchMedia('(min-width: 992px)').matches){ ... };위 해당 코드를 사용해 아래처럼 감싸 주면 됩니다.

Tistory Blog/Html,Css 편집 2016. 4. 14. 05:06

[CSS]티스토리 CCZ-CROSS 스킨 본문 넓이 조절 하기

안녕하세요. 오늘은 제가 사용하고 있는 스킨의 본문 넓이를 조절하는 방법에 대해서 알아보겠습니다. 지금은 줄이기 하는 방법을 알아 볼 텐데.. 조절하는 방법만 알면 본문 넓히기도 손쉽게 가능 할 것입니다. 그리고 이스킨만 아니라도 다른스킨도 쉽게 조절이 가능하구요. 우선 기본 구조를 파악 해야합니다. 반응형 웹스킨이기 때문에 그냥 무작정 고치게 되면 나중에 다 틀어지게 됩니다. 본문 좌우 배경을 없애 버리는 방법도 있긴한데 그건 다음포스팅으로!! 블로그 넓이 구조 우슨 main 영역은 1321px 1322px content 영역은 999px 마지막으로 본문 post-content 영역은 857px입니다. 즉 본문 영역인 post-content 영역을 720px로 줄여보겠습니다. 총 3가지의 방법이 있습니..

Tistory Blog/Html,Css 편집 2016. 4. 9. 00:03

[jQuery]티스토리 댓글 중복 입력 방지하는 방법(버튼 disabled)

[jQuery]티스토리 댓글 중복 입력 방지하는 방법(버튼 disabled) 티스토리 댓글은 가끔 폼은 입력 버튼을 누른 다음 몇 초의 딜레이가 발생합니다.그래서 댓글이 정상적으로 입력중이라는 표시가 없기 때문에 방문객들이 댓글 입력 버튼이 제대로 되었는지 판단하기 어렵기 때문에여러번 댓글입력버튼을 클릭 하게 됩니다. 그럼.. 댓글이 중복으로 생겨버리죠;;스팸처럼.. 일일히 지울기도 귀찮고.. 사실 기존에는 http://zzznara2.tistory.com/625 by 꿈꾸는 우림님께서제작 해주신 스크립트를 사용 하고 있었습니다.중복 체크를 막는 기능을 문의 드렸는데 버튼을 disabled 하는 방식으로 좋은 아이디어를 내시고스크립트를 만들어 주셨습니다. Primary button 비활성 Primary ..

Tistory Blog/Html,Css 편집 2016. 4. 6. 14:50

[CSS]티스토리 공식 반응형웹스킨#2 아이콘 플러그인 중복 문제 수정

안녕하세요. 오늘은 티스토리 공식 반응형 웹스킨#2 아이콘 플러그인 중복 문제를 수정해보겠습니다. 플러그인 까지 생각을 안했거나, 깜빡하고 지나간 것 같아보이네요. 댓글 및 방명록 사람아이콘이 있지만. ㅠ_ㅠ 기존의 플러그인과 같이 사용하면 중복으로 뜨게됩니다. 우선, 티스토리는 플러그인을 통해 아이콘을 사용 할 수 있습니다. [환경설정] - [기본정보] 에서 아이콘을 설정하고 [플러그인 설정] 에 들어가서 아이콘 사용 설정을 해주면 됩니다.[64x64px 사용을 권장합니다.]그런데 확인을 해보니 ㅡㅡ;;;;;;아이콘이 중복해서 나타나는 문제가 발생하네요...;;;; 이것을 깔끔하게 고쳐보겠습니다. [HTML/CSS] 편집에 들어가 줍니다. 스킨 수정전에는 꼭 스킨 저장을 하시고 문제가 발생시 불러오면 ..

Tistory Blog/Html,Css 편집 2016. 3. 31. 00:05

[jQuery] 애드센스 광고차단(Adblock)시 알림창 만들기(특정 클래스 제외시)

안녕하세요. 특정 클래스 제외 하는 방법을 찾다가 재밌는 코드를 발견해서 소개를 해드릴가 합니다. 아마 애드센스 광고를 설치하는 분들에게는 도움이 될 것 같네요.(ㅠ_ㅠ 임시저장이 날라가버려서 다시 작성하는 글이네요.. 아오 ㅠ_ㅠ) 바로!! 애드센스 광고 차단시 알림창 만들기 적용 방법은 간단합니다.우선 본인의 광고 코드를 .adsense-area 클래스명의 div 태그로 감싸줍니다. 클래스명은 본인이 수정해도 상관없습니다. 본인의 애드센스 광고 code 광고를 본문 상단, 본문 하단, 사이드바 총 3개를 설치 했다면전부 다 할 필요는 없고 본문 상단 광고에만 작업을 해주는 것이 가장 좋습니다.접속하자 마자 바로 보이니까요 위 작업이 끝났다면 위에 스크립트를 추가 해줍니다. 끝입니다 쉽죠? checkA..

Tistory Blog/Html,Css 편집 2016. 3. 30. 17:15