AI•SW 개발이야기

메인 페이지 두 번째 시간입니다. 글 내용이 많으면 인덱스에서 길게 나오는 문제를 수정할 거고요. 전체적으로 다른 블로그와 비슷하게 모양을 가다듬겠습니다. 연습용으로 개설된 티스토리 블로그 (https://hijingjingpractice.tistory.com/) HTML Html 변경 없음 CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 #header { height: - border-bottom: thin solid; } #header h1 { margin: 50px auto; } #aside { height: - border: - } #manage { b..

오늘은 며칠간 현재 블로그와 씨름한 이야기를 잠깐 하겠습니다. 제가 레이아웃을 만들고 html과 css를 포스팅에 삽입하기 시작하면서 있었던 이야기입니다. 얼마 전부터 메인 인덱스 글들이 몇 개가 안 보인다거나 페이지 이동 표시가 어긋나기 시작했습니다. 처음에 포스팅할 때는 한 번에 인덱스 페이지가 순서대로 보였는데 이상하더군요. 여러 방법을 사용해보다가 내용 표시를 1개씩으로 제한하니 다 나오는 겁니다. 저는 스킨에 문제가 있을까 생각해서 다른 스킨도 적용해봤지만 동일 증상입니다. 다들 사용하는 공개 스킨인데 그건 말도 안 되는 가정이었지요. "동일 스킨을 사용하는 분들은 잘만되는데 왜 안되지?" 딱 이 생각밖에 없어서 처음부터 다시 작성해야 되나 고민도 했습니다. 그러다가 페이지 넘김 표시 위치가 중..

오늘은 content 부분의 메인 페이지 인덱스를 만들어 보겠습니다. 홈 화면에 최근글이 보이면서 제목, 내용, 카테고리, 작성일자 이렇게 표현할 겁니다. 연습용으로 개설된 티스토리 블로그 (https://hijingjingpractice.tistory.com/) HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 HTML 1열 - 작업해온 HTML 중 id="content" 부분을 수정 3열 - 글 그룹 치환자를 이용해서 공간을 할당 4열 - CSS적용을 위한 div 태그 삽입 6열 - 인덱스 페이지 표시 영역 치환자로 인덱스 공간 할당 7열 - div 태그 삽입 8열 - 12열 글 제목 a 태그로 링크, CSS적용을 위한 클래스 선언 9열 -..

오늘은 레이아웃에 사이드 카테고리를 만들어 보겠습니다. 만드는 김에 간단한 관리자 메뉴와 글쓰기도 같이 만들어볼게요. 연습용으로 개설된 티스토리 블로그 (https://hijingjingpractice.tistory.com/) HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 HTML 제목 상자 Title을 [ ##_title_## ] 치환자 변경 - 제목변경시 자동 적용 aside에 s_sidebar, s_sidebar_del..

이전에 포스팅한 Html구조를 이용해서 레이아웃을 만들어 보겠습니다. 연습용으로 개설한 티스토리 블로그 (https://hijingjingpractice.tistory.com/) HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 /* @charset "utf-8" html { 기본 문서 margin : 0; 마진 제거 padd..

오늘은 기본적인 Html 구조를 한 번 살펴볼게요. 복잡하지 않으니 금방 이해가 될 겁니다. 대략 위와 같은 스킨을 제작한다고 했을 때 필요한 코드는 이렇습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 cs 물론 CSS를 설정해서 위치도 잡아줘야 되고 모양도 다듬어야겠지요. 그러나 그전에는 위에서 아래로 내려오는 하나의 문서와도 같은 겁니다. 다른 사이트는 복잡할지 모르겠지만, 기본은 크게 다르지 않을 거라 생각합니다. 자. 이러면 저희는 배워야 할 건 얼마 되지 않습니다. 거창한 웹사이트를 만드는 게 아니라 직접 사용할 간단한 스킨만 만들면 되니깐요. 특히 티스토리 같은 경우에는 치환자라는 스킨 가이드를 지원합니다. 어떤 글을 작성하면..

오늘은 비가 내려서 찝찝하네요. 이럴 땐 컴퓨터 앞에 시원하게 앉아있는 게 복입니다. 그렇게 되는날을 기약하며 오늘은 스킨 작업하기 전에 기본 준비부터 해볼게요. 기본으로 티스토리 관리에서 스킨편집 툴을 제공합니다. 블로그관리 홈 > 꾸미기 (스킨 편집) > Html편집 저희는 초보고 기초지식도 없는데 많은 코드를 적용하기는 하늘의 별따기입니다. 간단한 Html 코딩도 / 기호 하나로 엉망이 되는 경우가 허다하니깐요. 코딩을 한 번에 하는 분은 기본 편집으로 되겠지만 저희는 아니니깐 옆에서 도와줄 편집 툴부터 설치합니다. 기본적인 Html편집과 CSS만 도와주면 되니깐 익숙한 툴이 있으시면 그걸 사용하셔도 됩니다. 저는 Atom (https://atom.io/) 이라는 프로그램을 준비하겠습니다. 각자 자..

첫 포스팅 내용을 고민하다가 생각난 내용은 이겁니다. "배운 것을 티스토리에 포스팅할 예정이니깐 스킨부터 어떻게 한번 건드려보자!" "IT 블로그를 운영하는 사람이 HTML을 제대로 구성 못해서 되겠나!" "나만의 블로그를 처음부터 차근차근 만들어가자!" 네.. 보시는 바와 같이 실패입니다. 티스토리에서 제공해주는 기본 반응형 스킨을 적용 중입니다. Html과 CSS의 배움이 짧기도 했거니와 치환자도 적응을 못해버렸습니다. Html을 편집해서 아래처럼 기본적인 레이아웃을 3단형으로 만들기는 했습니다. 레이아웃까지는 무난하게 진행되었는데 내용 부분에서 문제가 생겼습니다. 검색창과 내용이 동시에 표시되거나 포스팅 내용이 끝나면 다음 포스팅 내용이 바로 보이는 겁니다. 여기서 막혔습니다... 티스토리 스킨의 ..