'2017/09'에 해당되는 글 10건
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
Section 5 - 반응형 티스토리 스킨 만들기 - header
이번에는 블로그의 상단 부분을 만듭니다. 치환자 확인은 블로그에서 직접확인 해야합니다. 그러므로 이전에 작업 해둔 스킨을 등록하셔야합니다. 스킨 등록은 "블로그 관리 -> 꾸미기 -> 스킨 변경 화면"에서 "스킨 등록"버튼을 눌러서 파일을 올리시면 됩니다. 스킨 등록하는 자세한 방법은 차지하고 스킨 만들기로 넘어갑니다. Check . 본격적으로 시작하기 전에 몇 가지 체크해보자. 1. 현재 head 영역에 title에 만 입력되어 있다. 그러면 블로그 포스트 제목만 계속 나오기 누구 블로그인지 인지하기가 힘들다. 그래서 검색엔진에 내 블로그 제목이 이쁘게 잘 보이려면 부분을 : 로 변경한다. 2. 다음에 태그를 넣고 html문서 하단부 앞에 를 꼭 넣어야한다. 안그러면 치환자가 인식을 못한다. Secti..
티스토리 스킨만들기/Tistory One | 2017. 9. 5. 16:06
Section 4 - 반응형 티스토리 스킨 만들기 - 레이아웃
작업 할 준비는 Section 3 - 반응형 티스토리 스킨 만들기 - 파일 준비에서 어느 정도 끝냈다. 이제는 내 블로그의 레이아웃을 먼저 잡도록 하겠습니다. 프론트엔드 개발 방법은 Desktop First Mobile First 방식으로 작업하겠습니다. Mobile First는 초기 접속 시 CSS가 모바일 화면을 기본으로 보여주고 그 이상의 해상도를 사용하는 디바이스면 CSS media query가 동작하는 방식이다. Desktop First는 반대로 초기 접속 시 큰 화면 -> 작은 화면으로 동작하는 방식이다. Front-end 개발 시 예전에는 Mobile First 를 권장하였지만 (지금도 마찬가지 일 수도 있다.) 허나 IE6/7/8 에서는 오히려 media query 동작이 느려 구형 PC에..
티스토리 스킨만들기/Tistory One | 2017. 9. 3. 17:51
Section 3-3 - 반응형 티스토리 스킨 만들기 - index.xml 작성
이번 section3-3에서는 티스토리 스킨에 대한 기본정보를 담는 index.xml 파일을 작성합니다. STEP 1. index.xml 파일 생성 우선 index.xml이라는 xml파일을 새로 만들고 아래와 같이 입력합니다. xml 파일 제일 첫 번째 줄에는 아래와 같이 입력합니다. xml 파일을 utf-8로 선언을 해줍니다. STEP 2. index.xml 내용 작성 index.xml 내용을 아래와 같이 작성합니다. #1 1.0 nOo9ya http://noo9ya.tistory.com noo9ya@noo9ya.com 4 4 4 10 30 3 1 1 25 27 30 30 30 1 1 0 1 0 1 000000 ffffff 000000 eeeeee 27 1 820 STEP 3. 내 스킨 내용에 맞게 수..
티스토리 스킨만들기/Tistory One | 2017. 9. 3. 17:42
Section 3-2 - 반응형 티스토리 스킨 만들기 - fontawesome 티스토리 적용
아이콘을 하나하나 만들기 힘드니 레이아웃 잡기 전에 font-awesome.css를 사용할 수 있게 준비하겠습니다. 포스트 제일 하단에 파일을 함께 올려뒀습니다. STEP 1. 폰트어썸(font-awesome) 파일 다운로드 우선 폰트 어썸 파일을 다운받습니다. http://fontawesome.io/get-started/ 다운로드 받은 후 폴더 목록을 살펴보면 아래와 같습니다. 필요한 파일은 CSS와 fonts폴더안의 font들입니다. STEP 2. font-awesome.min.css 파일 수정 우선 css 폴더안의 font-awesome.min.css 파일을 수정합니다. font-awesome.css 는 font-awesome fonts를 사용하기 때문에 해당경로를 css와 같은 경로에 위치시키기 ..
티스토리 스킨만들기/Tistory One | 2017. 9. 3. 16:38
Section 3-1 - 반응형 티스토리 스킨 만들기 - 파일 준비
밥 먹고 노느라..디자인 구상을 못 했다. 그래도 진행!! 우선 아래와 같은 디자인의 블로그를 만들것이다. 심플하다. 이게 무슨 디자인이냐 그러겠지만...본인은 큰 틀만 잡고 나머지 세부 디자인은 그 때 그 때 생각해서 반영하도록 하겠다. 우선 skin.html 파일을 작성하겠다. 01. 블로그 제목 02. 블로그 메뉴 11. 검색 결과 리스트 12. 검색 결과 댓글 리스트 13. 위치 로그 14. 태그 클라우드 15. 방명록 15-1. 방명록 글쓰기 15-2. 방명록 리스트 16. 공지사항 글 17. 보호 글 18. 글 18-1. 글 제목 | 카테고리 | 작성일 | 글 관리 18-2. 글 18-3. 글 관련 태그 18-4. 트랙백 | 댓글 18-5. 트랙백 18-6. 댓글 18-6-1. 댓글 리스트 1..
티스토리 스킨만들기/Tistory One | 2017. 9. 1. 23:58
Section 2 - 반응형 티스토리 스킨 만들기 - 훑어보기
시간낭비는 그만하고 이제 본격적으로 작업해보자. ※ 참고로 "반응형 티스토리 스킨 만들기"는 개인적으로 티스토리 스킨을 만드는 방법을 습득함과 동시에 제작을 하는 것이므로 쓰잘때기 없는 지면 낭비와 잘못된 정보가 넘쳐 날 수 있음을 미리 알려드립니다. http://www.tistory.com/guide/skin/step0 - 티스토리 스킨 가이드 문서 참고 우선 본인도 모르기 때문에 티스토리 스킨 가이드 문서를 참고하여 작업을 시작한다. 스킨 제작 순서 디자인 구상하기 스킨 구조 만들기 치환자 활용하기 디자인 적용하기 스킨위자드 적용하기 - 간단한 설명 - 1. 디자인 구상하기 디자인이 없는데 스킨을 어떻게 만들어야 할지 감도 못 잡을 것이다. 그러므로 우선 내가 만들고 싶은 스킨 디자인을 먼저 구상하는..
티스토리 스킨만들기/Tistory One | 2017. 9. 1. 15:48
RECENT COMMENT