안녕하세요. 오늘은 새롭게 리뉴얼된 티스토리 블로그의 공감 하트 공유 신고 버튼의
가운데 정렬 하는 방법에 대해서 알아보겠습니다.
[티스토리] 공감 하트 공유 신고 버튼 가운데 정렬하기
티스토리가 개편 리뉴얼 되면서
관리자 페이지도 변화가 되었고, 공감버튼도 변화가 생겼습니다.
원래 공감 버튼은 발행게시글만 나타났었는데, 이제는 주제를 선택해야지 나타납니다.
기존 공감버튼이 없어지고 아래와 같이 새로운 버튼이 생겨서 좌측정렬이 되어버립니다.
해당영역은 따로 플러그인이나, HTML 수정을 제공하지 않기 때문에
구조 자체 변경은 어려우며,
CSS 스타일시트의 수정으로, 위치를 조정해야합니다.
우선 구조를 살펴볼까요??
복잡하게 보이지만 아주 간단한 구조로 되어있습니다.
<div class="container_postbtn">
<div class="postbtn_like">
<div class="like_btn">...</div>
<label>...</label>
<label>...</label>
</div>
</div>이런 구조로 되어있습니다.
따라서 해당 영역의 스타일 속성만 아주 간단하게 수정을 해주면 됩니다.
1) 우선 container_postbtn 클래스에
text-align: center;속성을 추가해줘야합니다.
텍스트 정렬의 속성으로, 가운데 정렬을 지정하는 것입니다.
2) 이제 그안에 있는, postbtn_like 클래스에
display: inline-block; 속성을 지정해줘야합니다.
inline 속성이란, 쉽게 말해 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향입니다.
대표적인 inline 속성을 가진 태그로는 <a>, <strong>, <span> 태그가 있습니다.
block 속성은 inline과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지합니다.
대표적인 블록 요소로 <p> 태그가 있습니다.
inline-block; 속성은 자세하게 설명하려면, 포스팅이 길어지기 때문에, 다음에 정리하고
크게는 요소는 inline이며, 내부는 block 처럼 표시한다고 생각하면됩니다.
특히, 이번 수정을 위해서는 반드시 필요한 속성입니다.
3) 마지막으로 postbtn_like 클래스에
float: left;인 좌우정렬 속성을 지워줘야합니다.
하지만, 해당 속성은 우리가 수정,삭제 제어할 수 없는 외부스타일시트이기 때문에,
float: none!important;을 사용해서, 덮어쓰기(?) 방식
!important;는 스타일시트 우선순위를 무시하고 가장 먼저 사용하는 속성입니다.
단, 해당속성 남발은 ㅠ 추후 수정에 어려움이 있으므로, 자제!!
그래서 위 설명을 정리해 보면 아래와 같이 소스 코드가 나옵니다.
/*공감 가운데 정렬 CSS*/
.container_postbtn {text-align:center;}
.container_postbtn .postbtn_like{display:inline-block;float:none!important}
그럼 해당 코드를 복사해서, [관리자페이지] → [스킨 편집] → [html/css편집] → [CSS] 영역에 붙여넣기
그러면 아래와 같이 공감 버튼이 가운데 정렬이 됩니다.^^ 눌러주세요!!
↓↓↓↓↓↓↓
