티스토리, 사이드 메뉴 만들기 (html, css, js)

저번에 이어서 왼쪽 사이드 메뉴를 만들어 봅시다.

 

왼쪽 사이드 메뉴에는 기본적으로 블로거에 대한 정보를 보여줄 예정입니다.

 

• 블로거 이름
• 블로거 사진
• 블로거 SNS 등의 contact 할 수 있는 정보
• copyright (보통은 footer에 넣지만, 눈에 잘 안띄어서...ㅎㅎ)

기본 틀 구성

<!-- main - left side menu -->
<aside class="left_side">

    <!-- 자기 소개 -->
    <section class="about_me_section">
        <h3>About Me</h3>
        
        <div class="blogger_img_wrap">
            <img src="https://tistory1.daumcdn.net/tistory/2851713/attach/cd7dd1409ab94733b87ede0eff30b6ca" alt="블로거 대표 이미지" />
            <div><span>Hongku</span></div>
        </div>
        
        <p class="blog_desc">IT 관련 내용 정리 및 취미 생활</p>
        
        <div class="about_me_info">
            <p>addr</p>
            <p>email</p>
            <button>google</button>
            <button>facebook</button>
            <button>instagram</button>
            <button>git</button>
        </div>
        
        <div class="copyright">
            <p>Copyright 2019. Hongku’s Blog. All rights reserved.</p>
            <p>Designed by Hongku.</p>
        </div>
    </section>

</aside>

왼쪽 사이드 메뉴

 

일단 출력하고 싶은 정보는 모두 작성했으니, CSS를 혀서 예쁘게 만들어 봅시다.

 

블로거 이미지 스타일 입히기

블로거의 이미지는 radius를 줘서 둥글게 만들려고합니다.

 

그리고 이미지를 클릭했을 때, 블로거의 이름이 나오도록 만들 예정입니다.

(이미지 다듬으면서 기타 다른 요소도 같이 수정하겠습니다)

 

CSS

/* white theme - main - left side menu */
.th_white_theme aside.left_side section h3 {
    border-bottom: 2px solid #495057;
    color: #495057;
}
.th_white_theme aside.left_side section.about_me_section .blogger_img_wrap div {
    color: #ffffff;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(255, 0, 0, 0.5));
}

/* main - left side menu */
aside.left_side section h3 {
    font-size: 1em;
    padding: .5em;
}
aside.left_side section.about_me_section .blogger_img_wrap {
    position: relative;
    cursor: pointer;
}
aside.left_side section.about_me_section .blogger_img_wrap img {
    display: block;
    width: 100%;
    border-radius: 100%;
}
aside.left_side section.about_me_section .blogger_img_wrap div {
    display: none; /* 처음에는 보이지 않다가 클릭했을때 이름이 보이도록 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
aside.left_side section.about_me_section .blogger_img_wrap div span {
    font-size: 1.25em;
    position: absolute;
    /* 가로 세로 중앙 정렬 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 

Javascript (jQuery)

.fadeToggle() 함수로 보였다가 안보였다가 토글 기능을 넣어줍니다.

<!-- Javascript -->
<script type="text/javascript" src="./images/jquery-3.4.1.min.js"></script> <!-- jQuery -->
<script>
    function toggleBloggerImage() {
        $(".blogger_img_wrap div").fadeToggle("fast");
    }
</script>

 

그리고, html 코드에 onclick 속성으로 방금 만든 toggleBloggerImage() 함수를 호출합니다.

<div class="blogger_img_wrap" onclick="toggleBloggerImage()">
    <img src="https://tistory1.daumcdn.net/tistory/2851713/attach/cd7dd1409ab94733b87ede0eff30b6ca" alt="블로거 대표 이미지" />
    <div><span>Hongku</span></div>
</div>

 

블로그 이미지 (클릭 전 / 클릭 후)

 

나머지는 특별한 것이 없으니 빠르게 만들어봅시다.

 

CSS

SNS 버튼 색상은 아래와 같습니다.

• google: #df4b37
• facebook: #3b5998
• pinterest: #cd2029
• github: #24292e

 

색상 CSS

/* white theme - main - left side menu */
.th_white_theme aside.left_side section.about_me_section .about_me_info p {
    color: #495057;
}
.th_white_theme aside.left_side section.about_me_section .about_me_info button {
    color: #ffffff;
}
.th_white_theme aside.left_side section.about_me_section .about_me_info button.facebook_btn {
    /* facebook button */
    background-color: #3b5998;
}
.th_white_theme aside.left_side section.about_me_section .about_me_info button.google_btn {
    /* google button */
    background-color: #df4b37;
}
.th_white_theme aside.left_side section.about_me_section .about_me_info button.pinterest_btn {
    /* pinterest button */
    background-color: #cd2029;
}
.th_white_theme aside.left_side section.about_me_section .about_me_info button.git_btn {
    /* git button */
    background-color: #24292e;
}
.th_white_theme aside.left_side section.about_me_section .copyright {
    color: #868e96;
}

 

구조 CSS

/* main - left side menu */
aside.left_side section {
}
aside.left_side section.about_me_section .blog_desc {
    line-height: 1.75em;
    font-size: 0.8em;
    text-align: center;
}
aside.left_side section.about_me_section .about_me_info {
    font-size: 0.8em;
}
aside.left_side section.about_me_section .about_me_info p {
    display: flex;
    align-items: center;
}
aside.left_side section.about_me_section .about_me_info p i {
    margin-right: 5px;
}
aside.left_side section.about_me_section .about_me_info button {
    display: block;
    margin: .5em 0;
    padding: 1em;
    width: 100%;
}
aside.left_side section.about_me_section .copyright {
    line-height: 1.75em;
    font-size: 0.75em;
}

 

Html

<!-- About me -->
<section class="about_me_section">
    <h3>About Me</h3>
    <div class="blogger_img_wrap" onclick="toggleBloggerImage()">
        <img src="https://tistory1.daumcdn.net/tistory/2851713/attach/cd7dd1409ab94733b87ede0eff30b6ca" alt="블로거 대표 이미지" />
        <div><span>Hongku</span></div>
    </div>

    <p class="blog_desc">IT 관련 내용 정리 및 취미 생활</p>

    <div class="about_me_info">
        <p><i class="material-icons">home</i> Republic of Korea</p>
        <p><i class="material-icons">email</i> example@naver.com</p>
        <button type="button" class="facebook_btn">Facebook</button>
        <button type="button" class="google_btn">Google</button>
        <button type="button" class="pinterest_btn">Pinterest</button>
        <button type="button" class="git_btn">Git</button>
    </div>

    <div class="copyright">
        <p>Copyright 2019. Hongku’s Blog. All rights reserved.</p>
        <p>Designed by Hongku.</p>
    </div>
</section>

 

왼쪽 사이드 메뉴 완성본

 

관련 글

2019/08/24 - [Tistory Skin/작업 Log] - 티스토리 네비게이션 바(Navigation Bar) 만들기 (html, css, js)

티스토리 네비게이션 바(Navigation Bar) 만들기 (html, css, js)

2019/08/24 - [Tistory Skin/작업 Log] - 티스토리, 메인 컨텐츠 영역 및 레이아웃 만들기 (html, css, js)

티스토리, 메인 컨텐츠 영역 및 레이아웃 만들기 (html, css, js)