[HTML/CSS] 티스토리 어떤 스킨에서도 사이드바 만들기! ①

사이트(홈페이지)나 티스토리에서 어떤 스킨을 사용하던 간에 사이드바를 만드는 방법에대해 알려드리겠습니다.

사이드바를 만들기 위해 기본적으로 HTML 과 CSS를 이용한다는 점을 미리 말씀드리겠습니다.

2017/11/15 - [기초] 티스토리 CSS 수정하기, 스킨 수정

두 개의 포스트로 내용을 구성할 계획입니다.

우선 첫 번째 포스팅에서는 홈페이지나 블로그의 구성요소 및 배치들을 생각해보겠습니다.

구성 요소 배치

<style>
  .mybox div{
    border:solid 1px black;
    padding:3px;
    height:auto;
  }
.homepage {
    width:100%;
  }
.mywrapper div {
    background-color:lightblue;
    text-align:center;
    margin:3px 1%;
    line-height:6em;

  }
  .mytopbar { /* 탑바 */
    background-color:lightblue;
    text-align:center;
    height : 50px;
    margin:3px 1%;
    line-height:3em;
  }

  /*여기서 부터 확인하셔도 됩니다. 위의 내용은 배경색, 텍스트 배치, 크기, 여백 등의 설정입니다.*/
  .mywrapper{
    width : 90%;
    margin: auto; /* 페이지의 가운데로 정렬하기 위함 */
    overflow:hidden; /*div의 height를 자식요소의 크기에 맞추기 위함*/
  }
  .idup1{ /* 콘텐츠 */
    float:left;
    width:70%;
  }
  .idup2{ /* 사이드바 */
    float:left;
    width:50px;
  }

  /*@media screen and (max-width:330px)
  /*브라우저 창이 일정 크기 이하일 때 사이드바를 안보이게 하고고 콘텐츠 크기를 키웁니다.
    이 코드에서는 브라우저창이 330px 이하일 때 콘텐츠의 width를 90%로 변경하고 가운데정렬, 사이드바의 display를 none으로 합니다.(안보이게)*/
  {
    .idup1{  /* 콘텐츠 */
      width:90%;
      margin: auto;
    }
    .idup2{ /* 사이드바 */
      display : none;
    }
  }*/
</style>
<div class="mybox">
  <div class="homepage">
    <div class="mytopbar"><!--탑바-->
      TopBar
    </div>
    <div class="mywrapper"> 
      <div class="idup1"><!--콘텐츠-->
        1
      </div>
      <div class="idup2"><!--사이드바-->
        2
      </div>
    </div>
  </div>
</div>

위의 코드의 결과를 확인해 보겠습니다.

아래를 윈도우 창이라고 생각해봅시다.

TopBar

1

2

코드는 반응형 기준으로 작성하였습니다.

1 이 콘텐츠 부분이고 2가 사이드바 부분입니다.

현재 제가 적용중인 스퀘어 스킨에서는 TopBar는 없습니다.

float:left; 로 div들을 한줄에 나타나게 하였습니다. 그리고 width로 퍼센트를 지정합니다.

mywrapper의 내부 요소들의 width의 합이 mywrapper의 width를 넘어가게 되면 우측의 div(2)가 아랫줄로 내려가는 현상이 발생합니다.

mywrapper의 width > 내부 요소들의 width의 합 + 내부 요소들의 좌우 margin의 합 + mywrapper의 좌우 padding의 합 

위의 규칙을 지켜주셔야 합니다.

사이드바와 콘텐츠의 width를 모두 %로 설정할 경우에 위의 규칙을 지켜주시면 됩니다.

하지만 사이드바의 width를 % 가 아닌 pixel로 지정할 때에는 @media 쿼리를 이용하여 일정 크기 이하일 때에는 사이드바가 안보이게 해주어야합니다.

pixel로 지정되면 사이드바의 width가 항상 일정하기 때문에 아랫줄로 내려갈 수 있기 때문입니다.

해당 부분은 위의 코드에서 주석으로 설명하였습니다.

다음 포스팅에서는 티스토리에서 이러한 사이드바를 적용하여 사이드바의 모듈까지 적용하는 방법을 알아보겠습니다.

2017/12/25 - [HTML/CSS] 티스토리 어떤 스킨에서도 사이드바 만들기! ②