사이드바 꾸미기 1. 프로필 영역 꾸미기

안녕하세요 별깡솔입니다 : )

별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다

사이드바 꾸미기

프로필 사진 부분은 대략 300 x 300px 이지만 사진이 매우 작게 보여집니다
그리고 사진에서 별, 솔 아래 ㄹ이 조금 잘려서 보이지 않습니다

프로필 사진이 140 x 140px 크기로 사진이 매우 작고 여백도 불필요하게 크게 잡혀있습니다

우선 프로필 사진 부분에 border-radius를 해제하니 잘렸던 부분이 보여집니다

( 제가 사용한 html과 css는 맨 아래 있습니다 )

블로그 설명 부분이 길어서 2줄로 된 부분을 한 줄로 바꿉니다

<!--<p class="text-profile">별깡솔 반려동물과 칵테일 그리고 티스토리</p>-->
text-profile 클래스를 찾아서 주석 처리하고 직접 블로그 설명을 적었습니다
( 삭제하여도 무방합니다 )

별 깡 솔 부분만 빤짝이는 네온 효과를 넣기 위해

span 태그로 한 글자씩 감싸고 나머지 부분도 span으로 감싸주었습니다
span 태그 class 이름은 개취입니다

블로그 설명을 직접 입력했음에도 여전히 두 줄로 나타나며
불필요한 공백까지 들어간 것으로 보입니다

font-size 값을 0으로 해서 공백을 없애줍니다
공백의 폰트 사이즈가 0이 되면서 공백이 없어졌지만
별깡솔반려동물과 부분이 붙어있어서 css로 조정이 필요합니다

블로그 설명 부분이 210px로 작게 세팅되어 있습니다
300px 크기로 사용하고 싶어서 width 값을 100%로 바꿔주었습니다

넓이 값을 조정해서 한 줄로 깔끔하게 정리되었습니다

별깡솔 부분은 letter-spacing: 0.1em;으로 간격을 살짝 벌려주었습니다

반려동물과 칵테일 그리고 티스토리 부분은 sgs-text-profile 클래스로
padding-left: 5px;
왼쪽 부분을 5px 만큼 공간을 차지하면서 간격이 벌어지게 했습니다

네온 효과

한 글자씩 반짝이는 네온 효과를 주었습니다

html

<p class="text-profile">
    <span class="sgs-name">별</span>
    <span class="sgs-name">깡</span>
    <span class="sgs-name">솔</span>
    <span class="sgs-text-profile">반려동물과 칵테일 그리고 티스토리</span>
</p>

css

.sgs-name { 
    animation: neonEffect 1.2s linear infinite;
    color: #333;
    font-size: 16px; 
    letter-spacing: 0.1em;}

@keyframes neonEffect {
    0%,
    100% {
        color: #fff;
        -webkit-filter-blur(2px);
        -ms-filter-blur(2px);
    }
    5%,
    95% {
        color: #333;
        -webkit-filter-blur(2px);
        -ms-filter-blur(2px);
         text-shadow: none;
    }
}
.sgs-name:nth-child(1){animation-delay:0.4s;}
.sgs-name:nth-child(2){animation-delay:0.8s;}
.sgs-name:nth-child(3){animation-delay:1.2s;}

animation: neonEffect 1.2s linear infinite; 부분에서
표현하고자 하는 글자 수에 따라 1.2s 부분을 조정해서 사용하면 됩니다

nth-child() 또한 글자 수만큼 생성해서 세팅한 값의 배수로 세팅합니다

수정하면서 확인하기에는 크롬 개발자 모드를 사용하시면 편합니다

SNS 추가하기

블로그 설명 부분 바로 아래에 공백을 확인해보니 sns 부분이 있었습니다

스킨 편집 부분에 들어가서 임의적으로 주소 값을 세팅하면 sns 모양이 나타납니다
주소 값을 입력하면 비어있던 html 부분이 채워졌습니다

https 앞에 //가 있어서 잘못 입력한줄 알았습니다
<a href="//" class="link-sns link-facebook">

www. 이하에 해당하는 값 부터 입력받게 세팅되어 있습니다

<div class="box-sns"></div> 부분을 통째로 주석 처리하고 직접 만들기로 했습니다

https://xpressengine.github.io/XEIcon/library-2.3.3.html

무료 웹 폰트 주소 - 사용법은 검색을 통해 쉽게 알 수 있습니다
( 헤더와 헤더 사이에 CDN을 넣고 원하는 폰트 출력 )

LIBRARY 2.3.3에서 브랜드 카테고리로 가면 많은 아이콘들이 있습니다

