메뉴얼

  2. 메뉴얼
고객센터 메뉴얼
✔ 뷰어로 보기
CSS

Css 텍스트 외곽선 처리하기, Stroke

by TheVOS posted Nov 28, 2019
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
Extra Form
원문출처 https://webisfree.com/2017-09-01/css-%ED...%B0-stroke
CSS를 사용하여 텍스트에 외곽선, stroke 효과를 주는 방법을 알아봅니다.

외곽선은 텍스트를 강조하는 효과적인 방법입니다. 간단하게 css를 사용하여 사용하는 것이 가능한데 가장 간단한 방법은 아래처럼 -webkit-text-stroke를 사용하는 방법입니다.

-webkit-text-stroke: 1px #000


다만, 이 방법은 매우 편리한 방법이지만 아쉽게도 표준 방법은 아니라 웹킷 및 모질라 계열의 브라우저에서만 적용됩니다. 사용할 경우 아래처럼 css에 적용하시기 바랍니다.
.text-stroke {
  -webkit-text-stroke: 1px #000;
}

이제 텍스트에 외곽선이 선명하게 나타납니다.

그렇다면 또 다른 방법을 알아봅니다.


# -webkit-text-stroke 크로스 브라우징 방법아래와 같은 방법을 사용하면 텍스트음영효과인 text-shadow를 이용하여 비슷한 효과를 만들 수 있습니다. 아래 코드를 봐주세요.

.text-stroke {
    color: #f00;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}


이 방법은 text-shadow가 적용되는 대부분의 브라우저에서 구현됩니다. 매우 효과적인 방법입니다.

# 실제 외곽선 적용된 예제보기
만약 아래와 같은 html에 위 css를 적용하여 외곽선을 직접 구현해보겠습니다.

<span class="text-stroke">THEVOS</span>


위 코드의 실행결과는 아래와 같습니다.

THEVOS

Facebook [ko]댓글 

Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄
에디터 선택하기
?
  1. No Image 12Nov
    by THEVOS
    2020/11/12 in EC-CUBE 4系
    Views 30 

    管理機能一覧

  2. No Image 12Nov
    by THEVOS
    2020/11/12 in EC-CUBE 4系
    Views 33 

    フロント機能一覧

  3. No Image 02Jan
    by TheVOS
    2020/01/02 in EC-CUBE 2系
    Views 63 

    EC-CUBE 2系でポート番号付で管理画面を動かす

  4. No Image 02Jan
    by TheVOS
    2020/01/02 in EC-CUBE 2系
    Views 135 

    EC-CUBE 2系で注文を受けた商品の規格を後で削除すると、管理画面で受注内容を編集できなくなる

  5. No Image 02Jan
    by TheVOS
    2020/01/02 in EC-CUBE 2系
    Views 89 

    EC-CUBE 2系でShift_JISに存在しない文字が含まれた受注データがあると、その受注内容が受注CSVからまるごと欠落する

  6. No Image 02Jan
    by TheVOS
    2020/01/02 in EC-CUBE 2系
    Views 104 

    EC-CUBE 2系で商品情報をCSVで更新するとき関連商品情報が削除される

  7. No Image 02Jan
    by TheVOS
    2020/01/02 in EC-CUBE 2系
    Views 84 

    EC-CUBE 2系で商品を沢山購入すると住所情報が欠落する

  8. No Image 02Jan
    by TheVOS
    2020/01/02 in EC-CUBE 2系
    Views 624 

    EC-CUBE 2系の「もっと見る」を簡潔に

  9. 10Dec
    by TheVOS
    2019/12/10 in EC-CUBE 2系
    Views 95 

    EC-CUBEをインストールする

  10. 04Dec
    by TheVOS
    2019/12/04 in CSS
    Views 52 

    CSS object-fit 속성

  11. No Image 28Nov
    by TheVOS
    2019/11/28 in CSS
    Views 111 

    Css 텍스트 외곽선 처리하기, Stroke

  12. No Image 14Nov
    by TheVOS
    2019/11/14 in EC-CUBE 4.x
    Views 387 

    EC-CUBE 4를 설치했을 때 설정 한 데이터베이스 암호는 어디에 저장되는 것입니까?

  13. 11Nov
    by TheVOS
    2019/11/11 in EC-CUBE 2系
    Views 635 

    EC-CUBE2.13カスタマイズ：新しいページを追加する

  14. 11Nov
    by TheVOS
    2019/11/11 in EC-CUBE 3系
    Views 165 

    관리 화면의 사이드 메뉴에 항목 추가하는 방법

  15. No Image 11Nov
    by TheVOS
    2019/11/11 in EC-CUBE 2.x
    Views 449 

    EC-CUBE에서 모든 페이지에서 로그인 체크하기

  16. 07Nov
    by TheVOS
    2019/11/07 in EC-CUBE 2系
    Views 131 

    イベントセット販売プラグインマニュアル

  17. 28Oct
    by TheVOS
    2019/10/28 in EC-CUBE 4系
    Views 495 

    EC-CUBE4 계에서 관리 화면에 새 메뉴 항목을 추가하는 방법

  18. 28Oct
    by TheVOS
    2019/10/28 in EC-CUBE 2.x
    Views 665 

    EC CUBEで商品ごとに支払い方法を簡単に分ける

  19. No Image 11Oct
    by TheVOS
    2019/10/11 in EC-CUBE 2系
    Views 56 

    2.13系 ソフトウェア要件

  20. 10Oct
    by TheVOS
    2019/10/10 in EC-CUBE 2系
    Views 131 

    ECCUBE 2.13のインストール方法をスクリーンショット付きでわかりやすく徹底解説！

쓰기
Board Pagination Prev 1 2 Next
/ 2