[티스토리] 글 영역 꾸미기 HTML/CSS 배우기

티스토리 글 영역 꾸미기

지난 포스팅에서 카테고리에 대하여 하였습니다.

이번에는 티스토리 글 영역 화면을 꾸며보도록 하겠습니다. 즉, 게시글 보기 화면 꾸미기 입니다.

HTML/CSS 학습

먼저 HTML영역 부터 알아보도록 하겠습니다.

사실 티스토리 스킨제작에서 HTML 영역은 크게 설명 드릴 부분이 없습니다. 단, HTML영역을 이해하기 위해서는 치환자에 대하여 정확한 개념을 가지고 있어야 합니다.

치환자란 티스토리에서 제공하여 주는 기능으로, 각 영역과 내용을 뿌려주는 태그들을 말합니다.

예를 들어 카테고리에서 글을 클릭했다라고 생각해 봅시다. 그러면 해당 글의 보기화면으로 이동하게 될 것입니다.

이 때 글 보기 화면에서 보여 줄 내용들의 영역과, 그 영역안에는 제목, 작성 시간, 내용 등이 들어 갈 것인데 이것들을 가지고 있는 태그들을 말합니다.

※ <글보기 화면 코딩 영역 시작> </글보기 화면 코딩영역 끝>

HTML 코딩 적용

<s_article_rep> 태그 안에 넣어 주시면 됩니다.

예전에 포스팅 했던 HTML 내용과 동일합니다. 단 우측으로 정렬하기 위하여 아래 두 라인의 순서가 변경 되었습니다.

<div class="date">2017. 10. 2. 12:00</div>
<div class="category"><a href="/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/HTML%2C%20CSS%2C%20JavaScript">프로그래밍/HTML, CSS, JavaScript</a> </div>

<s_permalink_article_rep>
<div class="entry">
    <div class="titleWrap">
      <h2><a href="/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EA%B8%80-%EC%98%81%EC%97%AD-%EA%BE%B8%EB%AF%B8%EA%B8%B0-HTMLCSS-%EB%B0%B0%EC%9A%B0%EA%B8%B0">[티스토리] 글 영역 꾸미기 HTML/CSS 배우기</a></h2>
      <div class="date">2017. 10. 2. 12:00</div>
      <div class="category"><a href="/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/HTML%2C%20CSS%2C%20JavaScript">프로그래밍/HTML, CSS, JavaScript</a> </div>
      
      </div>
      <div class="article">

티스토리 글 영역 꾸미기

지난 포스팅에서 카테고리에 대하여 하였습니다.

이번에는 티스토리 글 영역 화면을 꾸며보도록 하겠습니다. 즉, 게시글 보기 화면 꾸미기 입니다.

HTML/CSS 학습

먼저 HTML영역 부터 알아보도록 하겠습니다.

치환자란 티스토리에서 제공하여 주는 기능으로, 각 영역과 내용을 뿌려주는 태그들을 말합니다.

예를 들어 카테고리에서 글을 클릭했다라고 생각해 봅시다. 그러면 해당 글의 보기화면으로 이동하게 될 것입니다.

※ <글보기 화면 코딩 영역 시작> </글보기 화면 코딩영역 끝>

HTML 코딩 적용

<s_article_rep> 태그 안에 넣어 주시면 됩니다.

예전에 포스팅 했던 HTML 내용과 동일합니다. 단 우측으로 정렬하기 위하여 아래 두 라인의 순서가 변경 되었습니다.

<s_permalink_article_rep>
<div class="entry">
    <div class="titleWrap">
      <h2><a href=""></a></h2>
      <div class="date"></div>
      <div class="category"><a href=""></a> </div>
      
      </div>
      <div class="article">

      </div>
      <s_tag_label>
        <div class="tagTrail">
          <span class="tagText">TAG </span>
        </div>
      </s_tag_label>
      <div class="actionTrail">
        <a href="#tb" onclick="">
          <s_tb_count>
            트랙백 <span class="cnt"></span>개
          </s_tb_count>
        </a>
        ,
        <a href="#rp" onclick="">
          <s_rp_count>
            댓글 <span class="cnt"></span>개가 달렸습니다.
          </s_rp_count>
        </a>
      </div>
      <s_tb>
        <div class="trackback">
        <h3>Trackback Address :: </h3>
        <s_tb_container>
          <ol>
            <s_tb_rep>
              <li id="">
              <h4>Subject: <a href="" onclick="window.open(this.href); return false" rel="external nofollow"></a></h4>
              <span class="from">Tracked from <span class="name"> </span> </span>
              <span class="date"></span>
              <a href="#" onclick="; return false" class="delete"> <span>삭제</span></a>
              <p></p>
            </li>
          </s_tb_rep>
          </ol>
        </s_tb_container>
      </div>
    </s_tb>
  </div>

