'반응형'에 해당되는 글 43건

티스토리 반응형 스킨 만들기(Section 28) - 자바스크립트 활용하기(2)

이번 섹션은 자바스크립트 활용하기 2탄입니다. 지난 섹션에서는 블로그 타이틀을 노출하냐 프로필 이미지를 노출하냐를 자바스크립트로 컨트롤하는 방법을 알려드렸습니다. 궂이 자바스크립트로 컨트롤하지 않고 css에서 수정을 하여도 충분히 가능하지만 자바스크립트로 컨트롤하는 방법을 설명하였습니다. 하지만 이번 섹션에서는 자바스크립트가 없다면 불가능한 활용법을 알려드립니다. 가끔 티스토리 블로그를 방문하면 "관리자"라는 버튼이나 링크가 보일때가 있습니다. 이건 관리자 화면으로 이동하는 링크이지만 소유자가 아닌 손님의 입장에서는 불필요한 링크이기 때문에 "관리자가 로그인"하였을 경우에만 노출이 되도록 하는 스크립트를 만들도록 하겠습니다. 현재 누구야 티스토리 하단부에 보시면 아래와 같이 "관리자" 링크가 보입니다. ..

티스토리 스킨만들기/Tistory One | 2018. 1. 20. 19:59

티스토리 반응형 스킨 만들기(Section 28) - 자바스크립트 활용하기(1)

