구글블로그 사용법: 블로그 페이저 (blog-pager) 네비게이션(Home, Newer post, Order post) 글자 폰트 꾸미는 방법
블로그 글을 이동하는 Home(홈) Newer Post(최근게시물) Order Post(이전게시물) 네비게이터의 글자체 크기 배경색 이미지 등을 조절하여 꾸미려면 아래와 같은 CSS 코드를 추가하여 쉽게 할 수 있다.
위 그림의 첫 번째 모양은 아무것도 꾸미지 않은 모습이고,
두 번째 모양은 글자 크기를 조금 키우고 굵게 지정한 모습이고,
세 번재 모양은 두 번째 모양에 바탕색을 녹색으로 주고 테두리를 둥글게 지정한 모습이다.
[두 번째 모양에 준 CSS 코드]
[세 번째 모양에 준 CSS 코드]
링크를 지정하는 코드와 속성
두 번째 모양은 글자 크기를 조금 키우고 굵게 지정한 모습이고,
세 번재 모양은 두 번째 모양에 바탕색을 녹색으로 주고 테두리를 둥글게 지정한 모습이다.
[두 번째 모양에 준 CSS 코드]
.home-link, .blog-pager-older-link, .blog-pager-newer-link {
font-size:1.2em;
font-weight:bold;
}
font-size:1.2em;
font-weight:bold;
}
[세 번째 모양에 준 CSS 코드]
.home-link, .blog-pager-older-link, .blog-pager-newer-link {
font-size:1.2em;
font-weight:bold;
background-color:green;
border-radius:50px;
}
font-size:1.2em;
font-weight:bold;
background-color:green;
border-radius:50px;
}
링크를 지정하는 코드와 속성
링크를 지정하는 코드는 아래와 같고, 둘 이상을 한꺼번에 지정하려면 코드와 코드 사이에 콤마(,)를 넣어 주면 된다.
꾸미고자하는 링크 코드를 지정하고, 잘 어울리는 속성 항목을 추가하여 조절하면 된다.
[각 링크를 지정하는 코드]
꾸미고자하는 링크 코드를 지정하고, 잘 어울리는 속성 항목을 추가하여 조절하면 된다.
[각 링크를 지정하는 코드]
.home-link {여기에 속성을 줌}
.blog-pager-older-link {여기에 속성을 줌}
.blog-pager-newer-link {여기에 속성을 줌}
.blog-pager-older-link {여기에 속성을 줌}
.blog-pager-newer-link {여기에 속성을 줌}
[모두 한꺼번에 같은 모양으로 지정]
.home-link, .blog-pager-older-link, .blog-pager-newer-link {
여기에 꾸미고자 하는 속성을 준다
}
여기에 꾸미고자 하는 속성을 준다
}
[링크를 꾸미는 속성]
아래는 많이 쓰이는 속성들을 열거한 것이므로, 그 외의 HTML 속성들을 써서 꾸미면 된다.
font-family: Arial
font-style: italic;
padding: 5px;
margin: 7px;
border-color: #bbb;
border-radius: 50px;
background-color: green;
url(그림 이미지 주소 URL) no-repeat left transparent;
font-style: italic;
padding: 5px;
margin: 7px;
border-color: #bbb;
border-radius: 50px;
background-color: green;
url(그림 이미지 주소 URL) no-repeat left transparent;
정리하면 아래와 같다.
[네비게이터 자체를 제어하는 코드]
#blog-pager {
display: none;
text-align: center;
margin: 5px 0px -10px 0px;
}
display: none;
text-align: center;
margin: 5px 0px -10px 0px;
}
[home, newer, older 링크 제어 하는 코드]
#blog-pager-newer-link { float: right; }
#blog-pager-older-link { float: left; }
.home-link { }
#blog-pager-older-link { float: left; }
.home-link { }
[home, newer, order 글자 앞 또는 뒤에 글자나 기호 또는 그림을 넣을 때의 코드]
.blog-pager-newer-link:before {
content: url('IMAGE URL HERE');
}
.blog-pager-older-link:before {
content: url('IMAGE URL HERE');
}
content: url('IMAGE URL HERE');
}
.blog-pager-older-link:before {
content: url('IMAGE URL HERE');
}
[예: newer, order 앞뒤에 기호를 넣은 코드]
.blog-pager-newer-link:before {content:'<< ';}
.blog-pager-older-link:after {content:' >>';}
.blog-pager-older-link:after {content:' >>';}
newer 앞에 << 기호를 넣고, older 뒤에 >> 기호를 넣은 예이며, 결과는 아래 그림과 같이 보여지게 된다.