Section 12-3 - 티스토리 반응형 스킨 만들기 - 공지사항 본문(상세보기 화면)

지난 섹션에서는 "공지사항 목록"을 만들었으니 이젠 그 공지사항의 본문을 볼 수 있게 상세보기 화면을 작업해야겠죠?이번에도 글 상세보기 코드를 재활용하여 만들면 금방 만들기 때문에 소스 위주로 설명하고 공지사항 섹션을 끝내도록 하겠습니다. STEP 1. skin.html 공지사항 상세보기 코드 추가 .. 공지사항 목록 코드 생략 .. 본문 공지사항 : 공지사항 본문(상세보기)이 출력되는 영역 : 공지사항 제목 : 공지사항 작성자 (팀블로그가 아닌 개인 사용자용 블로그면 궂이 안넣으셔도 됩니다.) : 공지사항 작성일시 : 공지사항 본문(상세 내용) 공지사항 영역인 안에 "공지사항 목록" 소스 하단부에 위의 "공지사항 본문" 소스를 넣습니다. STEP 2. style.css 공지사항 본문 스타일 추가 /* ..

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

Section 12-2 - 티스토리 반응형 스킨 만들기 - 공지사항 목록

지난 섹션에선 사이드바에 공지사항 목록과 MORE 버튼으로 공지사항 목록으로 바로갈 수 있는 기능을 만들었습니다. 이번에는 공지사항 목록을 만들도록 하겠습니다.공지사항 목록은 글 목록과 마크업은 똑같고 치환자만 다르기 때문에 치환자 설명과 스타일시트 소스만 간단하게 보여드리고 마무리합니다. STEP 1. skin.html 공지사항 영역 지정 : 공지사항 영역은 "목록"과 "상세 보기" 두가지를 출력하는 영역 : 공지사항 목록이 반복되어 출력되는 영역 STEP 2. skin.html 공지사항 목록 코드 추가 공지사항 | : 해당 공지사항 고유 링크 주소 : 공지사항 목록 제목 : 공지사항 내용의 일부 : 공지사항 작성일시 카테고리 치환자가 없는 대신에 항상 공지사항 글만 보이기 때문에 카테고리 링크를 "/..

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

Section 12-1 - 티스토리 반응형 스킨 만들기 - 공지사항 사이드바

이번 Section 12는 공지사항을 시작합니다.공지사항은 블로그 포스트와 별개로 방문자에게 소식을 알리기 위한 기능이므로 있으면 좋겠죠? 이 기능이 필요 없다면 만들지 않아도 블로그 운영에 크게 문제가 되진 않습니다. 하지만 필수 기능이라는건 변한없으니 작업을 시작하겠습니다. DESCRIPTION공지사항은 일반 티스토리 블로그 글 쓰기와 다르게 공지사항이라는 글 쓰기가 따로 메뉴가 존재합니다. 그러므로 블로그 카테고리에는 공지사항이 노출되지 않습니다. 공지사항으로 접근하려면 공지사항 메뉴를 만들거나, 공지사항 목록을 사이드바에서 출력해줘야 접근이 가능합니다. 우리는 두번째 방법인 공지사항 목록을 사이드바에 출력하여 방문자들이 공지사항에 접근할 수 있도록 작업을 진행하도록 하겠습니다. 공지사항 작업 순서..

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

Section 11-7 - 티스토리 반응형 스킨 만들기 - 댓글 목록

지난 섹션 11-6 에서는 댓글 입력 폼에 대해서 다뤘는데 이번 섹션에서는 입력 된 댓글을 출력하는 치환자를 다룹니다. 입력을 했는데 댓글이 출력이 안되면 곤란하겠죠?ㅎㅎ댓글은 기본적으로 처음 작성된 댓글 목록과 해당 댓글에 다시 또 댓글을 다는 두가지 유형이 있습니다. 흔히 말하는 댓글과 대댓글에 대한 목록을 출력하는 것입니다.바로 들어갑니다. STEP 1. skin.html 댓글 영역 지정 Comments ... 댓글 입력 폼 댓글 입력 폼 위에 위와 같이 소스를 추가합니다. : 댓글이 출력 되는 영역 지정 : 댓글이 반복해서 출력 되는 영역 지정 : 전체 코멘트영역을 가리키는 아이디 - (최신 댓글을 클릭했을때 이 위치로 이동) : 비밀글, 관리자, 일반글에 따른 클래스명 지정 비밀글 : secre..

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

Section 11-6 - 티스토리 반응형 스킨 만들기 - 댓글 입력 폼

댓글 입력 폼은 블로그의 글에 의견, 문의등의 사용자와 소통할 수 있는 창구역할을 하는 기능입니다. 때로는 글의 내용보다 댓글의 내용이 더 재미있고 유익할 수 있는 상황이 발생하기도 하죠~ 자신만 읽을 수 있는 기록이나 일기와 같은 글에는 필요가 없을 수 있지만..ㅎㅎ 그래도 블로그의 필수 기능중 하나인 댓글 입력 폼을 만들어보겠습니다. STEP 1. skin.html 코드 추가 Comments 댓글쓰기 폼 이름 비밀번호 비밀댓글 내용 Comment Send 위와 같이 코드를 추가하면 아래와 같이 댓글 입력 폼이 출력됩니다. : 댓글 갯수 : 댓글 입력 폼 출력, 댓글 목록 출력 영역 지정 : 댓글 입력 폼 출력 영역 지정 : 티스토리 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역 지정 ..

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

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

티스토리툴바