</s_permalink_article_rep>

이제 CSS 코딩 부분을 살펴보도록 하겠습니다.

사실 이전 포스팅 상단 가로 메뉴 만들기를 보신 분들은 대부분 알고 있는 내용 일 것입니다.

대부분 텍스트 꾸미기 부분입니다.

text-decoration:none; 링크 글의 밑줄 없애기 color:#666; 글 폰트 색상 지정 font-size:15px 글자 크기 지정 font-family 글자체 지정 부분입니다

/*글 영역*/
.titleWrap h2 {text-align:center; padding-bottom:20px; border-bottom:1px solid #efefef;}
.titleWrap a {text-decoration:none; color:#666; font-size:25px; font-weight:700; font-family:"Noto Sans KR", sans-serif;}
.titleWrap .category a {text-decoration:none; color:#666; font-size:15px; font-weight:600; font-family:"Noto Sans KR", sans-serif;}
.titleWrap .category {float:right; padding-right:10px;}
.titleWrap .date {float:right; color:#666; font-size:15px; font-weight:600; font-family:"Noto Sans KR", sans-serif;}
.admin a {text-decoration:none; color:#666; font-size:15px; font-weight:500; font-family:"Noto Sans KR", sans-serif;}
.article{position:relative; width:100%; margin-top:50px;}

특별하게 설명이 필요없는 글 화면 꾸미기 부분 이기에 그래도 어떤 부분을 설명을 더 해볼까 생각하다가 div에서 float 정렬 기능에 대하여 잠시 설명을 드리고자 합니다.

앞서 위에서 우측 정령을 위해서

순서를 변경 했다라고 했습니다.

이유는 float:right 태그를 이용하여 우측 정렬을 모두 합니다. 그런데 date class 가 코딩에서 먼저 나와야 category보다 우측에 정렬이 되기 때문입니다. 즉 float:right 로 설정을 하면 먼저 나온 순서되로 정령이 이루어 진다는 것입니다. 소소한 부분이지만 혹, 모르시는 분들을 위해 적어 봅니다.

그리하여 만들어진 캡쳐 화면은 아래와 같습니다.

트래백 부분과 댓글 부분은 꾸미지를 않았네요. 디자인 감각이 없어서 조금 서툴어 보이기도 하네요.

점점 업그레이드 해 가보도록 하겠습니다.

티스토리글 화면

이제 조금씩 블로그 형태가 가추어 가고 있는 것 같습니다. 아직 해야 될 부분들이 많이 남았지만요.

느리지만 한걸음 한걸음 걸어가다 보면 곧 끝이라는 글자를 보게 되겠죠. 그 끝이 곧 다시 시작이 되겠지만요 그러나, 한 단계 높은 곳에서 출발하는 시작이 될 것입니다.

</div>
      <s_tag_label>
        <div class="tagTrail">
          <span class="tagText">TAG </span>
        </div>
      </s_tag_label>
      <div class="actionTrail">
        <a href="#tb" onclick="">
          <s_tb_count>
            트랙백 <span class="cnt"></span>개
          </s_tb_count>
        </a>
        ,
        <a href="#rp" onclick="">
          <s_rp_count>
            댓글 <span class="cnt">0</span>개가 달렸습니다.
          </s_rp_count>
        </a>
      </div>
      <s_tb>
        <div class="trackback">
        <h3>Trackback Address :: </h3>
        <s_tb_container>
          <ol>
            <s_tb_rep>
              <li id="">
              <h4>Subject: <a href="" onclick="window.open(this.href); return false" rel="external nofollow"></a></h4>
              <span class="from">Tracked from <span class="name"> </span> </span>
              <span class="date"></span>
              <a href="#" onclick="; return false" class="delete"> <span>삭제</span></a>
              <p></p>
            </li>
          </s_tb_rep>
          </ol>
        </s_tb_container>
      </div>
    </s_tb>
  </div>