홈페이지 만들 때 특정 레이아웃의 내용을 변경하고 싶습니다.

안녕하세요.

싸이월드 블로그 운영하다가 싸이월드 블로그 폭파되고 방황하다가

기존 입맛에 맞는 곳을 찾다가 티스토리란 곳을 알게되어 다시 둥지를 틀어보려 하는데요.

경력사항은,

15년 전 쯤에 <table><td><tr> + 제로보드로 홈페이지 꾸며본 적이 있습니다. ;;;;;;;

요새는 추새가 <div> + css 조합이더군요.

각설하고, 어케어케 layout 은 만들었는데요.

[ sidebar] [ contents ]

왼쪽 sidebar layout 엔 카테고리가 들어가구요.

오른쪽 contents layout 엔 글 목록이나 글 내용이 들어갑니다.

즉, 아래와 같이 꾸미려 합니다. (옛날 홈페이지처럼....)

1. 홈페이지 최초 접근하면 contents 에 환영하는 이미지를 보여줌.

2. 왼쪽 카테고리를 선택하면 contents 에 해당 글목록이 나타남.

3. 글목록에서 특정 글을 선택하면 글목록이 사라지고 글 내용이 나타남.

15년 전엔 index.html, list.html, contents.html 등 파일로 나누어서 그 때마다 해당 파일을 불렀던 것으로 기억하는데,

티스토리를 보니 하나의 html 과 하나의 css 파일로 구성되어 있더라구요.

위와 같이 구성하려면 어떻게 해야할지 감이 안와서 문의드립니다.

아니면 검색어라도 알려주시면 구글링해서 찾아보겠습니다.

참고로, 아래는 초 허접한 홈페이지 <body> 부분 입니다.

<body>
  <div id="header">
   <img src="http://cfs.tistory.com/custom/blog/217/2176881/skin/images/top_home.jpg">
  </div> 

  <div id="sidebar">
   <s_sidebar_element>
    
   <div class="category">
    <br><br><br>
       [##_category_##]
   </div>
   </s_sidebar_element>
  </div> 

  <div id="contents">

   <h2 class="hidden">검색결과 리스트</h2>
   <s_list>
    <div id="searchList" class="wrap_search">
     <h3><strong class="txt_em">[##_list_conform_##]</strong>에 해당되는 글 <strong class="txt_em">[##_list_count_##]</strong>건</h3>
     <ul class="list_search">
      <s_list_rep>
       <li>
        <span class="date">[##_list_rep_regdate_##]</span>
        <a href="[##_list_rep_link_##]">[##_list_rep_title_##]</a>
        <span class="cnt">[##_list_rep_rp_cnt_##]</span>
       </li>
      </s_list_rep>
     </ul>
    </div>
   </s_list>

</div>

<div id="footer">
   <p align="center" valign="middle">FOOTER</p>
  </div>

</body>