티스토리 홈 + 로그인/로그아웃 버튼 만들기

 

HTML 코드

<s_sidebar_element><!-- 로그인/로그아웃-->
	<div class = "sidebar-element">
		<div class = "logout-menu test-sm">
			<div><a href="https://www.tistory.com">티스토리 홈</a></div> | <div class="login-logout-button"></div>
		</div>
	</div>
</s_sidebar_element>

CSS 코드

.logout-menu {
    display: flex; /* 기본적으로 표시 */
    flex-direction: row; /* 가로 배치로 설정 */
    justify-content: flex-start; /* 왼쪽 정렬 */
    gap: 10px; /* 요소들 사이 간격 */
    padding-left: 25px; /* 오른쪽으로 약간 이동 */
}

.logout-menu a {
    text-decoration: none; /* 링크의 밑줄 제거 */
    color: #aaa; /* 기본 글자 색상 유지 */
    padding: 5px 10px; /* 패딩 추가 */
    border: none; /* 테두리 제거 */
    background-color: transparent; /* 배경색 제거 */
    font-size: inherit; /* 글자 크기 통일 */
}