sns-box에 i 클래스를 넣어서 잘 출력되는지 확인합니다

a 링크로 폰트를 감싸주고 새 창에서 열리게 타겟을 넣었습니다

SNS 애니메이션

마우스 포인터를 아이콘에 올리면 색상과 빙글 돌게 효과를 추가했습니다

사용한 전체 html, css를 첨부합니다

<!--<p class="text-profile">별깡솔 반려동물과 칵테일 그리고
티스토리</p>-->
<p class="text-profile">
    <span class="sgs-name">별</span>
    <span class="sgs-name">깡</span>
    <span class="sgs-name">솔</span>
    <span class="sgs-text-profile">반려동물과 칵테일 그리고 티스토리</span>
</p>
<!--<div class="box-sns">내용 생략</div>-->
<div class="sgs-sns-box">
    <a href="https://www.facebook.com" target="_blank"><i class="xi-facebook"></i></a>
    <a href="https://www.instagram.com" target="_blank"><i class="xi-instagram"></i></a>
    <a href="https://www.youtube.com" target="_blank"><i class="xi-youtube-play"></i></a>
    <a href="https://www.naver.com" target="_blank"><i class="xi-naver"></i></a>
    <a href="https://business.kakao.com/info/kakaotalkchannel/" target="_blank"><i class="xi-kakaotalk"></i></a>
    <a href="https://story.kakao.com/" target="_blank"><i class="xi-kakaostory"></i></a>
</div>

/* box profile */

.box-profile .img-profile {
    width: 100%; 
    height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 10px;}

.box-profile .text-profile {
    font-size: 0;
    max-width: 100%;
    margin: 10px auto;}
    
.box-profile .text-profile span {font-size: 14px;}

.box-profile .text-profile span.sgs-name { 
    animation: neonEffect 1.2s linear infinite;
    color: #333;
    font-size: 16px; 
    letter-spacing: 0.1em;}
    
@keyframes neonEffect {
    0%,
    100% {
        color: #fff;
        -webkit-filter-blur(2px);
        -ms-filter-blur(2px);
    }
    5%,
    95% {
        color: #333;
        -webkit-filter-blur(2px);
        -ms-filter-blur(2px);
        text-shadow: none;
    }
}
.area-aside .box-profile .text-profile span.sgs-name:nth-child(1){animation-delay:0.4s;}
.area-aside .box-profile .text-profile span.sgs-name:nth-child(2){animation-delay:0.8s;}
.area-aside .box-profile .text-profile span.sgs-name:nth-child(3){animation-delay:1.2s;}

.area-aside .box-profile .text-profile span.sgs-text-profile {padding-left: 5px;}

/* sns box */
.box-profile .sgs-sns-box {
    margin: 10px auto;
    font-size: 0;
}
.box-profile .sgs-sns-box a {
    font-size: 22px;
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    margin: 0 5px;
    position: relative;
    overflow: hidden;
}
.box-profile .sgs-sns-box a i {
    color: #000;
    font-size: 22px;
    transition: 0.5s;
}
.box-profile .sgs-sns-box a:nth-child(1) i {color: #3b5999;}
.box-profile .sgs-sns-box a:nth-child(2) i {color: #e4405f;}
.box-profile .sgs-sns-box a:nth-child(3) i {color: #cd201f;font-size: 24px;}
.box-profile .sgs-sns-box a:nth-child(4) i {color: #0fc444;}
.box-profile .sgs-sns-box a:nth-child(5) i {color: #ffe000;font-size: 24px;}
.box-profile .sgs-sns-box a:nth-child(6) i {color: #fecd07;}

.box-profile .sgs-sns-box a:hover i {
    transform: rotateY(360deg);
    color: #fff;
}
.box-profile .sgs-sns-box a:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 0;
    transition: 0.5s;
}
.box-profile .sgs-sns-box a:hover:before {
    height: 30px;
}
.box-profile .sgs-sns-box a:nth-child(1):before {background-color: #3b5999;}
.box-profile .sgs-sns-box a:nth-child(2):before {background-color: #e4405f;}
.box-profile .sgs-sns-box a:nth-child(3):before {background-color: #cd201f;}
.box-profile .sgs-sns-box a:nth-child(4):before {background-color: #0fc444;}
.box-profile .sgs-sns-box a:nth-child(5):before {background-color: #ffe000;}
.box-profile .sgs-sns-box a:nth-child(6):before {background-color: #fecd07;}

별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사합니다

구독과 좋아요 : )

다음 글 예고 - 사이드바 꾸미기 2. 카테고리 영역 꾸미기