Section 11-2 - 티스토리 반응형 스킨 만들기 - 글 관련 정보

이번 섹션은
저번 Section 11-1 - 티스토리 반응형 스킨 만들기 - 글 영역 지정 후 그 안에 글 관련 정보를 출력하는 코드를 다룹니다.

글 관련 정보란 해당 글의 "카테고리", "제목", "작성자", "작성일" 을 나타냅니다.
우리는 관리자 로그인 시 보이는 "글 수정", "글 공개/비공개", "글 삭제" 의 버튼까지 출력하겠습니다.

STEP 1. skin.html 글 관련 정보 코드 넣기

• h1 id="articleBody" 은 글 본문 영역의 시작을 알리는 제목입니다. class="sr-only"를 넣어서 화면에서 보이지는 않습니다. 하지만 이것은 시각적으로 웹을 검색하기 어려우신 분들을 위한 "스크린리더(웹을 읽어주죠)"가 구조를 인식하도록 도와주고, 웹 검색 엔진에서도 잘 걸리도록 시멘틱코딩을 한것입니다.
  • ※ 모든 사람이 차별없이 이용할 수 있도록 넣어주는게 정석이라고 생각됩니다.
  • ※ 또 다른 이유로는 글 내용이 길어서 스크롤을 아래쪽으로 많이 내렸을때 본문시작까지 스크롤을 올려주는 버튼(또는 링크)를 만들어 h1 아이디로 네임태그를 달 수 있도록 하는 기능적인 측면도 존재합니다.
  • - 결론은 있으면 좋겠네요.
• Section 11-2 - 티스토리 반응형 스킨 만들기 - 글 관련 정보은 글 제목을 출력해주는 치환자입니다.
• 티스토리 스킨만들기/Tistory One는 해당 글이 속해 있는 카테고리 정보를 출력해줍니다.
• nOo9ya는 작성자, 2017. 10. 17. 20:20는 작성일을 출력해줍니다.
• 위의 치환자들은 <s_permalink_article_rep>영역안에서 여러번 쓸 수 있습니다.

• <s_ad_div></s_ad_div>는 블로그 관리자가 로그인시에만 보이는 메뉴를 구성하는 영역입니다.
• <li><a href="" class="modify">수정</a></li>
  • - 는 해당 글을 수정하는 화면으로 이동시켜주는 링크 주소입니다.
  • - <a href="" class="modify" target="_blank"> 뒤에 target="_blank"를 넣으면 새창에서 수정화면이 열립니다.
• <a href="#" onclick="" class="state"></a>
  • - 글 공개/비공개 상태 변경 링크입니다.
  • - href말고 onclick에다가 넣어서 스크립트로 동작시키는 겁니다.
  • - 출력 텍스트는 과 두가지로 출력할 수 있습니다.
  • - 은 글이 공개 상태이면 "공개" / 글이 비공개 상태이면 "비공개"로 출력됩니다.
  • - 은 글이 공개 상태이면 "비공개로 변경합니다" / 글이 비공개 상태이면 "공개로 변경합니다"로 출력됩니다.
• <a href="#" onclick="" class="delete">삭제</a>
  • - 관리자 메뉴로 접근하지 않고 글 상세보기 상태에서 "글 삭제"를 할 수 있는 버튼입니다.(삭제시에만 누르세요.)

STEP 2. style.css 코드 추가

/* Article Header */
.article-header {margin-bottom:10px; background:#fff; border:1px solid #ddd}
.article-header:after {display:block; clear:both; content:''}
.article-header .title-wrap {padding:20px}
.article-header .title-wrap .category-info a {color:#ff8149}
.article-header .title-wrap .article-title {font-size:2em; color:#3d3d3d; line-height:1}
.article-header .info-wrap {margin-top:10px; padding:10px 20px; background:#1d1d1d}
.article-header .info-wrap:after {display:block; clear:both; content:''}
.article-header .info-wrap .article-info {float:left}
.article-header .info-wrap .article-info li {margin-right:15px}
.article-header .info-wrap .article-control {float:right}
.article-header .info-wrap .article-control li {margin-left:15px}
.article-header .info-wrap ul {}
.article-header .info-wrap ul:after {display:block; clear:both; content:''}
.article-header .info-wrap ul li {float:left; font-size:0.875em; color:#bbb}
.article-header .info-wrap ul li i {margin-right:4px; color:#eee}
.article-header .info-wrap ul li a {color:#bbb}

머리로만 디자인을 하느라 코드가 엄청 늘어난감이 있지만 참고만 하시면 되므로 그냥 올립니다.

STEP 3. 확인하기

위 css코드만 추가하면 아래와같이 완성!!

참 쉽죠?!

다음 글 상세 내용은 더 쉽습니다~