무무키의 개발일지
Css코드를 사용해 페이지를 꾸몄던 경험 본문
한 때 많이 봤던 트위치라는 스트리밍 플랫폼에는 트게더라는 커뮤니티 사이트가 있었다.
직접 CSS 코드를 통해서 배경 색, 카테고리, 마우스 포인터 모양 등등 페이지를 원하는 대로 꾸밀 수 있었다.
그 당시의 나는 CSS를 공부하진 않았지만 어떤 분이 트게더에 자주 쓰는 코드를 템플릿화 시킨 사이트를 이용해
사이트를 예쁘게 꾸몄던 기억이 있다.
https://jsfiddle.net/intelyshoen/v08z9y53/
tgd custom - JSFiddle - Code Playground
jsfiddle.net
내가 찾은 색이 바로 적용되고 글씨체가 적용되는 것을 보면서 재미를 느꼈었다.
그래서 위의 사이트에서 복사한 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; /* 접속자 수 글씨 색 */
}
'일기 > 개발 일기' 카테고리의 다른 글
어떤 분야의 개발자로 나아가야 할까?(2) (0) | 2023.04.13 |
---|---|
나는 과연 비전공 개발자가 될 수 있을까 (0) | 2023.04.13 |
어떤 분야의 개발자로 나아가야 할까?(1) (0) | 2023.04.12 |
Comments