티스토리 반응형 스킨 만들기 (tistory-one 스킨) 의 마지막 섹션인 자바스크립트 활용하기 포스트입니다. 거창하게 "반응형 스킨 만들기"라고 제목을 지었지만 막상 반응형 스킨을 만드려면 어떻게 해야한다는 설명보다는 티스토리 치환자 중심의 스킨 따라만들기가 되어버렸네요..;; 그래도 마무리는 해야하기때문에 마지막인 "자바스크립트 활용" 섹션을 진행하도록 하겠습니다. 자바스크립트? javascript는 객체 기반의 스크립트 프로그래밍 언어입니다.(java와는 상관없는 언어입니다.) 이제는 css3를 이용하여 구현할 수 있는 홈페이지 메뉴의 마우스오버 애니메이션이나 쇼핑몰의 롤링 배너 등등 정적인 html 마크업만으로는 할 수 없는 동적인 기능(대표적으로 메뉴, 이미지 전환 애니메이션 또는 탭 메뉴 이..

티스토리 스킨만들기/Tistory One | 2018. 1. 20. 18:45

Section 27 - 티스토리 반응형 스킨 만들기 - 반응형 CSS 적용

티스토리 기능에 대한 섹션은 모두 끝났기 때문에 이번 섹션부터는 레이아웃과 유저인터페이스쪽에 집중해서 Tistory One 티스토리 반응형 스킨 만들기를 마무리하도록 하겠습니다. 우리는 티스토리 스킨 관련 파일을 만들고 데스크탑 화면의 레이아웃을 만들고나서 티스토리 기능 및 블로그 기능들을 채워넣어서 지금까지의 결과물을 만들었습니다. 이제 이 결과물을 이용하여 브라우저나 디바이스(모바일, 태블릿 등)의 화면 크기에 따라 자동적으로 변환되는 레이아웃으로 수정하겠습니다. 반응형 웹으로 만들때 제일 많이 수정하기도 하며 간단한 스타일쉬트(style.css)를 위주로 수정하고 도저히 브라우저에서 지원이 불가능할것같은 것들만 javascript로 처리를 합니다만 티스토리 레이아웃은 간단하기에 스타일쉬트만 수정하여..

티스토리 스킨만들기/Tistory One | 2017. 12. 4. 23:24

Section 26 - 티스토리 반응형 스킨 만들기 - [사이드바] 방문자수(카운터)

이번 섹션은 "방문자수(이하 카운터)" 사이드바 모듈을 만들도록 하겠습니다. 카운터 모듈을 끝으로 사이드바 모듈의 섹션은 모두 끝나기 때문에 조금만 더 힘을 내봅시다~ 카운터는 아시다시피 내 블로그에 방문했던 총 방문자 수, 어제 방문자 수, 오늘 현재까지 방문자 수를 나타내 주는 기능인데 우리는 사이드바 모듈로 만들어서 언제든지 사용/미사용으로 설정할 수 있게 만들겠습니다. ※ 이 카운터는 사이드바 모듈로 만들어도 되지만 블로그 아무곳에나 넣으셔도 상관없는 기능입니다. 그럼 바로 코드 들어갑니다~ STEP 1. skin.html 사이드바 카운터 모듈 코드 추가 COUNTER Total : Yesterday : | Today : : 총 방문자수 : 오늘 방문자수 : 어제 방문자수 ※ 카운터 티스토리 치환..

티스토리 스킨만들기/Tistory One | 2017. 11. 18. 15:23

Section 25 - 티스토리 반응형 스킨 만들기 - [사이드바] 링크

이번 섹션에서는 "링크"를 다뤄보겠습니다. 링크는 내가 추가한 블로그나 사이트를 내 블로그에 표시하는 기능으로 웹브라우저 북마크를 블로그에서 관리하고 접속한다고 생각하시면 됩니다. 또한 다른 티스토리 블로그에서 내 티스토리 블로그를 추가하면 누가 내 블로그를 링크 추가했는지도 확인이 가능하므로 모니터링이 가능한 장점이 있습니다. 제 개인적인 생각이지만 네이버에 서이추(서로 이웃 추가)가 있다면 티스토리 블로그에는 서링추(서로 링크 추가) 기능이 있는 거라고 보시면 되겠네요;;; 이런 링크 목록을 아무곳에나 출력하기보다는 내가 추가한 블로그나 사이트를 블로그 목록을 다소곳하게 보이게 하려면 글 본문보다는 사이드바에 위치하여 어느 페이지에서도 접근하기가 용이하게 만들기위하여 사이드바 모듈로 만들도록 하겠습니..

티스토리 스킨만들기/Tistory One | 2017. 11. 17. 17:53

Section 24 - 티스토리 반응형 스킨 만들기 - [사이드바] 태그 클라우드

이번 시간에도 어김없이 사이드바 모듈을 만듭니다.지난 섹션에서 태그 클라우드 페이지를 만들었는데 그 태그 클라우드를 사이드바에서 뺏다/넣었다 할 수 있게 사이드바 모듈로 만들어보겠습니다. ※ 참고 섹션 : 2017/10/31 - Section 15 - 티스토리 반응형 스킨 만들기 - 태그 클라우드 STEP 1. skin.html 사이드바 태그 클라우드 코드 추가 TAGS , : 태그가 반복해서 출력되는 영역 지정 : 개별 Tag 들에 관련된 글을 출력하기 위한 URL : Tag Cloud 의 크기나 색깔을 설정할 수 있도록 해줍니다. 총 5단계의 레벨을 가지고 있으며, cloud1 ~ cloud5 까지 큰 것에서 작은 순서를 나타냅니다. cloud1 : 많이 사용한 태그의 클래스 cloud2 cloud3..

티스토리 스킨만들기/Tistory One | 2017. 11. 17. 01:44

Section 23 - 티스토리 반응형 스킨 만들기 - [사이드바] 달력

이번 시간에는 "사이드바 달력" 모듈입니다.제 경험상 티스토리 블로그에 달력을 노출하는 사람은 많이 못 봤지만 그래도 없는것보단 있는게 낫지 않을까 싶어서 달력도 만들어 보도록하겠습니다.달력은 그냥 우리가 일반적으로 날짜를 확인하는 용도로만 알고 있지만 티스토리 달력은 해당 날짜에 포스팅을 했다면 그 날짜에 글을 썼다는 마킹이 되어 있으므로 달력만 봐도 얼마나 블로그 주인이 글을 주기적으로 글을 잘 쓰고 있는지 한눈에 파악이 가능하겠금 도움을 주는 모듈이기도 합니다.(이번 달 제 달력은 많이 비어 보이겠네요 ㅋㅋㅋ)그럼 바로 코드를 확인해보겠습니다. STEP 1. skin.html 사이드바 달력 코드 추가 CALENDAR : 달력 출력합니다.(티스토리 태그 안에 어느곳에 써도 출력됩니다.) STEP 2...

티스토리 스킨만들기/Tistory One | 2017. 11. 16. 20:14

Section 22 - 티스토리 반응형 스킨 만들기 - [사이드바] 글 보관함

이번 섹션은 "사이드바 글 보관함" 입니다.글 보관함은 년/월별 글을 한눈에 볼 수 있게 해주는 기능입니다. 2017년11월에 몇개의 글이 남겨있는지? 2017년 10월에는 몇개에 글을 작성했는지 쉽게 알 수 있도록 목록형태로 출력해주는 사이드바 모듈입니다.지난 섹션에서 작업했던 것들과 큰 차이가 없으므로 바로 코드 작업 들어갑니다. STEP 1. skin.html 사이드바 글 보관함 코드 추가 ARCHIVE () : 월별 글 보관함을 반복 출력영역 지정 : 각 월별 보관함으로 이동할 주소 : 년과 월을출력 : 각 월별에 속한 글의 갯수 STEP 2. 사이드바에 글 보관함 모듈 추가블로그 관리 -> 꾸미기 -> 사이드바 메뉴 설정 "글 보관함 모듈"을 사이드바2에 추가"변경사항 저장" 버튼을 클릭하여 저..

티스토리 스킨만들기/Tistory One | 2017. 11. 16. 00:15

Section 21 - 티스토리 반응형 스킨 만들기 - [사이드바] 최근 댓글

이번 섹션은 "사이드바 최근 댓글 목록"을 만들도록 하겠습니다.치환자만 다를뿐 구조는 지난 2017/11/13 - Section 20 - 티스토리 반응형 스킨 만들기 - [사이드바] 최근글 에서 작업한 구조와 똑같습니다. STEP 1. skin.html 사이드바 최근 댓글 목록 코드 추가 RECENT COMMENT : 댓글을 반복 출력하는 영역 지정 : 댓글로 이동할 주소 : 댓글의 본문 일부 : 댓글을 쓴 사람 이름 : 댓글을 쓴 시간 STEP 2. 사이드바에 최근 댓글 모듈 추가 블로그 관리 -> 꾸미기 -> 사이드바 메뉴 설정 "최근에 달릿 댓글 목록" 코드를 넣으면 사이드바 메뉴에서 모듈 확인이 가능합니다. 모듈을 사이드바2 -> 최근에 올라온 글(최근글) 모듈 아래에 추가합니다.(순서는 상관없습..

티스토리 스킨만들기/Tistory One | 2017. 11. 15. 21:26

Section 20 - 티스토리 반응형 스킨 만들기 - [사이드바] 최근글

이번섹션은 "사이드바 최근글 목록"을 만들도록 하겠습니다.최근글 목록은 말 그대로 최근에 올라온 글 목록을 모듈형태로 노출/비노출 시킬 수 있는 사이드바 요소입니다. 사이드바 요소들의 코드는 간단하기 때문에 코드와 치환자만 살펴보는 것만으로도 얼마든지 응용이 가능하기때문에 바로 작업들어갑니다. STEP 1. skin.html 사이드바 최근글 목록 코드 추가 ... 공지사항 사이드바 코드 생략 ... RECENT POST : 최근에 올라온 글을 반복 출력하는 영역 지정 : 최근글로 이동할 주소 : 최근글의 제목 : 최근글에 달린 댓글 갯수 : 작성자 이름 STEP 2. 사이드바에 최근글 모듈 추가 블로그 관리 -> 꾸미기 -> 사이드바 메뉴 설정"최근에 올라온 글 목록" 코드를 넣으면 사이드바 메뉴에서 모..

티스토리 스킨만들기/Tistory One | 2017. 11. 13. 14:51

티스토리툴바