배움터_일반/TIStory22 이미지 크게 보기 휴대폰에서 이미지 확대 방법. 티스토리에서 올린 이미지의 크기를 조절하게 할 수 있는 방법이다. 휴대폰에서 이미지를 크게 또는 자세히 확인하고자 할 수 있게 하는 방법이다. Tistory의 블로그 관리 ☞ 스킨편집 ☞ html 편집 ☞ html ☞ 사이에 적어놓는다. 설명. initial-scale : 초기 설정. minimum-scale : 최소 확대 설정. maximum-scale : 최대 확대 설정. user-scalable : 사용자 가 확대/축소 조절가능여부 설정. ※ 두 손으로 이미지를 확대시키면 이미지와 함께 글자도 함께 확대된다. ※ 이미지를 클릭 후 이미지를 확대해도 배경에 있는 글자도 함께 확대된다. ※ 자세히 알고 싶으면... → https://webclub.tistory.com/354 배움터_일반/TIStory 2023. 2. 20. Owl Carousel _ 이미지 슬라이드 이미지 슬라이드 Owl Carousel 2: https://owlcarousel2.github.io/OwlCarousel2/ Html 현재 블로그 헤드부분의 이미지가 옆으로 이동되어 나타나는 모습이다.자동으로 슬라이드 되다가 마우스 커서가 감지되면 멈추어져 클릭 후 좌우로 움직일 수 있다.휴대폰에서도 같은 효과가 나타난다.마우스 대신 손으로...2018. 02. 07 아쉬운 점이 있다면...슬라이드 되는 순간에 효과를 줄 수 있는 방법이 있으면 좋겠다.그냥 휙휙 옆으로 자동으로 슬라이드 되는 것보다. 배움터_일반/TIStory 2018. 2. 7. 위로 가는 버튼 화면에 떠 다니는 버튼을 클릭하면 페이지의 가장 위로 이동된다. 처음에는 CSS만으로 적용해서 사용을 했는데 클릭시 화면이 그냥, 막, 순신간에 위로 이동되어 버려 재미?가 없어 제이쿼리_jQuery 를 함께 적용해서 부드럽게 화면이 바뀌면서 위로 올라가는 모습으로 바꾸었다. 오른쪽에 있는 위쪽 화살표의 버튼을 클릭! HTML CSS /* 위로 가는 버튼 */ #top a { position:fixed; bottom:5px; right:15px; z-index:5; font-size:30px; color:#fff; text-shadow:rgba(0, 0, 0, 0.3) 1px 1px 2px, rgba(0, 0, 0, 0.3) 0 0 10px;" } 배움터_일반/TIStory 2016. 7. 13. 휴대폰에서 토글버튼 클릭시 나타나는 메뉴. 반응형 스킨 #1이 컴퓨터에서 보여지는 메뉴들이 휴대폰에서는 나타나지 않아 휴대폰 화면에서도 보여지게 만들었다. 스킨 #1에서 토글버튼을 누르면 카테고리 리스트만 나타나지만 지금은 최근 글과 최근 댓글, 관리자 메뉴, 날짜, 방문객이 나타나도록 했다. HTML 카테고리 방명록 최근에 올라온 글 최근에 달린 댓글 글쓰기 관리자 로그인 오늘: , 어제: , 손님: REMEMBER 20140416 CSS /* ##### mobile_메뉴 */ .mbox_aside { display:block; width:100%; height:auto; margin:0; padding-top:17px; } .mbox_aside h5 { width:auto; margin:0; padding:5px 5px 1px 15px; fo.. 배움터_일반/TIStory 2016. 6. 29. 티스토리의 꾸미기 중에서... 티스토리의 스킨을 만들 때 필요한 기능적인 부분을 일단은 적어놓고 나중에 필요하면 적용을 시켜봐야겠다. 1. 스크롤바의 움직임에 따라 헤드_header 부분이 숨겨지는 기능인데 꼭 헤드부분만 숨겨지는 것이 아니라 원하는 부분_div도 가능하다. 2. 숨겨지는 헤드 바탕에 이미지를 적용해 단순해진 블로그에 작은 감정이라도 느껴지도록 했다. 3. 모바일 화면에서 나타나는 버튼을 클릭하면 레이어_Layer가 나타나는 기능으로 일반적으로 여기다 카테고리를 집어넣어 현재의 블로그처럼 사용하는데 소스가 다르다. ≡ ≡ 오늘: , 어제: , 손님: REMEMBER 20140416 설명과 지료가 있는 곳이다. : http://brilliantcoding.xyz/entry/Jquery-%EC%A0%9C%EC%9D%B4%.. 배움터_일반/TIStory 2016. 6. 26. 반응형 스킨 '#1'의 토글버튼을 바꿨다. 티스토리의 반응형 스킨 #1의 휴대폰 화면에서 나타나는 토글버튼의 위치를 바꿨다. 오른쪽 위에 있는 버튼을 동작시킬려고 하니 오른손까지 움직이는 귀찮으즘이 생겨 왼쪽의 아래쪽으로 옮겼다. 되도록이면 왼손만으로 움직이는 버릇의 게으름이 있어 다시 전에 사용하던 방법을 적용시켰다. 바뀌는 블로그의 분위기에 맞게 색도, 크기도 멋대로 바꾸기 쉽다. HTML ≡ CSS @media only screen and (max-width:820px) { .area_head .btn_menu { display:block; overflow:hidden; position:fixed; left:7px; bottom:-5px; text-align:center; font-size:45px; color:#fff; text-shado.. 배움터_일반/TIStory 2016. 6. 24. 이미지 캡션(자막) 꾸미기 블로그에 사진, 이미지를 올리면서 설명할 수 있는 짧은 글을 적어 놓으면 괜찮다는 생각이 들어 찾아 보았다. /* width:100%; 이렇게 넓이를 주면 캡션의 위치가 사진과 다른 위치에 나타난다. */ .skin_view .area_view .imageblock { max-width:100%; height:auto; margin-top:10px; } /* Image cap1 */ .cap1 { margin:-10px 0 17px 0; padding-top:5px; font-size:14px; color: #999; text-align: center; border-bottom:1px solid #fafafa; border-radius:17px; -webkit-box-shadow:0 10px 7px -7.. 배움터_일반/TIStory 2016. 6. 21. 이전 1 2 3 4 다음
