티스토리 - New 최신 마크 만들기 (커스텀)

문득 블로그를 작성하던 중 가장 최신에 작성한 글에 돋보이는 효과를 주고 싶었다.

다른 github에서는 종종 봤었던 것 같은 기억이 나서 직접 만들어본다.

참고로 나는 letter 스킨을 사용하고 있다. 제일깔끔한듯

 

최신에 작성했던 글들 중에서 가장 최근에 작성했던 글 제목위에 New 라는 문구를 추가하고 싶었다.

 

1.  커스텀 하고자 하는 요소의 클래스 명 찾기

원하는 요소의 정보를 볼 수 있는 방법은 아래 3가지 정도가 있다.

- F12

- option + cmd + i

- shift + cmd + c

 

나는  shift + cmd + c 이 방법을 추천한다.

마우스로 내가 선택하고자 하는 영역을 색으로 구분해주기 때문이다.

 

shift + cmd + c 시 보이는 화면

대충 내가 추가하고 싶은 영역을 선택했을 때의 모습이다.

 

여기서 중요한것

최신 작성 리스트 중에서 첫번째 요소에 추가해줘야 하기 때문에 더 상위(부모)요소에 접근해야 한다.

 

현재 구조

조부모 inner_index

부모 index_type index_type_post index_type_post_line4

자식들 article_content

 

우리는 article_content의 첫번째에 추가해야한다.

 

---

2.  스킨 편집 +  CSS 수정하기

위의 구조를 잘 기억하고 스킨편집에 들어가 CSS 부분으로 들어가 제일 아래에서 작업한다.

 

내가 수정한 CSS 코드

.inner_index .index_type_post_line4 .article_content:nth-of-type(1)::before  {
 content: "New";
 width: 120px;
 color: cornflowerblue;
border: 1px solid #e0e0e0;
border-radius: 20px;
padding: 4px 10px;
font-size: 12px;
font-weight: bold;
}

더욱 확실하고 강력하게 요소에 접근하기 위해 조부모 + 부모에서도 유일한 class값이었던 ~~line4 + 자식:nth-of-type(1)로 선택했고

태그를 사용하지 않고 추가하기 위해서 가상요소를 사용했다.

 

nth-of-type()혹은 first-of-type으로 선택해야 자식들 중에서 첫번째 .article_content가 선택된다. 선택기준이 .article_content가 된다.

 

위와 같은 방법으로 커스텀하면 

 

이처럼 해당 리스트의 첫 부분만 New 마크가 생성된다.

 

 

 

 

---

두 선택자의 차이를 잘 정리한 예시이다.

first-child와 firts-of-type 차이