'2017/09/03'에 해당되는 글 3건

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