티스토리 블로그를 만들고 다른 컴퓨터나 다른 브라우저로 접근하면 로그인을 할 수 있는 설정화면이 나타나지 않습니다.
화면을 보겠습니다.
어제 생성한 티스토리 블로그인데요, 컴퓨터를 바꿔서 다시 접속했더니 오른쪽 위에 나타나야 하는 설정 화면이 보이지 않습니다. 어떻게 블로그로 접근하면 좋을까요. 어쩔 수 없이 티스토리를 찾아서 로그인 화면이 나오면 로그인, 아니면 포럼으로 들어가서 글 쓰기 하면 로그인하라고 합니다. 이때 카카오 계정을 입력하면 개설한 블로그로 들어갈 수 있습니다.
보통은 자신의 컴퓨터에서 작업을 하기에 항상 로그인을 해둘 겁니다. 그렇게 되면 큰 문제는 없는데요, 이번에 티스토리 블로그를 만들면서 티스토리에서 제공하는 스킨으로 만들었습니다. Odyssey 스킨인데 상당히 좋아 보이네요. 그런데 로그아웃이 되면 관리자로 들어갈 수 있는 방법을 찾을 수가 없네요.
이전에 작성한 티스토리 관리자 화면으로 들어가는 방법입니다.
이전 포스팅에서는 지금은 적용되지 않는 문제가 있습니다. 코드 중에서 padding 0, 0, 0, 20; 이 부분이 지금은 html이 엄격해져 적용되지 않는데요, padding 0, 0, 0, 20px; 로 수정해야 합니다.
사이드바 적용하기 위해 플러그인에서 배너 출력, 그 이후에 사이드바 배너 사용하는 것은 이전 포스팅을 참고하시고 그 이후의 과정을 적어보겠습니다. 사실은 사이트바 관리자 화면으로 들어가는 버튼을 만드는 것은 위의 포스팅만으로도 충분합니다.
이번에는 <style>에서 정의한 것을 <a>링크와 사용하는 것이 아닌 CSS에서 넣고 CSS에서 정의한 스타일 불러 사용하는 방법을 알아보고 유니코드를 수정할 수 있는지 관리자와 글쓰기 간격을 수정하는 것 등을 알아봅니다.
<head>
<!-- FontAwesome CSS 파일 추가 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/>
</head>
FontAwesome CSS를 불러오는 코드는 티스토리 스킨 편집에 넣습니다.
그리고 CSS 코드는 물론 CSS에 넣어야겠죠.
이렇게까지 나온 과정입니다.
/* 관리자, 글쓰기 */
/* 아이콘을 링크 앞에 추가 */
.f105-icon::before {
content: '\f105'; /* Font Awesome 유니코드*/
font-family: 'Font Awesome 5 Free'; /* Font Awesome 폰트 패밀리 */
font-weight: 900; /* 폰트 굵기 */
color: #333; /* 아이콘 색상 */
}
이 코드를 넣으면 '>글쓰기' 처럼 유니코드와 글자가 붙어 보기싫죠. 그래서 유니코드와 글쓰기 사이를 띄워야 하는데
<a class="f105-icon" href="https://블로그계정.tistory.com/manage">관리자</a> 이 코드에서는 유니코드와 관리자 사이를 띄울 수 없습니다.
그래서 <style> 코드를 수정하는데요,
content: '\f105 \00A0'; /* Font Awesome 유니코드와 공백 추가 */
유니코드 뒤에 공백을 넣을 수 있는 코드를 추가합니다. 그럴 듯하게 나옵니다.
그리고 이번에는 관리자 화면에서 글쓰기 버튼을 추가합니다.
<a class="f105-icon" href="https://계정이름.tistory.com/manage">관리자</a><br><br>
<a class="f105-icon" href="https://계정이름.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F">글쓰기</a>
이렇게해서 관리자와 글쓰기 버튼 두 개를 만듭니다. 결과는 <br> 코드가 적용되지 않고 관리자와 글쓰기 버튼이 줄간격도 없이 붙어서 나옵니다. 왜 그런지 확인해 보니 content: '\f105 \00A0'; 유니코드 뒤에 공배 코드를 넣은 것이 적용되지 않는데요, 이제 다시 코드를 수정합니다.
/* 아이콘을 링크 앞에 추가 */
.f105-icon::before {
content: '\f105'; /* Font Awesome 유니코드 */
font-family: 'Font Awesome 5 Free'; /* Font Awesome 폰트 패밀리 */
font-weight: 900; /* 폰트 굵기 */
color: #666; /* 아이콘 색상 */
margin-right: 10px; /* 아이콘과 텍스트 사이의 간격 */
display: inline-block; /* 인라인 블록으로 설정하여 공백 적용 */
}
/* 링크 스타일 */
.f105-icon {
text-decoration: none; /* 링크 밑줄 제거 */
font-family: Arial, sans-serif; /* 기본 폰트 패밀리 설정 */
}
그리고 어썸폰트 굵기가 마음에 안 들어 수정을 했더니 적용이 안되네요, font-weight: 900; /* 폰트 굵기 */ 이 부분인데요, 일반적인 normal 굵기는 400입니다. 400으로 수정하니 폰트가 나오지 않아 처음대로 900으로 돌렸습니다. 이것은 Font Awesome 아이콘 폰트에서 사용방법으로 지정된 것 같아요.
최종적으로 롤오버 했을 때 언더바가 나오게 했습니다. 나머지 폰트 적용 및 크기 수정하는 것은 방문자에게 넘기겠습니다.
/* 관리자, 글쓰기 */
/* 아이콘을 링크 앞에 추가 */
.f105-icon::before {
content: '\f105'; /* Font Awesome 유니코드 */
font-family: 'Font Awesome 5 Free'; /* Font Awesome 폰트 패밀리 */
font-weight: 900; /* 폰트 굵기 */
color: #666; /* 아이콘 색상 */
margin-right: 10px; /* 아이콘과 텍스트 사이의 간격 */
display: inline-block; /* 인라인 블록으로 설정하여 공백 적용 */
}
/* 링크 스타일 */
.f105-icon {
text-decoration: none; /* 링크 밑줄 제거 */
color: #666; /* 링크 텍스트 기본 색상 */
font-family: sans-serif, 'Malgun Gothic', 'Arial'; /* 기본 폰트 패밀리 설정 */
transition: color 0.3s ease, text-decoration 0.3s ease; /* 색상 및 텍스트 장식 전환 효과 */
}
/* 링크에 마우스를 올렸을 때 색상 및 언더바 추가 */
.f105-icon:hover {
color: #333; /* 롤오버 시 링크 텍스트 색상을 #333으로 변경 */
text-decoration: underline; /* 롤오버 시 언더바 추가 */
}