링크를 '블록으로 가독성 업'하기

다음은 앞서 소개한 링크-블록이 잘 않되신 분들을 위해 만들었습니다. 티스토리 블로그에서 본문에 포함된 링크에만 블록 스타일을 적용하여 가독성을 높이는 CSS 코드를 만든 겁니다. 역시나 챗지피티는 코딩실력이 높습니다. 목차에 포함된 링크에는 영향을 주지 않고, 본문에만 적용되도록 만들었습니다.

링크-팝업 블록만들기

CSS 코드

/* 본문 내 링크에 블록 스타일 적용 */
.post-content a {
    display: inline-block;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease;
}

/* 링크에 마우스를 올렸을 때 효과 */
.post-content a:hover {
    background-color: #e0e0e0;
}

/* 목차 영역의 링크에는 스타일이 적용되지 않도록 설정 */
.toc a {
    display: inline;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    text-decoration: underline;
    color: #0073e6;
    transition: none;
}

 

위 코드 다운받기:

링크 블록버튼css코드l.txt

0.00MB

설명

1. .post-content a:
   • 이 셀렉터는 본문(.post-content) 내에 포함된 모든 링크(a 요소)에 대해 블록 스타일을 적용합니다.
   • 링크에 inline-block을 적용하여 블록처럼 보이도록 하고, 패딩과 배경색, 모서리 둥글기를 설정했습니다.
2. .post-content a:hover:
   • 링크에 마우스를 올렸을 때(hover 상태) 배경색이 살짝 변경되도록 하여 인터랙티브한 느낌을 줍니다.
3. .toc a:
   • 이 셀렉터는 목차(.toc) 영역에 포함된 링크에 스타일이 적용되지 않도록 기본 링크 스타일로 되돌립니다.
   • 이로 인해 목차에 있는 링크들은 본문 링크와 다른 스타일을 유지하게 됩니다.

적용 방법

1. CSS 추가:
   • 티스토리 블로그 관리 페이지에서 "스킨 편집"으로 들어가 "CSS" 파일을 수정합니다.
   • 위에 제공된 CSS 코드를 추가하고 저장합니다.
2. 확인:
   • 블로그 페이지를 새로 고침하여 본문 링크에 블록 스타일이 적용되었는지 확인합니다.
   • 목차 내의 링크는 기본 스타일로 유지되는지 확인합니다.

적용 예

이 방법을 통해 본문 내의 링크 가독성을 높일 수 있으며, 목차는 별도로 유지할 수 있습니다.  감사합니다. 블로그에 진심인 메섹톡이었습니다.  구독은 사랑입니다.  여행은 가나톡입니다.