Create a category link box
최근에 Notion링크들을 박스에 넣어서 정리한 것을 블로그에 적용했는데요. 아래는 HTML과 CSS를 따로 적어두고 설명은 간단히 CSS에만 적어뒀어요. 간단한 링크들을 네모난 박스 안에 담고 제목은 가운데 정렬하고 링크들은 li 태그로 설정해놨습니다.
<div class="notion-links">
<h1>Notion Album LINKS</h1>
<ul>
<s_link_rep>
<li><a onclick="window.open(this.href); return false" href="https://bddung.notion.site/Animals-93ce5255ddd74d5a8e6b3c32bc517f01">동물</a>
</li>
</s_link_rep>
<s_link_rep>
<li><a onclick="window.open(this.href); return false" href="https://bddung.notion.site/Scenery-c8022ad8016841adb95e5e03641a7182">풍경</a>
</li>
</s_link_rep>
<s_link_rep>
<li><a onclick="window.open(this.href); return false" href="https://bddung.notion.site/Food-ab8580e883664ac69ed355f6092095db">식도락</a>
</li>
</s_link_rep>
<s_link_rep>
<li><a onclick="window.open(this.href); return false" href="https://bddung.notion.site/Garden-b0b3da69fdd84e498acf17f16f52bd55">정원</a>
</li>
</s_link_rep>
</ul>
</div>/* 노션 링크들 사이드바 CSS */
.notion-links {
font-family: 'Arial', sans-serif; /* 기본 폰트 설정 */
margin: 0 0 43px; /* 위, 오른쪽, 왼쪽 마진 없애고 아래 마진을 43px로 설정 */
padding: 20px; /* 내부 여백 추가 */
background-color: transparent; /* 배경을 투명으로 설정 */
border: 1px solid #e9e9e9; /* 네모난 실선 추가 */
border-radius: 0; /* 둥근 모서리 없애기 */
box-shadow: none; /* 그림자 효과 없애기 */
width: 100%; /* 가로 폭을 100%로 설정하여 중앙 정렬 */
max-width: 300px; /* 최대 너비 300px로 설정 */
margin-left: auto; /* 좌측 여백을 자동으로 설정 */
margin-right: auto; /* 우측 여백을 자동으로 설정 */
}
.notion-links h1 {
font-size: 14px; /* 제목 폰트 크기 14px로 설정 */
margin-bottom: 16px; /* 제목과 항목 간의 간격 */
color: #333; /* 제목 색상 */
text-align: center; /* 제목 가운데 정렬 */
}
.notion-links ul {
margin: 0;
padding: 0;
list-style: none; /* 기본 점 제거 */
}
.notion-links ul li {
font-size: 14px; /* 항목 폰트 크기 14px로 설정 */
line-height: 1.4; /* 텍스트 간 간격 */
margin-bottom: 16px; /* 항목 간 간격을 16px로 설정 */
padding: 0; /* padding 없애기 */
color: #333; /* 텍스트 색상 */
display: flex;
align-items: center; /* 텍스트 수직 정렬 */
}
.notion-links ul li:before {
content: "• "; /* 아이콘 대신 원으로 시작 */
font-weight: bold;
margin-right: 8px; /* 아이콘과 텍스트 간의 간격 */
color: #ff8149; /* 아이콘 색상 */
}
.notion-links ul li a {
display: inline-block;
padding: 0; /* padding 없애기 */
font-size: 14px; /* 링크 텍스트 폰트 크기 14px로 설정 */
color: #333; /* 기본 텍스트 색상 */
text-decoration: none; /* 링크에 밑줄 제거 */
transition: transform 0.3s ease; /* 마우스 오버 시 확대 효과만 유지 */
}
.notion-links ul li a:hover,
.notion-links ul li a:active,
.notion-links ul li a:focus {
color: #333; /* 링크 마우스 오버 색상 없애기 */
text-decoration: none; /* 마우스 오버시 밑줄 없애기 */
transform: scale(1.05); /* 링크 확대 효과 */
}
.notion-links ul li a .cnt {
font-size: 14px; /* 카운트 텍스트 폰트 크기 14px로 설정 */
color: #ff8149; /* 카운트 텍스트 색상 */
margin-left: 5px;
}
.notion-links ul li a .cnt:hover {
color: #ff5722; /* 카운트 텍스트 마우스 오버 시 색상 변경 */
}
/* 노션 링크들 사이드바 CSS */