이제 본문 디자인을 수정합니다. 저는 본문과 댓글란만 존재하도록 만들고 디자인을 수정하겠습니다. 1. (선택) 태그, 관련 글 영역 삭제하기 태그 영역을 지우려면, area_tag 를 검색하고, 영역을 지워줍니다. 관련 글 영역을 지우려면, related_type related_type_view 를 검색하고, 영역을 지워줍니다. 공감/공유 영역과 CCL 영역은 지울 수 없습니다. 티스토리 운영정책 위반입니다. HTML 탭에서 area_tag 를 검색하고, 영역을 지워줍니다. 바로 아래에 관련 글 영역이 있습니다. 영역을 지워줍니다. 2. 카테고리의 다른글 영역 디자인 수정하기 .another_category를 검색하여 코드를 추가합니다. .article_view table 를 검색하여 border 부분을..

이제 레이아웃과 헤더는 대충 마무리 되었으니 목록 화면 디자인을 수정해보겠습니다. 이 포스팅은 자유롭게 취사선택 가능하므로 패스하셔도 됩니다. 저는 최소한의 수정만으로 심플하게 제목과 페이징만 있도록 수정할 겁니다. 1. 스킨 설정 수정하기 홈 화면 글 수, 글 목록 글 수는 자유롭게 정합시다. 추가 설정 - 글 목록 형태 - 기본형으로 설정합시다. 컬러셋은 자유롭게 설정합니다. 저는 일단 블랙으로 정했습니다. (나중에 컬러셋도 바꿀 수 있어요.) 2. 일반 게시판 목록 디자인 수정하기 (목록 사이 여백 제거) .index_type_horizontal .list_horizontal .list_horizontal_item CSS 코드를 삭제합시다. (썸네일 제거) .index_type_horizontal ..

드롭다운 메뉴는 1뎁스 메뉴에 마우스를 올리면 2뎁스 메뉴가 나타나는 방식입니다. 여기서는 티스토리 카테고리 메뉴를 보여주는 치환자 내부를 수정하도록 하겠습니다. 1. 카테고리 메뉴 디자인 수정하기 .area_menu 디자인 수정하기 @media screen and (min-width: 821px) { 안에 있는 .area_menu 디자인 수정하기 .area_menu .list_gnb .link_gnb 디자인 수정하기 (권장) 필요없는 코드 제거하기 @media screen and (min-width: 821px) { 의 .area_menu .list_gnb .link_gnb 코드 삭제하기 (권장) 필요없는 코드 제거하기 .area_menu 로 검색해서, 다음 코드로 수정합니다. (보더라인과 트랜지션을 ..

이제 우리는 전체 레이아웃을 가운데로 정렬하고 헤더 디자인을 조금 더 다듬어 보겠습니다. 1. 레이아웃 가운데 정렬시키기 CSS 탭에서 #wrap 코드를 수정하고, #container 코드를 추가합니다. HTML 탭에서 .area_menu 코드를 #container 밑으로 이동합시다. CSS 탭으로 이동하여, #wrap 으로 검색합니다. 이 코드를 다음과 같이 수정합니다. (여기서 패딩 값은 브라우저 높이가 정말 작아졌을 때, 위아래 여백입니다. 자유롭게 설정해주세요.) #wrap { position: relative; overflow: auto; display: flex; height: 100%; padding: 50px 0; align-items: center; justify-content: cent..

메인 레이아웃을 변경했다면 이제 헤더를 변경할 차례입니다. 우리는 아래 파란색 영역에서 메뉴를 바깥으로 빼내서 바로 클릭이 가능하도록 만들 것 입니다. 1. 헤더 레이아웃을 컨텐츠 너비와 똑같이 맞추기 #header 하단의 밑줄을 제거하세요. .inner_header 의 높이를 제거하고 너비를 변경하세요. 작은 화면에서의 .inner_header 의 높이와 패딩을 변경하세요. CSS 탭으로 이동하여, #header 를 검색하고 border-bottom: 1px solid #eee; 코드를 지웁니다. 바로 아래에 있는 .inner_header 코드에서 max-width 를 컨텐츠의 너비(저는 800px 이었습니다.)로 수정하고, 높이를 지워주세요. 그러면 코드는 이렇게 됩니다. /* header */ #h..

이 강좌는 티스토리 스킨 편집을 처음 해보는 왕초보를 위해 만들었습니다. 대상 나만의 티스토리 스킨을 만들고 싶은데 강좌가 없고 있어도 너무 어려워요. 정말 간단한 스킨/기능만 필요한데 뭐가 뭔지 모르겠어요. 목표 베이직 1단 스킨을 만든다. 기간 하루에 1 강의씩 진행할 경우 최대 7일 1. 기본 베이직 스킨으로 변경하기 블로그 설정 - 꾸미기 - 스킨변경 메뉴에서 Letter 스킨을 적용 합시다. 사용중인 스킨 - 편집을 눌러 편집 화면으로 이동 합시다. html 편집 버튼을 눌러 스킨 편집을 시작 합시다. 다른 스킨을 수정해도 상관없지만 가장 미니멀한 Letter 스킨을 커스텀 하면서 시작하겠습니다. 적용했으면, 상단의 사용중인 스킨에서 편집을 눌러 편집화면으로 이동합니다. 우측에 있는 html 편..