워드프레스: CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법

CSS를 사용하여 텍스트의 절반 높이만 형광펜으로 표시할 수 있습니다. 워드프레스에서 특정 텍스트에 절반 높이만 하이라이트 효과를 적용하고 싶은 경우 쇼트코드를 이용하면 편리합니다.

텍스트를 형광펜으로 표시하기 - 워드프레스용 텍스트 하이라이터 플러그인

워드프레스: CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법

블록 에디터의 강조 효과 기능 추가

워드프레스가 업데이트되면서 블록 에디터에서 특정 텍스트에 형광펜 효과를 적용하는 기능이 추가되었습니다.

텍스트를 선택(①)하고 툴바에서 V 아이콘(②)을 선택한 다음, 강조(③)를 클릭하면 해당 텍스트에 강조(하이라이트) 효과를 위해 텍스트 색상과 배경색을 지정할 수 있습니다.

워드프레스 쇼트코드로 텍스트의 절반 높이만 형광펜으로 표시하기

다음과 같은 CSS 코드를 사용하여 텍스트의 절반 높이만 형광펜으로 강조 표시할 수 있습니다.

/* 노란색 절반 형광펜 효과 */
.half_background {
  background: linear-gradient(to top, yellow 50%, transparent 50%);
}

위의 코드를 스타일시트 파일에 추가하고, 다음과 같이 텍스트에 CSS 클래스를 추가하면 해당 텍스트의 절반 높이만 강조 표시됩니다.

<span class="half_background">샬라샬라...</span>

하지만 워드프레스에서는 숏코드를 활용하여 쉽게 특정 텍스트를 절반 높이로 강조 표시할 수 있습니다.

다음과 같은 코드를 테마의 함수 파일에 추가하도록 합니다. 차일드 테마가 설치되어 있지 않다면 차일드 테마를 설치한 후에 차일드 테마 내의 함수 파일(functions.php)에 추가하시기 바랍니다.

// A WordPress shortcode that highlights only the bottom half of the text height

function custom_highlight_shortcode($atts, $content = null, $shortcode_tag) {
    $class_map = [
        'half' => 'half_background',
        'halfc' => 'half_cyan_background',
        'halfm' => 'half_magenta_background'
    ];

    $class = isset($class_map[$shortcode_tag]) ? $class_map[$shortcode_tag] : '';

    return '<span class="' . esc_attr($class) . '">' . esc_html($content) . '</span>';
}

add_shortcode('half', 'custom_highlight_shortcode');
add_shortcode('halfc', 'custom_highlight_shortcode');
add_shortcode('halfm', 'custom_highlight_shortcode');

이 작업을 위해서는 FTP/SFTP에 접속이 가능해야 합니다.

그리고 다음 CSS 코드를 외모 » 사용자 정의하기 » 추가 CSS에 추가하거나 차일드 테마 내의 스타일시트 파일(style.css)에 추가합니다.

/* CSS style that highlights only half the height of the text with a highlighter - yellow, cyan, magenta colors. */

.half_background {
  background: linear-gradient(to top, yellow 50%, transparent 50%);
}

.half_cyan_background {
    background: linear-gradient(to top, cyan 50%, transparent 50%);
}

.half_magenta_background {
    background: linear-gradient(to top, magenta 50%, transparent 50%);
}

맨 위부터 노란색, 시안(청록색), 마젠타(자홍색)에 대한 코드입니다.

추가하고 싶은 색상이 있다면 숏코드 함수와 CSS 코드에 적절히 추가할 수 있습니다. 약간의 PHP와 CSS에 대한 지식이 있어야 오류 없이 적용이 가능할 것입니다.

위의 코드는 한 번만 추가하면 됩니다. 이제 블록 에디터에서 글을 작성할 때 다음과 같은 숏코드로 특정 문구나 문장을 절반 높이만 강조 표시할 수 있습니다.

1. [half]노란색[/half]: 노란색으로 절반 높이만 강조 표시됩니다.
2. [halfc]시안색[/halfc]: 청록색으로 절반 높이만 하이라이트됩니다.
3. [[halfm]마젠타[/halfm]]: [halfm]자홍색으로 절반 높이만 형광펜으로 표시됩니다.[/halfm]

