프라치노 공간 스킨 수정하기 (1) - 글 작성자 꾸미기

현재 블로그에서 사용 중인 프라치노 공간 스킨을 뜯어 고치고 있다. 사실 HTML 이나 CSS 부분을 자세히 모르지만 스킨을 내 입맛대로 커스텀 하는 재미 때문에 다시 티스토리로 옮긴 영향도 약간은 있는 편이기도 하다. 구블보단 확실히 편하고 글작성 에디터 역시 비교할 수 없는 수준이고. 프라치노 공간 스킨을 커스텀 하면서 나름대로 수정했던 내용들을 포스팅으로 남기고자 한다. 

변경 전	변경 후

글 작성자 꾸미기

기존의 프라치노 공간 스킨의 글 작성자는 글 작성자 : 닉네임 형태로 되어 있다. 사소한 부분이지만 글 작성자 : 부분을 날리고, 프로필 이미지로 대체 해보았는데 생각보다 괜찮은 듯 하다. 나중에는 헤더쪽으로 위치를 옮겨봐야겠다.

HTML

HTML 에서 address 를 검색하여 나오는 글 작성자: 부분을 삭제. article 은 글, notice 는 공지 부분에서 활용 되는 부분으로 보인다.

<address>글 작성자 : [ ##_notice_rep_author_## ]</address>
<address>글 작성자 : [ ##_article_rep_author_## ]</address>

/* 글 작성자 : 부분을 삭제한다 */

CSS

/* 본문 내 글 작성자 스타일 */
.author-inner address {
display: flex;                     /* 내부 요소를 가로로 정렬 (inline 요소도 적용됨) */
align-items: center;              /* 세로 중앙 정렬 */
font-size: 1.05rem !important;    /* 글자 크기 약간 키움. !important로 기존보다 우선 적용 */
gap: 0.4rem;                      /* 요소 간 간격 (margin 대용) */
}

.author-inner address::before {
content: "";                      /* 가상 요소 생성 (내용 없음) */
display: inline-block;            /* 너비/높이 지정 가능 */
width: 28px;
height: 28px;                     /* 정사각형 크기 */
background-image: url(//프로필이미지주소);  /* 프로필 이미지 (주소 수정 필요) */
background-size: cover;           /* 요소에 맞게 꽉 채움 */
background-position: center;      /* 중앙 정렬 */
border-radius: 50%;              /* 원형 만들기 */
margin-right: 0.6rem;             /* 텍스트와의 간격 */
}