'티스토리'에 해당되는 글 47건

Section 11-5 - 티스토리 반응형 스킨 만들기 - 카테고리 내 다른 글 보기

이번 섹션은 글 상세보기 시 하단부에 해당 글과 같은 카테고리 내에 다른 글 목록을 출력해주는 치환자를 다룹니다. 블로그 유입은 키워드 검색으로 대부분 들어오는데, 해당 글과 관련 된 글 목록이 노출되기 때문에 바로 빠져나가지 않고 한번더 다른 글을 쉽게 접근할 수 있도록 목록을 출력하는 기능입니다. 카테고리 내 다른 글 목록은 블로그 방문자들을 한 번 더 블로그에 붙잡아 둘 수 있는 미끼라고 생각하시면 쉽겠네요 후훗 ㅡ/.,ㅡ;; 그럼 작업을 시작합시다. STEP 1. skin.html 마크업 Related Articles MORE 주석 아래에 카테고리 내 다른 글 보기 영역을 지정합니다.카테고리 내 다른 글 보기 영역 지정은 로 지정합니다.카테고리명은 , 링크는 당연히 다른 글 목록은 여러개의 글이 ..

티스토리 스킨만들기/Tistory One | 2017. 10. 19. 19:40

Section 11-4 - 티스토리 반응형 스킨 만들기 - 글 태그 및 소셜공유

이번 섹션은 글 상세보기시 하단에 해당 글의 태그와 소셜공유 버튼을 만듭니다.글 작성시 태그를 입력해야만 태그가 나오겠죠? 소셜공유 버튼은 페이스북, 트위터, 카카오스토리에 블로그 포스트 주소를 공유하는 기능입니다. 저는 별로 사용하지 않지만 소셜네트워크 이용자나 마케터분들은 필요하겠죠~※ 태그 입력 설명은 생략합니다. STEP 1. skin.html 마크업 Tag : 공유하기 링크 페이스북 트위터 카카오스토리 기존 글 본문 치환자() 아래에 넣습니다. (본문 글에 관련 된 정보라서 한곳에 모아넣었습니다.) 이 태그가 태그치환자가 동작할 수 있도록 영역을 지정합니다.영역 지정이 완료되면 태그가 출력 되도록하는 치환자는 입니다.태그가 치환되어서 나오는 태그는 태그 이렇게 앵커태그가 나열됩니다. 스타일 적용..

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

Section 11-3 - 티스토리 반응형 스킨 만들기 - 글 상세 내용 디자인

이번 섹션은 글 상세 내용 넣기입니다. 헌데 제목은 "글 상세 내용 디자인"입니다. 왜? 글 상세 내용 치환자는 너무 간단합니다. 하지만 글 본문을 보는 것이기 때문에 CSS로 이쁘게 디자인을 많이 해야 하므로 디자인이라고 정했습니다. ㅡ/,.ㅡ;;ㅎㅎㅎ그럼 바로 시작 ㄱㄱㄱㄱㄱ STEP 1. skin.html 글 본문 치환자 넣기 글 관련 정보 하단부에 넣으면 끝입니다.저는 article 이라는 class명을 부여했는데 다른 걸로 충분히 바꿔서 넣으셔도 됩니다. ※ 참고 : 구글 애드센스나 카테고리의 다른 글과 같은 플러그인은 글 본문을 중심으로 상하단에 배치됩니다. 아무 글이나 눌러서 글 본문을 확인하면 아래와 같이 나옵니다. STEP 2. style.css 글 본문 디자인 /* Article */ ..

티스토리 스킨만들기/Tistory One | 2017. 10. 18. 18:01

Section 11-2 - 티스토리 반응형 스킨 만들기 - 글 관련 정보

