Story | Notion

<head>

<style>
h1 {
	margin: 0 auto !important;
	text-align: center;
}

@media (min-width: 414px) {
			:root .width { 
				width: 1500px !important;
			}

			.notion-collection_view-block {
				width: 100% !important;
			}

			.notion-collection_view-block > div, 
			.notion-gallery-view,
			.notion-list-view {
				padding-left: 0 !important;
				padding-right: 0 !important;
			}

			.css-1jvi05l {
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
	}

.notion-gallery-view a {
		box-shadow: none !important;
		border: none !important;
	}

.notion-record-icon {
	display: none !important;
}

.css-fox54z { /*메인타이틀*/
	font-size: 1.2em !important;
  font-weight: bold !important;
}

.css-2axpky {
	row-gap: 48px !important;
}

.css-1yjhumr > div > div > span { /*서브타이틀*/
		font-size: 1.2em !important;
}

.css-1hj95xj { /*태그*/
		margin-top: 10px !important;
}

</style>
</head>

<style>
#tag-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px 0 24px;
}
#tag-filter-bar button {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid #ddd;
  background: white;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
#tag-filter-bar button.active {
  background: #111;
  color: #fff;
  border-color: #111;
}
</style>

<div id="tag-filter-bar"></div>

<script>
(function() {
  function init() {
    var items = document.querySelectorAll('.notion-collection-item');
    if (!items.length) { setTimeout(init, 500); return; }

    var tags = ['전체'];
    items.forEach(function(el) {
      var tag = el.innerText.split('\n').pop().trim();
      el.dataset.tag = tag;
      if (tag && tags.indexOf(tag) === -1) tags.push(tag);
    });

    var bar = document.getElementById('tag-filter-bar');
    tags.forEach(function(tag) {
      var btn = document.createElement('button');
      btn.textContent = tag;
      btn.dataset.tag = tag;
      if (tag === '전체') btn.classList.add('active');
      btn.addEventListener('click', function() {
        document.querySelectorAll('#tag-filter-bar button').forEach(function(b) {
          b.classList.remove('active');
        });
        btn.classList.add('active');
        document.querySelectorAll('.notion-collection-item').forEach(function(el) {
          el.style.display = (tag === '전체' || el.dataset.tag === tag) ? '' : 'none';
        });
      });
      bar.appendChild(btn);
    });
  }
  setTimeout(init, 2000);
})();
</script>

새로운 아티클