이것을 응용하여 1/3 높이만 형광펜으로 표시하는 것도 가능합니다. 예시 CSS 스타일:

/* CSS style that highlights only 1/3 of the height of specific text in yellow. */

.yellowhighlightery {
background: linear-gradient(to top, yellow 33%, transparent 25%);
}

위의 스타일을 적용하면 텍스트의 1/3 높이(33%)만 노란색으로 강조 표시됩니다. 이를 응용하여 다양한 색상으로 텍스트의 1/3 높이만 강조 표시할 수 있습니다.

인라인 CSS 스타일의 장단점

티스토리에서 인라인으로 CSS 스타일을 직접 추가하는 경우를 많이 목격합니다. 예시:

<span style="color: #f89009;">샬라샬라...</span>

인라인으로 CSS 스타일을 직접 삽입하는 경우 추후에 수정하려면 일일이 찾아서 수정해야 할 수 있습니다. 즉, 유지보수 측면에서 관리가 어려운 측면이 있습니다.

워드프레스에서 쇼트코드(단축 코드)를 사용하거나 CSS 클래스를 추가하고 스타일시트 파일에 CSS 스타일을 추가하는 경우, 추후에 수정하고 싶다면 스타일시트 파일에서 해당 CSS 코드를 찾아서 수정하면 됩니다.

인라인 CSS 스타일의 장점

1. 즉시 적용: 인라인 스타일은 해당 HTML 요소에 직접 적용되므로, 별도의 CSS 파일을 불러오지 않아도 스타일이 즉시 적용됩니다.
2. 우선 순위: 인라인 스타일은 CSS의 우선 순위에서 가장 높은 위치를 차지합니다. 즉, 다른 스타일 규칙보다 우선하여 적용됩니다. 이 점은 장점이자 단점일 수 있습니다. 인라인으로 추가된 CSS 스타일은 CSS로 변경할 수 없고 자바스크립트나 PHP 등을 사용하여 변경할 수 있습니다.
3. 테스트 및 디버깅 용이: 개별 요소에 대한 스타일 변경을 빠르게 테스트하고 싶을 때, 인라인 스타일을 사용하면 편리합니다.

인라인 CSS 스타일의 단점

1. 재사용성 부족: 인라인 스타일은 재사용이 불가능합니다. 동일한 스타일을 여러 요소에 적용하려면 코드를 반복하여 추가해야 합니다.
2. 유지보수의 어려움: 스타일이 HTML 요소에 직접 적용되기 때문에, 사이트 전반에 걸친 스타일 변경이 필요할 때 유지보수가 어렵습니다.
3. 가독성 저하: HTML 문서 내에 스타일 정보가 과도하게 포함되면 문서의 구조와 스타일이 혼합되어 가독성이 저하됩니다.
4. 성능 저하: 인라인 CSS 스타일을 과도하게 사용하면 HTML 문서의 크기가 커지게 되고, 페이지 로딩 시간에 영향을 줄 수 있습니다.

인라인 스타일은 작은 변경 사항이나 빠른 테스트에 유용할 수 있지만, 웹사이트의 일관성, 재사용성, 유지관리 등의 측면에서 바람직하지 않습니다.

본문 글씨 밑줄에 형광펜 효과주기

워드프레스 블록 에디터(구텐베르크)에서 Ctrl+U 단축키를 사용하여 텍스트에 밑줄을 그을 수 있습니다. 블록 에디터의 밑줄 기능을 사용하여 밑줄친 부분에 형광펜 효과를 적용하고 싶은 경우 다음 글을 참고해 보세요.

• 워드프레스 본문 글씨 밑줄 형광펜 효과주기

참고

• 빠른 워드프레스 테마: Kadence와 GeneratePress 비교
• 워드프레스에 쿠팡 파트너스 배너를 쇼트코드로 추가하기
• GeneratePress 테마에서 Read More 버튼이 표시되지 않는 경우 확인 사항