이번 섹션은 저번 Section 11-1 - 티스토리 반응형 스킨 만들기 - 글 영역 지정 후 그 안에 글 관련 정보를 출력하는 코드를 다룹니다. 글 관련 정보란 해당 글의 "카테고리", "제목", "작성자", "작성일" 을 나타냅니다. 우리는 관리자 로그인 시 보이는 "글 수정", "글 공개/비공개", "글 삭제" 의 버튼까지 출력하겠습니다. STEP 1. skin.html 글 관련 정보 코드 넣기 본문 수정 삭제 h1 id="articleBody" 은 글 본문 영역의 시작을 알리는 제목입니다. class="sr-only"를 넣어서 화면에서 보이지는 않습니다. 하지만 이것은 시각적으로 웹을 검색하기 어려우신 분들을 위한 "스크린리더(웹을 읽어주죠)"가 구조를 인식하도록 도와주고, 웹 검색 엔진에서도 잘..

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

Section 11-1 - 티스토리 반응형 스킨 만들기 - 글 영역 지정

이번 섹션부터는 글 상세보기 화면을 만듭니다.블로그에 글을 쓰고 블로그 방문자나 본인이 직접 확인하기 위해선 글 상세보기 화면이 필요합니다. 글 보기 화면이 없다면 블로그는 앙꼬없는 붕어빵이 되는 것이죠 ㅡ/.,ㅡ;; 그만큼 중요한 화면이기 때문에 차근차근 잘 따라해야 합니다. 그래서 시작하기 전에 글 상세보기 화면은 어떤 구조로 되어 있는지 확인 후에 작업을 시작하겠습니다. 글은 티스토리 스킨 가이드에 보면 아래와 같이 구성하라고 알려주고 있습니다.18. 글18-1. 글 제목 | 카테고리 | 작성일 | 글 관리 18-2. 글 18-3. 글 관련 태그 18-4. 트랙백 | 댓글 18-5. 트랙백 18-6. 댓글18-6-1. 댓글 리스트 18-6-2. 댓글 쓰기 상세히 알아보면18-1 : 글에 대한 상세 ..

티스토리 스킨만들기/Tistory One | 2017. 10. 16. 19:19

Section 10 - 티스토리 반응형 스킨 만들기 - 글 목록(index)

이번 섹션부터는 블로그의 핵심인 포스트 관련 스킨을 만듭니다. 이부분만이라도 제대로 만들면 블로그의 기본 기능은 사용하실 수 있습니다. Description. 글 목록이란? 글 목록은 우리가 티스토리 블로그에 글을 남기면 블로그 메인이나 카테고리 선택, 또는 검색 후 나오는 글들의 목록입니다. 매일매일 글을 많이쓰면 수십, 수백개의 글들이 쌓이게 되는데 이 글들의 목록을 글 목록이라고 합니다. 디자인 구성이 귀찮기도 하고...티스토리 스킨 가이드가 허접해서 글 관련 디자인이나 코드는 티스토리 스킨인 #2를 참고하였습니다. 본격적으로 작업합니다. STEP 1. 글 관련 영역 티스토리 스킨은 기본적으로 전체 치환자가 동작하는 영역과 사이드바 영역, 글 검색 목록 등등 영역을 지정하고 그 안에서 해당하는 치환..

티스토리 스킨만들기/Tistory One | 2017. 10. 13. 17:20

Section 9 - 티스토리 반응형 스킨 만들기 - 검색결과 목록

이번섹션은 검색결과 목록, 검색결과 댓글 목록을 화면을 만듭니다. 검색결과란? 검색결과는 내 블로그내에 어떤게 있는지 검색하면 나오는 목록(리스트)입니다. 검색결과에는 글 목록과 키워드에 해당하는 댓글 목록을 출력합니다. 검색은 스킨의 우측 상단의 검색 폼을 이용하면 검색이 가능하겠죠? 아무 키워드나 입력하고 검색버튼을 누르면 블로그 주소 뒤에 "http://noo9ya.tistory.com/search/검색어" 이렇게 주소가 변환 됩니다. 여기서 "검색어"라는 검색어를 검색하면 search페이지로 이동해서 "검색어"에 대한 결과를 출력해줍니다. 우리는 그 검색 페이지를 코딩하면 되는 것이죠. 본격적으로 만들어 봅니다. STEP 1. skin.html 검색 결과 치환자 넣기 안에 우리가 기존에 11. 검..

