CSS14 위로 가는 버튼 화면에 떠 다니는 버튼을 클릭하면 페이지의 가장 위로 이동된다. 처음에는 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. 글쓰기에서 공백처리... 티스토리의 스킨 '#1'에서 '제목과 내용'이 함께 나오는 메인 화면의 리스트에서 글자와 단어 사이의 간격이 이상하게 보여 확인에 확인을 하다가 보다가 알게 된 사실이다. /* 티스토리의 에디터, HTML 화면속의 글자와 태그 모습 */ 커피숍 특유의 커피향 속에 달달한? 향기 _빵 냄새?_ 가 함께 묻어 있는 공간의 커피숍이다. /* 티스토리의 블로그 화면에서의 글자 모습 */ 커피숍 특유의 커피향 속에 달달한? 향기 _빵 냄새?_ 가 함께 묻어 있는 공간의 커피숍이다. /* 'white-space' 속성으로 보면 2칸이 띄어져 있는 글자 모습 */ 커피숍 특유의 커피향 속에 달달한? 향기 _빵 냄새?_ 가 함께 묻어 있는 공간의 커피숍이다. 위와 같은 현상이 정상인지, 오류인지 알 수가 없지만 티스토.. 배움터_일반/TIStory 2016. 6. 18. 블로그의 글꼴을 정하자. 어제 저녁에 티스토리의 블로그의 글꼴을 다시 바꿨다. 특별한 이유보다는 컴퓨터와 휴대폰에서 보여지는 글꼴이 똑같고, 글자 주변의 뿌옇 그림자? 현상이 나타나지 않고, 글꼴 자체도 마음에 들어서다. 마음에 드는 글꼴을 찾기 위해 하루를 소비하다가 전에 한 번 본 기억이 있는 글꼴이 생각나 다시 찾아서 변경을 했다. 렉시 새봄R 티스토리의 블로그에 '렉시 새봄R 웹폰트' 설치와 적용법을 가르켜 주고 있는 곳이다. : https://www.cmsfactory.net/node/11354 내 블로그에도 가르켜 주는 그대로 적용시켰다. 따로 손을 댈 필요가 없다. /* style.css 글꼴 태그 적은 후 */ @font-face { font-family: ls; src: url('./images/LexiSaebo.. 배움터_일반/TIStory 2016. 6. 17. Tistory _ 카테고리의 다른 글 Tistory_카테고리의 다른 글 Tistory_카테고리의 다른 글_소스(css) /* # 카테고리의 다른 글 */ div.another_category { width:auto; margin-top:2rem; margin-bottom:1rem !important; padding:0 !important; border:0 !important; } /* '카테고리의 다른 글' 전체 부분 */ div.another_category h4 { margin:0 !important; padding:1rem .5rem 1rem .5rem !important; font-size:1.2rem !important; background-color:#fafafa !important; }/* '카테고리의 다른 글'_글자 */ di.. 배움터_일반/TIStory 2016. 1. 8. 이전 1 2 다음
