[티스토리] 오픈 그래프 (open graph) CSS 커스터마이징

open graph css customize

[티스토리] 코드 블록 mac 스타일 적용 (feat. hELLO)

이전 발행글인 [티스토리]에 mac 스타일의 코드블록 css를 적용하면서 블로그 테마/스킨을 꾸미는 것에 재미가 들렸어요.

퀄리티가 좋은 개발 내용 위주의 포스팅을 하고 싶었는데, 티스토리 스킨을 커스터마이징 하는 것도 너무 재미가 있어서 포스팅하는데 지장이 가네요. 🤣 

여러분들은 티스토리 블로그에서 링크를 적은 후에 Enter 키를 누르면 자동으로 오픈그래프가 생성되는 것을 알고 계신가요?

티스토리에서는 link 입력후 Enter 키를 누르면 자동으로 오픈그래프가 만들어져요!

오픈그래프에 대한 개념이나 내용은 제가 더 보완해서 함께 알아보는 시간을 가져보도록 하겠습니다.

이번에는 자동으로 생성되는 오픈그래프의 CSS 를 제 입맛대로 커스터마이징 하는 포스팅을 할 거예요.

---

오픈그래프 디자인

Before

티스토리 hELLO 스킨에 적용되어 있는 오픈그래프 CSS를 변경하자고 마음을 먹었습니다.

기본 오픈그래프는 말 그대로 기본에 충실한듯한 각진 스타일을 가지고 있어요.

아무 작업도 하지 않은 기본 오픈그래프 디자인

물론 이 디자인도 훌륭하지만, 제 취향에 맞게 조~금 변경하고 싶었어요.

모서리는 조금 둥글게 한다던가, 마우스를 올리면 제목이나 링크의 변화를 주어 제가 무엇을 하고자 하는지 등을 말이죠.

생각보다 그리 어렵지 않아 공유하여 이 포스트를 읽는 분들께서도 쉽게 수정할 수 있도록 해보았습니다.

After

이왕 커스터마이징 하는 거 멋있게 취향에 맞게 변경해 보자!라고는 생각했는데, 제가 무엇을 원하는지, 어떤 디자인을 원하는지 모르는 상태가 되었어요.

그래서 처음에 생각했던 것들을 리스트업 하여 정리해 보기로 했습니다.

1. 모서리는 조금 둥글게
2. hover 효과
3. 크기를 조금 더 작게

하고자 하는 것들을 리스트업 하여 눈으로 명확하게 보는 순간 내가 원하는 디자인이 무엇인지 어느 정도 스케치가 되는 느낌이었어요.

그리고 어느덧 작업을 완료하여 확인해보니 제 마음에는 들었습니다.

무엇이 변경되었는지 모를 수도 있을 만큼의 커스터마이징 🤣

---

적용하기

티스토리 스킨 편집에 대해서는 따로 설명하지는 않겠습니다.

여러분들도 적용해 보시고, 변경을 원하시면 저처럼 시간 낭비하지 말고 편하게 하시라고 아래 로직을 첨부합니다.

코드블록에도 주석을 달아 놓았지만 작업한 것들은 다음과 같습니다.

1. 마우스 hover 효과
   - 그림자 생성
   - 썸네일 커지게
   - 밑줄 늘어나게
   - 제목과 링크 색 변경
2. 모서리 둥글게
3. 넓이 높이 줄이기

CSS

/* 퍼스널 컬러 */
:root {
    --h-width: 720px;
    --dark-color-1: #A178DF;
    --dark-color-2: #DCB0FF;
    --light-color-1: #51308E;
    --light-color-2: #845EC2;
    --color-1: #FACCFF;
    --color-2: #BE93FD;
}

/* 오픈그래프 스타일 적용 */
#content .contents_style figure[data-ke-type=opengraph] {
  border: 1px solid #7e7e7e26;
  border-radius: 10px;
}

