구글블로그 사용법: 글 (포스트) 제목 링크, 본문에 있는 링크, 푸터 링크 개별 제어 방법
블로그의 링크 전체에 적용되는 스타일은
=> 템플릿 > 사용자설정 (Customise) > 고급설정 (Advanced) > 링크 (Links) 에서 간편하게 설정을 할 수 있다.
글(포스트)의 제목, 본문 속 링크, 푸터 영역의 링크를 블로그 전체에 적용되는 링크 스타일과는 다르게 적용하려면, 아래의 코드를 사용하여 할 수 있다.
첫 번째 코드는 글(포스트)의 제목에 걸리는 링크를 제어하는 코드이고
두 번째 코드는 글(포스트)의 본문 안에 들어 있는 링크를 제어하는 코드이고
세 번째 코드는 글(포스트)의 푸터 영역에 있는 링크를 제어하는 코드이다.
CSS 코드에는 색상뿐만이 아니라 필요한 여러가지 요소들을 사용하여 알맞게 꾸미면 된다.
CSS 코드 추가는
=> 블로그 대시보드 > 템플릿 > 사용자설정(Customise) > 고급설정 (Advanced) > CSS추가 (Add CSS) 에서 하면 된다. (자세한 방법은 링크 페이지 참조)
경우에 따라서는 블로그 전체에 적용되는 링크 스타일을 유지하고, 특정한 글에 들어 있는 특정한 링크의 색상이나 글꼴 또는 글자크기 등을 제어할 필요가 있을 수 있다. 그럴 때는 링크를 거는 <a> 태그에서 스타일을 설정하면 된다. 예를 들자면,
[개별 링크 스타일 설정하기]
[실제 적용한 모습]
개별 링크 꾸미기 예제
도움이 되기를 바랍니다.
=> 템플릿 > 사용자설정 (Customise) > 고급설정 (Advanced) > 링크 (Links) 에서 간편하게 설정을 할 수 있다.
글(포스트)의 제목, 본문 속 링크, 푸터 영역의 링크를 블로그 전체에 적용되는 링크 스타일과는 다르게 적용하려면, 아래의 코드를 사용하여 할 수 있다.
h3.post-title a {color: #333;}
.post-body a {color: #333;}
.post-footer a {color: #333;}
.post-body a {color: #333;}
.post-footer a {color: #333;}
첫 번째 코드는 글(포스트)의 제목에 걸리는 링크를 제어하는 코드이고
두 번째 코드는 글(포스트)의 본문 안에 들어 있는 링크를 제어하는 코드이고
세 번째 코드는 글(포스트)의 푸터 영역에 있는 링크를 제어하는 코드이다.
CSS 코드에는 색상뿐만이 아니라 필요한 여러가지 요소들을 사용하여 알맞게 꾸미면 된다.
CSS 코드 추가는
=> 블로그 대시보드 > 템플릿 > 사용자설정(Customise) > 고급설정 (Advanced) > CSS추가 (Add CSS) 에서 하면 된다. (자세한 방법은 링크 페이지 참조)
경우에 따라서는 블로그 전체에 적용되는 링크 스타일을 유지하고, 특정한 글에 들어 있는 특정한 링크의 색상이나 글꼴 또는 글자크기 등을 제어할 필요가 있을 수 있다. 그럴 때는 링크를 거는 <a> 태그에서 스타일을 설정하면 된다. 예를 들자면,
[개별 링크 스타일 설정하기]
<a href="http://ojji.wayful.com"
style="
color: orange;
font-size: 2.0em;
text-decoration: none;
"
>
개별 링크 꾸미기 예제
</a>
style="
color: orange;
font-size: 2.0em;
text-decoration: none;
"
>
개별 링크 꾸미기 예제
</a>
[실제 적용한 모습]
개별 링크 꾸미기 예제
도움이 되기를 바랍니다.