2020. 3. 4.

티스토리 관리/티스토리 스킨 만들기2020. 3. 4.

티스토리 스킨 만들기 #10 방명록 (1) 쓰기폼

방명록 이제 까지는 워밍업에 불과했다. 방명록 파트부터는 코드도 길어지고 복잡해진다..... 하지만 내 블로그에 방문한 사람들이 남겨주는 소중한 발자취를 남길수있는 기능이기에 포기해서는 안된다! 치환자 방명록 역시 그룹치환자가 존재한다 방명록 쓰기 폼에 대한 부분의 치환자는 아래와 같다 방명록 입력을 위한 폼을 출력 하는 그룹치환자 방명록 내용 입력박스 값치환자 방명록 입력 완료 이벤트 값치환자 로그인을 하지 않았거나 소유자가 아닌경우 보여지는 영역 그룹치환자 로그인을 하지 않았을경우 보여지는 영역 그룹치환자 이름 입력박스 값치환자 이름 값치환자 비밀번호 입력박스 값치환자 비밀번호 값치환자 홈페이지 입력박스 값치환자 홈페이지 값치환자 추가로 공식 문서에는 존재하지 않지만 꼭 필요한 기능인 비밀글 설정! ..

2020. 3. 3.

티스토리 관리/티스토리 스킨 만들기2020. 3. 3.

티스토리 스킨 만들기 #9 태그 클라우드

태그 클라우드 티스토리 포스팅 할때 태그를 사용하는 경우가 있을 것이다. 태그 클라우드란, 내 블로그에서 사용된 모든 태그를 모아서 보여주는 것으로 태그 클릭의 빈번(?)함을 5등급화 하여 인기있는 태그가 무었인지도 확인 가능하게 해준다. 치환자 태그 영역 치환자 목록이다. 태그 클라우드 그룹치환자 개별 태그 그룹치환자 태그 URL 값치환자 태그 등급 값치환자 태그 이름 값치환자 html 작성 Tags

2020. 3. 2.

티스토리 관리/티스토리 스킨 만들기2020. 3. 2.

티스토리 스킨 만들기 #8 헤더 만들기 (2)

헤더 만들기 (2) 지난 시간에는 2020/02/28 - [티스토리 관리/티스토리 스킨 만들기] - 티스토리 스킨 만들기 #7 헤더 만들기 (1) 불러오는 중입니다... 헤더 영역의 html을 작성해 보았다. 오늘은 지난 시간에 이어 css를 작성해보려한다. css 작성 우선 기본파일생성시에 만들었던 css는 전부 삭제하고시작하도록하겠다. ( 임의의 레이아웃을 표현하기위해 작성해둔 것이었으므로 전체삭제해도 무방 ) 일단, 헤더뿐 아니라 전체 영역을 포괄해줄 기본 코드부터 작성 @charset "utf-8"; @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap'); * { font-family: 'Noto Sans K..

2020. 2. 28.

티스토리 관리/티스토리 스킨 만들기2020. 2. 28.

티스토리 스킨 만들기 #7 헤더 만들기 (1)

헤더 만들기 오늘은 헤더부분을 만들어 보려고한다. 보통 웹페이지에서 헤더부분은 웹의 타이틀, 네비게이션 등을 포함하고 있다. 나는 블로그 타이틀과 검색기능, 그리고 태그모음, 방명록 바로가기를 넣을 예정이다. 치환자 우선 치환자 부터 알아보자. 지난 기본파일 만들기 2020/02/20 - [티스토리 관리/티스토리 스킨 만들기] - 티스토리 스킨 만들기 #5 기본 파일 작성 (2) 티스토리 스킨 만들기 #5 기본 파일 작성 (2) 지난 시간에는 필수 파일중 index.xml 파일을 만들어보았다. 이번 시간에는 기본적인 skin.html 파일을 만들어 볼까 한다. 기본작성을 끝내고 마지막에 사용된 치환자에 대해 설명하도록하겠다. skin.html shalchoong.tistory.com 에서 마지막 부분에 ..

2020. 2. 21.

티스토리 관리/티스토리 스킨 만들기2020. 2. 21.

티스토리 스킨 만들기 #6 기본 파일 작성 (3) 과 스킨 upload

이번 시간에는 기본 css를 작성해보겠다. 지난시간에 만들어둔 html에 연결되는 디자인 속성 파일로서 html요소의 배치, 꾸미기 등을 할수있다. style.css @charset "utf-8"; * { padding: 0; margin: 0; } #container { max-width: 1920px; padding: 10px; margin: auto; } header { width: 100%; height: 80px; box-sizing: border-box; border: 1px solid #000; } section { width: 100%; box-sizing: border-box; border: 1px solid #000; padding: 10px; } section > * { width: ..