티스토리

여긔의 IT Story
검색하기

블로그 홈

여긔의 IT Story

shalchoong.tistory.com/m

여긔 님의 블로그입니다.

구독자
30
방명록 방문하기
공지 스킨 업데이트 중입니다. 모두보기

주요 글 목록

  • 티스토리 스킨 만들기 #20 공지 (2) 본문 공지 본문 지난시간에는 공지사항 목록을 만들어봤다. 요번시간에는 내가 공지한 글을 보여지게 해보자. 치환자 공지 본문 그룹치환자 공지 제목 값치환자 작성자 값치환자 작성일 값치환자 공지 본문 값치환자 html 작성 설명은 그림으로 css 작성 #notice .notice-title { padding: 10px 20px; background: #ddd; } #notice .notice-title h1 { font-size: 1.875rem; } #notice .notice-info { padding: 5px 20px; background: #aaa; margin-bottom: 5px; } #notice .notice-info p span { margin-left: 10px; } #notice .notice.. 공감수 0 댓글수 0 2020. 3. 17.
  • 티스토리 스킨 만들기 #19 공지 (1) 목록 공지사항 목록 요번시간에는 공지사항 목록을 만들어보자. 치환자 공지사항 그룹치환자 인덱스 그룹치환자 공지 작성자 값치환자 공지 작성일 값치환자 공지글 링크 값치환자 공지 제목 값치환자 공지 요약 값치환자 html 작성 설명은 그림으로 css 작성 #notice { border: 2px solid #d09aec; margin-bottom: 1px; } #notice .notice-list-item { padding: 5px 10px; background: #fff; } #notice .notice-list-item a { text-decoration: none; } #notice .notice-list-item:hover .notice-list-text { text-decoration: underline;.. 공감수 0 댓글수 0 2020. 3. 16.
  • 티스토리 스킨 만들기 #18 보호글 (2) 비밀번호 폼 보호글 비밀번호 입력 지난 시간에는 보호글을 목록에 노출시켜보았다. 이번시간에는 노출된 보호글을 클릭할경우 비밀번호입력 폼이 나오게 해보자. 치환자 본문 그룹치환자 카테고리 링크 값치환자 카테고리 명 값치환자 글 제목 값치환자 작성자 값치환자 작성일 값치환자 폼제출 스크립트 값치환자 비밀번호 값치환자 html 작성 보호된 글입니다 내용을 보시려면 비밀번호를 입력하세요 확인 설명은 그림으로 css 작성 #protected .protected-title { padding: 10px 20px; background: #ddd; } #protected .protected-title p { font-size: 1rem; color: #d09aec; } #protected .protected-title a { tex.. 공감수 0 댓글수 1 2020. 3. 13.
  • 티스토리 스킨 만들기 #17 보호글 (1) 목록 보호글 목록 포스팅목적이 특정 사용자에게만 공개하고싶은경우, 비밀번호를 설정해서 보호글로 작성할수있다. 보호글은 일반 포스팅과 다른 치환자를 가지고있어 이글이 보호글인지 나타내어줄수있다. 코딩하지 않을경우 표시되지 않는다. 치환자 이전시간 (#12~#16) 까지는 모두 에 들어가는 내용이었다. 즉 메인 article을 표시해주는 그룹이었다(※ index(목록), permalink(본문, 카테고리 다른글, 댓글)). 이번에 해볼것은 보호글 영역으로 보호글 그룹에 index와 permalink를 만들어야한다. 우선 이번 시간엔 목록을 표시하는 index를 작성하려고한다. 보호글 그룹치환자 인덱스 그룹치환자 카테고리 링크 값치환자 카테고리명 값치환자 글 주소 값치환자 글 제목 값치환자 작성자 값치환자 작성 시.. 공감수 0 댓글수 0 2020. 3. 12.
  • 티스토리 스킨 만들기 #16 댓글 (2) 리스트 댓글 리스트 댓글이 작성되었다면 댓글을 리스트업 시켜야 확인할수있다. 오늘은 댓글 리스트부분에 대해 작업해보자 치환자 댓글 리스트도 쓰기폼과 마찬가지로 일전에 했던 방명록리스트와 유사하다. 2020/03/05 - [티스토리 관리/티스토리 스킨 만들기] - 티스토리 스킨 만들기 #11 방명록 (2) 리스트 티스토리 스킨 만들기 #11 방명록 (2) 리스트 방명록 리스트 방명록을 남겨주는 사람이 있다면 리스트도 확인할 수 있어야 한다. 티스토리 방명록은 1차댓글까지 남길수있도록 되어있어 최초 방명록과 그에대한 댓글도 구분감이 있어야한다. 치환자는 동일하지.. shalchoong.tistory.com 우선 치환자에 대해 알아보자 댓글 리스트 출력 그룹치환자 댓글 리스트 반복 그룹치환자 대댓글 리스트 출력 그룹.. 공감수 0 댓글수 0 2020. 3. 11.
  • 티스토리 스킨 만들기 #15 댓글 (1) 쓰기폼 댓글 쓰기 폼 열심히 포스팅한 글의 댓글을 쓰기위한 폼을 만들어보자 치환자 치환자는 다르지만 일전시간에 해보았던 2020/03/04 - [티스토리 관리/티스토리 스킨 만들기] - 티스토리 스킨 만들기 #10 방명록 (1) 쓰기폼 티스토리 스킨 만들기 #10 방명록 (1) 쓰기폼 방명록 이제 까지는 워밍업에 불과했다. 방명록 파트부터는 코드도 길어지고 복잡해진다..... 하지만 내 블로그에 방문한 사람들이 남겨주는 소중한 발자취를 남길수있는 기능이기에 포기해서는 안된다! 치환자 방.. shalchoong.tistory.com 과 유사하다. 댓글 그룹치환자 댓글 쓰기폼 그룹치환자 댓글 입력박스 값치환자 댓글 입력 온클릭 이벤트 값치환자 비로그인 or admin이 아닐경우 보여지는 그룹치환자 비밀글 체크박스 .. 공감수 0 댓글수 0 2020. 3. 10.
  • 티스토리 스킨 만들기 #14 카테고리 내 다른글 카테고리 내 다른글 기본 적으로 티스토리 플러그인(카테고리 글 더 보기)로 인해 다음과 같은 목록이 글본문 마지막에 나오고있다. 하지만 가독성도 좋지않고 블로그와 하나되는 느낌이 없기 때문에 티스토리에 있는 치환자들로 이용해서 만들어줄 생각이다. 플러그인은 해제하면된다. 치환자 카테고리 글 더보기 영역 그룹치환자 글 주소 값치환자 글 제목 값치환자 글 발행시간 값치환자 썸네일 그룹치환자 썸네일 주소 값치환자 그리고 추가적으로 이전시간에 사용했던 카테고리 명 값치환자 카테고리 링크 값치환자 를사용해서 현재 카테고리와, 카테고리 목록으로 갈수있게끔 해주려고한다. html 작성 더보기 설명은 그림으로 css 작성 article .related { margin-top: 10px; } article .relate.. 공감수 0 댓글수 0 2020. 3. 9.
  • 티스토리 스킨 만들기 #13 글 본문 글 본문 지난시간에는 글목록을 만들어봤다. 이번시간에는 정성스럽게 포스팅한 본문이 나오게끔 만들어보자. 치환자 지난 시간에 내용목록이 나오게만든 그룹치환자가 라고 알아봤다. 본문이 표시되는 그룹치환자는 이다. 세부적인 값치환자는 동일한 부분도 있으나 다른부분도 있다. 본문 그룹치환자 카테고리 링크 값치환자 카테고리명 값치환자 글제목 값치환자 작성자 값치환자 작성일 값치환자 글 내용 값치환자 관리기능 그룹치환자(관리자권한이 있는 계정으로 접속시만 나옴) 글의 이후 상태 값치환자( 공개 / 비공개 ) 글 공개 / 비공개 온클릭 이벤트 값치환자 글 수정 링크 값치환자 글 수정 온클릭 이벤트 값치환자 글 삭제 온클릭 이벤트 값치환자 태그 출력 그룹치환자 태그 반복 출력 html 작성 | 수정 | 수정(새창) |.. 공감수 0 댓글수 0 2020. 3. 7.
  • 티스토리 스킨 만들기 #12 글 목록 글 목록 글 목록은 티스토리 설정에서 확인할 수 있듯이 목록형, 내용형, 목록+내용형 이 있는데, 목록형과 내용형을 구성하는 치환자가 다르다. 나는 기본설정인 목록+내용형으로 해서 필요한 부분만 사용하려고한다. 치환자 우선 방향을 잡아보자. 해당되는 글 목록이 몇개인지 나타내고싶고(목록형), 그 목록에 해당되는 글의 욕약을 리스트로 보여주고싶다(내용형). 목록형을 만들기 위해서는 리스트 치환자들을 사용해야하고, 내용형을 만들기위해서는 본문의 index_aticle 치환자들을 사용해야한다. 리스트 치환자에서 사용할 치환자들은 다음과 같다. 리스트 그룹치환자 리스트시킨 카테고리 or 검색어 or 태그 값치환자 글 갯수 값치환자 index_article 에서 사용할 치환자들은 다음과 같다. 본문영역 그룹치환자.. 공감수 3 댓글수 2 2020. 3. 6.
  • 티스토리 스킨 만들기 #11 방명록 (2) 리스트 방명록 리스트 방명록을 남겨주는 사람이 있다면 리스트도 확인할 수 있어야 한다. 티스토리 방명록은 1차댓글까지 남길수있도록 되어있어 최초 방명록과 그에대한 댓글도 구분감이 있어야한다. 치환자는 동일하지만 클래스를 나누어 구분감을 주어야한다. 치환자 방명록 리스트 그룹치환자 방명록 출력 그룹치환자 방명록 댓글 그룹치환자 방명록 댓글 출력 그룹치환자 방명록 고유 id 값치환자 방명록 스타일 ( 티스토리 내부적 ) 값치환자 글쓴이 값치환자 글쓴날짜 값치환자 글 내용 값치환자 삭제 온클릭 이벤트 값치환자 댓글 온클릭 이벤트 값치환자 html 작성 수정 / 삭제 댓글쓰기 수정 / 삭제 길다... 주석부분은 지난시간에 한 부분입니다. 또 그림으로 설명 css 작성 #guestbook .guest-list { pad.. 공감수 0 댓글수 0 2020. 3. 5.
  • 티스토리 스킨 만들기 #10 방명록 (1) 쓰기폼 방명록 이제 까지는 워밍업에 불과했다. 방명록 파트부터는 코드도 길어지고 복잡해진다..... 하지만 내 블로그에 방문한 사람들이 남겨주는 소중한 발자취를 남길수있는 기능이기에 포기해서는 안된다! 치환자 방명록 역시 그룹치환자가 존재한다 방명록 쓰기 폼에 대한 부분의 치환자는 아래와 같다 방명록 입력을 위한 폼을 출력 하는 그룹치환자 방명록 내용 입력박스 값치환자 방명록 입력 완료 이벤트 값치환자 로그인을 하지 않았거나 소유자가 아닌경우 보여지는 영역 그룹치환자 로그인을 하지 않았을경우 보여지는 영역 그룹치환자 이름 입력박스 값치환자 이름 값치환자 비밀번호 입력박스 값치환자 비밀번호 값치환자 홈페이지 입력박스 값치환자 홈페이지 값치환자 추가로 공식 문서에는 존재하지 않지만 꼭 필요한 기능인 비밀글 설정! .. 공감수 0 댓글수 0 2020. 3. 4.
  • 티스토리 스킨 만들기 #9 태그 클라우드 태그 클라우드 티스토리 포스팅 할때 태그를 사용하는 경우가 있을 것이다. 태그 클라우드란, 내 블로그에서 사용된 모든 태그를 모아서 보여주는 것으로 태그 클릭의 빈번(?)함을 5등급화 하여 인기있는 태그가 무었인지도 확인 가능하게 해준다. 치환자 태그 영역 치환자 목록이다. 태그 클라우드 그룹치환자 개별 태그 그룹치환자 태그 URL 값치환자 태그 등급 값치환자 태그 이름 값치환자 html 작성 Tags 공감수 0 댓글수 0 2020. 3. 3.
  • 티스토리 스킨 만들기 #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.. 공감수 0 댓글수 0 2020. 3. 2.
  • 티스토리 스킨 만들기 #7 헤더 만들기 (1) 헤더 만들기 오늘은 헤더부분을 만들어 보려고한다. 보통 웹페이지에서 헤더부분은 웹의 타이틀, 네비게이션 등을 포함하고 있다. 나는 블로그 타이틀과 검색기능, 그리고 태그모음, 방명록 바로가기를 넣을 예정이다. 치환자 우선 치환자 부터 알아보자. 지난 기본파일 만들기 2020/02/20 - [티스토리 관리/티스토리 스킨 만들기] - 티스토리 스킨 만들기 #5 기본 파일 작성 (2) 티스토리 스킨 만들기 #5 기본 파일 작성 (2) 지난 시간에는 필수 파일중 index.xml 파일을 만들어보았다. 이번 시간에는 기본적인 skin.html 파일을 만들어 볼까 한다. 기본작성을 끝내고 마지막에 사용된 치환자에 대해 설명하도록하겠다. skin.html shalchoong.tistory.com 에서 마지막 부분에 .. 공감수 0 댓글수 0 2020. 2. 28.
  • 티스토리 스킨 만들기 #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: .. 공감수 0 댓글수 0 2020. 2. 21.
  • 티스토리 스킨 만들기 #5 기본 파일 작성 (2) 지난 시간에는 필수 파일중 index.xml 파일을 만들어보았다. 이번 시간에는 기본적인 skin.html 파일을 만들어 볼까 한다. 기본작성을 끝내고 마지막에 사용된 치환자에 대해 설명하도록하겠다. skin.html html의 head 영역이다. 화면에 직접적으로 표시되는건 아니지만 각종 정보, 파일연결등을 담고있다. meta 태그는 이문서의 기본 정보들을 만들어주는 태그이고, link 태그는 외부파일 연결 ex) css파일, script 태그는 js파일 연결할 때 쓴다. 블로그제목 블로그메뉴 사이드바 태그 클라우드 방명록 방명록 글쓰기 방명록 리스트 글 글 제목 | 카테고리 | 작성일 | 글 관리 글 태그&소셜 관련글 댓글수 댓글 댓글 리스트 댓글 쓰기 페이지 공지사항 글 보호 글 커버 html의 b.. 공감수 0 댓글수 8 2020. 2. 20.
  • 티스토리 스킨 만들기 #4 기본 파일 작성(1) 스킨 기본 파일중 index.xml 파일을 만들어보자. 티스토리 공식 문서 기본 스킨 1.1 tistory http://notice.tistory.com tistoryblog@daum.net 5 5 5 10 30 3 0 0 25 27 30 30 30 1 1 댓글이 없습니다. 댓글 하나 달렸습니다. 받은 트랙백이 없고 트랙백이 하나이고 000000 ffffff 000000 eeeeee 27 1 500 list 가장 기본 형태의 index.xml 파일구조이다. 딱히 따로 건드릴 필요없이 그냥 사용해도 무관하다. 나도 그냥 사용할 예정이다. 공감수 0 댓글수 0 2020. 2. 19.
  • 티스토리 스킨 만들기 #3 기본 파일 생성 일전에 티스토리 스킨의 필수 파일 3가지에 대해 언급한적이있다. 스킨 정보 파일 index.xml 스킨 파일 skin.html 디자인 파일 style.css 오늘은 이 3가지 파일을 생성해보도록 하자 1. 폴더생성 폴더를 원하는 이름으로 하나 생성해준다. 2. 파일생성 폴더내 빈공간에서 마우스 우클릭을 통하셔 텍스트 문서를 만들어준다. 3. 파일 이름 변경 우선 폴더 메뉴의 보기를 눌러 우측 파일확장명 체크박스에 체크를 한다. 이미되어있다면 넘어가도된다. 그후 만들어둔 파일의 이름을 변경한다. 확장자까지 바꾸게 되면 위와 같은 경고가 뜰수도있는데 그냥 무시하고 예(y)를 눌러준다. 4. 이방법으로 총 3개의 파일을 만들어준다 5. 그다음 편집을 위해서 파일을 열어주면 된다. 기본 작성 후에는 티스토리 편.. 공감수 0 댓글수 0 2020. 2. 18.
  • 티스토리 스킨 만들기 #2 레이아웃 웹 서비스(블로그), 어플리케이션 등 사용자 에게 제공되어지는 화면을 구성하기위한 디자인적 요소를 만들기전, 가장 포괄적인 레이아웃을 만들어야한다. 가장 대표적인 대중적인 레이아웃은 다음과 같다. 모든 요소를 감싸는 Container, 페이지의 상단 요소 Header, 페이지의 하단 요소 Footer, 페이지의 본문 영역 Section, 필요에 의해 사용되어지는 Sidebar로 이루어져 있다. 다만, 모든 요소가 필수적인 것은 아니다. 내가 생각하기에 레이아웃에 답은 없다. 하지만 중요한 점은 요즘 웹서비스는 모두 '반응형'으로 만들어진다는것이다. '반응형' 이란 표현은 많이들 들어봤을것이다. 티스토리 공식 스킨들을 보면 다들 '반응형' 이라고 적혀있다. 그럼 이 '반응형' 이란것은 무엇일까? 하나의 웹.. 공감수 1 댓글수 0 2020. 2. 17.
  • 티스토리 스킨 만들기 #1 티스토리 스킨 제작기 국내에서 접근 하기 쉬운 블로그는 여러가지가 존재한다. 다른 블로그보다 티스토리 블로그의 강점이라면 당연 자유도에 있다고 본다. 타 블로그는 디자인 변경이 어렵거나 거의 불가능 하지만, 티스토리 블로그는 기본적인 html과 css만으로도 충분히 원하는 방향으로 레이아웃을 꾸밀 수가 있다. 웹디자인을 할줄 안다던가, 아님 최소한 내가 만들어가는 나의 블로그를 내손으로 직접 디자인 하겠다는 꿈이 있다면 티스토리 블로그에 끌리는것은 당연하다. 나는 전문적이진 않지만 취미로 각종 프로그래밍 언어를 배우는 것을 좋아하는 사람이다. 내 기준으로 볼때 티스토리 블로그를 꾸미는데 필요한 언어인 html과 css는 아주 쉬운 언어라고 생각한다. 티스토리 스킨 제작! 티스토리 스킨의 기본구조는 1. 메인 화면을 담당하는 .. 공감수 2 댓글수 0 2020. 2. 14.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.