Css코드를 사용해 페이지를 꾸몄던 경험

한 때 많이 봤던 트위치라는 스트리밍 플랫폼에는 트게더라는 커뮤니티 사이트가 있었다.

직접 CSS 코드를 통해서 배경 색, 카테고리, 마우스 포인터 모양 등등 페이지를 원하는 대로 꾸밀 수 있었다.

그 당시의 나는 CSS를 공부하진 않았지만 어떤 분이 트게더에 자주 쓰는 코드를 템플릿화 시킨 사이트를 이용해

사이트를 예쁘게 꾸몄던 기억이 있다.

 

https://jsfiddle.net/intelyshoen/v08z9y53/

tgd custom - JSFiddle - Code Playground

내가 찾은 색이 바로 적용되고 글씨체가 적용되는 것을 보면서 재미를 느꼈었다.

그래서 위의 사이트에서 복사한 css 말고도 더 추가하고 싶어 여러 커뮤니티에서 정보를 찾아

눈 내리는 배경효과, 하트가 두근거리는 효과, 글씨체 변경 등을 적용했었다.

 

이것도 하나의 프론트엔드의 작은 경험이라고 생각한다

@font-face { font-family: 'BinggraeMelona-Bold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BinggraeMelona-Bold.woff') format('woff'); font-weight: normal; font-style: normal; }
*{font-family:'BinggraeMelona-Bold'} 

body {
 background: linear-gradient(to bottom, #fdc3ce, #FFFFFF);
  height: auto !important;
letter-spacing: -0.05em !important;
  background: transparent;
  font-family: 'BinggraeMelona-Bold';
}

/* 전체 쉐도우 */

header #header-bar>.row,
#main .menu-wrapper,
#main #main-content>div.frame {
  box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.2);
}

/* 로고밑 NAV bar */

header #header-bar>.row {
  border-top: 4px solid #ff5071;
  border-right: none;
  border-bottom: none;
}

/* 검색폼 보더 */

header #right-search-form>input[type='text'] {
  border: 3px solid #cae3ff;
}

/* 트게더 전체메뉴 / 유용한링크 / 트위치 스케쥴 */

#main .menu-wrapper>.header {
  background: #ff5071;
}

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  color: white;
}

.fa-square:before {
  color: #ff5071;
}

header #header-bar>.row,
#main .menu-wrapper,
#main #main-content>div.frame {
  border-right: none;
  border-bottom: none;
}

#main .menu-wrapper {
  border: none;
}

/* 헤더 검색 버튼 */

header #right-search-form>#right-search-btn {
  color: #cae3ff;
}

/* 헤더 [광고]배경색 */

header #header-bar #header-top-notice strong.notice-badge {
  background: #ff5071;
}

/* fa색상 */

header #header-bar .fa {
  color: #cae3ff;
}

/* 스트리머 게시판 상단 정보 글씨색상 */

#board-info #board-info-bottom a {
  color: #ff5071;
}

/* 좌측메뉴 숏컷링크 글씨 색상 */

#main .menu-wrapper>a>em {
  color: #ff5071;
}

/* 좌측메뉴 메뉴사이의 공간 색상 */

#main .menu-wrapper .spacer {
  background: #ff5071;
  height: 0.15em;
}

/* 게시글 관련부분 */

#article-list>.article-list-row>.item>.list-title>.list-writer>span {
  width: 120px !important;
}

#article-list #article-list-category {
  border-top: 2px solid #ff5071;
  background: white;
}

#article-list #article-list-category>a {
  background: white;
}

#article-list>.article-list-row>.item>.list-header>span {
  background-color: #ff5071;
}

#article-list>.article-list-row>.item>.list-title>small.comment-count {
  color: #ff5071;
}

#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span {
  color: #ff5071;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  background-color: #ff5071;
  border-color: #ff5071;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
  color: #ff5071;
}

.pagination>li>a,
.pagination>li>span {
  color: #ff5071;
}

#article-content-wrapper>.header {
  border-top: 2px solid #ff5071;
}

#article-reply-area #reply-real-area .reply>.reply-header>.reply-writer.logged,
#article-reply-area #reply-best-area .reply>.reply-header>.reply-writer.logged {
  color: #ff5071;
}

#article-info>h2 {
  font-weight: bold;
}

#article-info>h2>span.category {
  color: #ff5071 !important;
}

#article-reply-area>.header h5 {
  color: #ff5071;
}

#main .menu-wrapper>a {
  padding: 0.5em 1.4em 0.5em 0.7em !important;
}

a {
  color: #ff5071;
}

span.a-badge i.fa.fa-info-circle {
  color: #ff5071;
}

/* footer */

#article-list>.article-list-row {
  border-right: none;
}

#article-list #article-list-menu {
  box-sizing: border-box;
  width: unset;
  margin: 20px;
}

#article-list #boardSearchForm {
  padding-bottom: 20px;
  height: unset;
}

.btn-primary {
  background: #cae3ff !important;
}

html {

   background: linear-gradient(to bottom, #fdc3ce, #FFFFFF);

  height: auto !important;

}

body {

background: transparent;

animation: snow 20s linear infinite;

/*백그라운드 이미지 원근감느낌 이미지*/

background-image:url('https://cdn.discordapp.com/attachments/460145928850898945/515694458633846831/snow.png'), url("https://cdn.discordapp.com/attachments/460145928850898945/515694460668084274/snow3.png"), url("https://cdn.discordapp.com/attachments/460145928850898945/515694462278828073/snow2.png");

}
/*뒷배경 움직이는 애니메이션*/

@keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}

}
small.favo i.fa.fa-heart {

    animation: heartbeat 1s infinite;

}



@keyframes heartbeat {

    0% {transform: scale(1);}

    30% {transform: scale(1.25);}

    42% {transform: scale(0.9);}

    60% {transform: scale(1.15);}

    85% {transform: scale(0.95);}

    100% {transform: scale(1);}

}

#article-list>.article-list-row>.item>.list-title>small.favo  {

 color: #FA5858;
}

#article-list>.article-list-row:hover {

    transform: scale(1.03); /* 크기가 커짐 */

    transition: .20s; /* 0.2초에 걸쳐서 부드럽게 애니메이션이 진행 */

}
#board-info #board-info-profile-img {

    float: left !important;

    margin-right: 5px;

}
header #header-bar>.row, #main .menu-wrapper, #main #main-content>div.frame {

    border-radius: 10px;

}



#main .menu-wrapper>.header {

    border-radius: 10px 10px 0 0;

}
#board-info #viewers-area #viewers:before {

    content: "달달한 솜사탕  ";    

    cursor: text;

}
#board-info #viewers-area #viewers:after {

    content: "개가 만들어지고 있어요!";    /* 숫자 뒤에 들어갈 문구 */

        /* ex) content: "명 접속중"; */

        /* 출력시 : n명 접속중 */

    cursor: text;

}
#board-info #viewers-area {

    color: #EDAAB3; /* 접속자 수 글씨 색 */

}