티스토리 스킨만들기/Tistory One | 2017. 10. 10. 22:34

Section 8 - 티스토리 반응형 스킨 만들기 - sidebar에 카테고리 넣기

지난 섹션까진 사이드바 개념을 집중적으로 설명했지만 이제부터 본격적인 스킨 작업에 돌입합니다. 그 첫번째로 CATEGORY 입니다. 카테고리는 내 블로그에 어떤 종류의 글이 있는지 확인 및 이동 할 수 있게 해주는 아주 중요한 요소입니다. 이 카테고리를 우리는 사이드바에 넣어 모듈 처럼 언제든지 사이드바에 넣고 빼기가 가능하게 만들겁니다. 본격적으로 소스 작업을 하기 전에 카테고리 종류에 대해서 간단하게 설명드립니다.티스토리에서 지원하는 카테고리는 크게 두가지입니다. 하나는 트리구조형, 또 다른 하나는 리스트형입니다.우리는 이쁘게 이쁘게 만들기 위하여 리스트형으로 하겠습니다.※ 깨알 팁 : 트리구조는 치환해서 아웃풋으로 나오는 html이 기본적으로 table 코드를 출력합니다. 리스트구조는 html ul..

티스토리 스킨만들기/Tistory One | 2017. 9. 28. 23:19

Section 7 - 티스토리 반응형 스킨 만들기 - sidebar element 넌 또 뭐야?

저번 섹션에선 사이드바에 대한 개념 및 영역 지정 방법을 알아봤습니다.이제 우리는 사이드바 영역을 지정했으니 그 안에 모듈을 하나하나 채워나가면 되는 것이죠.우선 간단하게 매번 반복하는 치환자 없이 간단한 배너나 안내글을 html 코드를 이용하여 사이드바 영역에 고정시키는 모듈을 만들어보겠습니다. STEP 1. SIDEBAR element 영역 지정사이드바 영역 지정은 이지만 사이드바 안에 들어가는 모듈들의 영역 지정은 라는 태그를 사용해야 합니다. 말 그대로 사이드바 요소라는 거죵~ 그럼 복습!! 티스토리 치환자가 돌아가는 영역 지정은 사이드바는 사이드바 모듈은 s_ 이게 핵심인듯하네요.구조는 사이드바 모듈 영역 테스트 module one 우선 위처럼 따라 만들어 봅시다. 그 후 관리자 -> 꾸미기 -..

티스토리 스킨만들기/Tistory One | 2017. 9. 28. 18:53

Section 6 - 티스토리 반응형 스킨 만들기 - sidebar 넌 누구냐?

저번 section 5에서는 헤더를 만들었고, 이번에는 sidebar를 만듭니다.그리고 footer까지 완성하면 앞으로 포스트를 담을 그릇이 어느정도 완성이 되는 것이지요. ㅡ/,.ㅡ;; 이번 sidebar는 다른 영역과 다르게 블로그의 글 관련된 정보들을 모아서 보여주는 기능이 들어가므로 많은 티스토리 치환자가 들어가게 됩니다.사이드바 영역에 들어가는 예 : 공지사항, 최근에 올라온 글, 최근에 달린 댓글, 링크, 달력, 태그 클라우드, 글 보관함, 방문자 카운트, 배너 등등 우리가 넣고 싶은것들 모두다 ㅡ/.,ㅡ;;그렇다고 한번에 다 입력하는 것이 아닌 필요한 모듈에 따라 치환자가 달라지므로 부담을 가질 필요는 없습니다.본격적으로 사이드바 작업을 시작하기전에 기초적인 이해를 먼저하고 프론트엔드 작업을..

티스토리 스킨만들기/Tistory One | 2017. 9. 28. 17:35

티스토리툴바