7. 티스토리 스킨 만들기 블로그 정보

오늘은 사이드바의 요소중 하나인 블로그 정보 부분을 수정 해보겠습니다.

먼저, 6. 티스토리 스킨 만들기 사이드바 영역에서만든 사이드바 부분에서 블로그 정보 부분만 따로 빼왔습니다!

이렇게 사이드바에 블로그 정보 부분만 떼서 사용하겠습니다.

      <s_sidebar_element>

      <!-- 블로그 정보 -->

      <div class="blogImage">

        <div class="blogImage"> </div>

        <div class="blogDesc">HTML, CSS, Javascript, PHP 등 웹 프로그래밍을 다루는 블로그입니다.<br/><span class="userID">Kurien</span></div>

      </div>

      </s_sidebar_element>

먼저 태그의 ##_desc_##와 <span class="userID"> 사이에 <br/>하나를 추가해줍니다.

이걸 해주지 않으면 설명에 붙어서 블로거명이 나와버립니다.

이게 현재 상태인데요, 다음으로 위의 태그와 이미지를 보시면 아시겠지만

[ ##_blog_image_##]은 이미지 부분, [ ##_desc_##]는 블로그 설명, Kurien부분은 블로거의 아이디입니다.

이 부분은 관리페이지의 기본 정보의 설정을 바꾸시면 바뀝니다.

현재 이렇게 Style이 적용되지 않은 상태이니, 이 부분에 CSS를 수정해서 Style을 적용해봅시다.

.blogImage {margin-bottom:10px;}

.blogImage img {width:180px;border:5px solid #fff;border-radius:10px;}

.blogImage .userID{font-weight:bolder;}

먼저 제가 적용한 스타일은 위의 3줄입니다.

차근차근 살펴보겠습니다.

.blogImage {margin-bottom:10px;}

이 부분의 경우 blogImage 클래스를 나타냅니다.

현재 blogImage 클래스를 가진 태그가 두 부분이 있습니다.

      <s_sidebar_element> 

      <!-- 블로그 정보 -->

      <div class="blogImage">

        <div class="blogImage"> </div>

        <div class="blogDesc">HTML, CSS, Javascript, PHP 등 웹 프로그래밍을 다루는 블로그입니다.<br/><span class="userID">Kurien</span></div>

      </div>

      </s_sidebar_element>

이 두개의 .blogImage의 하단에 10px만큼의 공백을 만드는건데요.

.blogImage 클래스를 가진 두 부분에 모두 적용되므로 이미지처럼 공백이 생기게 됩니다.

다음은 두번째 줄이네요.

.blogImage img {width:180px;border:5px solid #fff;border-radius:10px;}

이 부분은 위에서 나왔던 blogImage 클래스 안에 있는 img 태그를 선택해서 속성을 적용해줍니다.

그런데 img 태그가 어디있냐구요?

직접 적을때는 보이지 않지만 이미지에 나온부분에는 img 태그가 있죠?

이 부분이 바로 [ ##_blog_image_##] 치환자가 적용 된 후의 태그입니다.

그러니 img 선택자를 사용하셔도 적용이 되는거죠.

이 img 태그의 width(넓이):를 180px로 했고, 선은 5px에 실선, 흰색으로 했구요.

border-radius를 사용해서 모서리를 둥글게 했습니다.

이제 마지막줄이네요.

.blogImage .userID{font-weight:bolder;}

blogImage 클래스의 userID 클래스에 있는 폰트에 bolder 속성을 줘서 굵게 표시해줍니다.

userID 부분에는 블로거명이 있기 때문에 블로거명이 굵게 표시됩니다.

뭐 디자인이야 포기한지 오래니 이 정도로 만족해야죠. ㅠㅠ

어짜피 다 만들고 다시 한번 뜯어 고칠 생각입니다.

수정하는 방법정도만 알려드리니, 따라해보세요~

궁금한점은 댓글에 남겨주세요^^