#content .contents_style figure[data-ke-type=opengraph] a {
  border-width: 0px;
  height: 150px;
  border-radius: inherit;
}

#content .contents_style figure[data-ke-type=opengraph] a .og-image {
  overflow: hidden;
  border-right-width: 0px;
  border-radius: 10px 0 0 10px;
  width: 150px;
}

#content .contents_style figure[data-ke-type=opengraph] a .og-image:before {
  background-image: url(./images/thumb.webp);
}

/* 마우스 hover - 그림자 생성 */
#content .contents_style figure[data-ke-type=opengraph] a:hover {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* 마우스 hover - 썸네일 살짝 커지게 */
#content .contents_style figure[data-ke-type=opengraph] a:hover .og-image {
  transform: scale(1.01);
}

/* 마우스 hover - 제목 색상 변경 */
#content .contents_style figure[data-ke-type=opengraph] a:hover .og-text .og-title {
  color: var(--light-color-1);
}

.dark #content .contents_style figure[data-ke-type=opengraph] a:hover .og-text .og-title {
  color: var(--dark-color-1);
}


#content .contents_style figure[data-ke-type=opengraph] a:hover .og-text .og-host::after {
  width: 100%;
  opacity: 1;
}

#content .contents_style figure[data-ke-type=opengraph] .og-text {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
}

.dark #content .contents_style figure[data-ke-type=opengraph] .og-text {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

#content .contents_style figure[data-ke-type=opengraph] .og-text {
  left: 150px;
  padding: 15px 20px 15px 20px;
  border-radius: 0 10px 10px 0;
}

#content .contents_style figure[data-ke-type=opengraph] .og-text .og-title,
#content .contents_style figure[data-ke-type=opengraph] .og-text .og-desc,
#content .contents_style figure[data-ke-type=opengraph] .og-text .og-host {
  font-family: SUIT, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
}

.dark #content .contents_style figure[data-ke-type=opengraph] .og-text .og-title,
.dark #content .contents_style figure[data-ke-type=opengraph] .og-text .og-desc,
.dark #content .contents_style figure[data-ke-type=opengraph] .og-text .og-host {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

#content .contents_style figure[data-ke-type=opengraph] .og-text .og-title {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
  max-width: 550px;
  transition: .5s;
}

#content .contents_style figure[data-ke-type=opengraph] .og-text .og-host {
  bottom: 15px;
}

/* Link 앞 fontawesome */
#content .contents_style figure[data-ke-type=opengraph] .og-text .og-host::before {
  font-weight: 700;
  color: var(--light-color-2);
  --tw-content: '\f0c1';
  content: var(--tw-content);
  display: inline-block;
  font-family: 'Font Awesome 6 FREE';
  font-style: normal;
  line-height: 1;
}

.dark #content .contents_style figure[data-ke-type=opengraph] .og-text .og-host::before {
  color: var(--dark-color-2);
}

#content .contents_style figure[data-ke-type=opengraph] .og-text .og-host::before {
  padding: 5px;
}

#content .contents_style figure[data-ke-type=opengraph] .og-text .og-host::after {
  background-color: var(--light-color-1);
}

.dark #content .contents_style figure[data-ke-type=opengraph] .og-text .og-host::after {
  background-color: var(--dark-color-1);
}

/* Link 밑줄 */
#content .contents_style figure[data-ke-type=opengraph] .og-text .og-host::after {
  content: "";
  position: absolute;
  left: 0;
  top: 31.5px;
  width: 50px;
  height: 4px;
  transition: all 1s ease-in-out;
  transition-duration: 0.5s;
  border-radius: 15px;
}

미리 보기

See the Pen tistory opengraph css by reifier (@reifier) on CodePen.

---

정리

끝내며

큰일 났습니다. 시간 낭비하는 게 너무 재밌어요.

hELLO 스킨 중에 수정하고 싶은 부분이 계속 눈에 보입니다. 나만의 작은 홈페이지를 만드는 느낌이 들어요.