CSS 글자 테두리 - CSS geulja teduli

Question

CSS 그림자 글자 설정은 text-shadow 속성을 사용합니다. 흐리게, 중첩이 가능합니다. 테두리의 경우도 box-shadow 속성으로 그림자 설정이 가능합니다.

목차 Show

CSS 그림자 텍스트 : test-shadow
텍스트 그림자 기본
텍스트 그림자 흐리게
텍스트 그림자 중첩
CSS 테두리 그림자 : box-shadow

CSS 그림자 텍스트 : test-shadow

텍스트 그림자 기본

CSS 그림자 위치를 텍스트에 줄 경우 text-shadow 속성으로 구현합니다.

text-shadow: 수평그림자 수직그림자 흐림효과 그림자색;

플러스 값은 오른쪽 또는 아래쪽으로 이동을 의미합니다. 마이너스 값은 왼쪽 또는 위로 이동을 의미합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        text-shadow: 2px 2px 0px red;
      }
    </style>
  </head>
  <body>
    <h2>Hello World!</h2>
  </body>
</html>

텍스트 그림자 흐리게

세 번째 요소에 값을 주면 그림자에 블러효과가 진행됩니다.

text-shadow: 수평그림자 수직그림자 5px 그림자색;

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        text-shadow: 2px 2px 5px blue;
      }
    </style>
  </head>
  <body>
    <h2>안녕하세요?</h2>
  </body>
</html>

텍스트 그림자 중첩

쉼표 , 를 이용해서 여러 가지 그림자를 중첩할 수 있습니다.

text-shadow: 수평그림자 수직그림자 흐림효과 색, 수평그림자 수직그림자 흐림효과 색 ...

아래 예시에서 마이너스 픽셀이란 왼쪽으로 그림자를 주거나 위쪽으로 그림자를 주는 옵션입니다. 총 4개의 그림자를 상, 하, 좌, 우에 중첩하면 테두리 효과를 줄 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        color: white;
        text-shadow: -2px 0px 0px crimson, 2px 0px 0px crimson, 0px 2px 0px crimson, 0px -2px 0px crimson;
      }
    </style>
  </head>
  <body>
    <h2>안녕하시렵니까?</h2>
  </body>
</html>

CSS 테두리 그림자 : box-shadow

테두리 그림자는 box-shadow 속성을 사용해서 구현합니다. text-shadow와 명령어만 다르고 그림자의 방향, 중첩 등의 기능은 모두 동일합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div{
        background-color: pink;
        box-shadow: -5px 5px 0px green;
      }
    </style>
  </head>
  <body>
    <div>앗 나의 실수!</div>
  </body>
</html>

기호에 따라 그림자를 여러개 삽입해서 그림자 색을 구현하는 파트와 명암효과를 주는 파트를 구분해서 편집할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div{
        background-color: cyan;
        box-shadow: -5px 5px 0px blue, 5px 5px 20px green;
      }
    </style>
  </head>
  <body>
    <div>세상에서 가장 빠른 사람은? 비사이로 막가!</div>
  </body>
</html>

워드프레스 등에서 CSS 수정시 그림자가 지워지지 않는 경우 box-shadow 옵션도 지우면 지워지는 경우가 많습니다.

위의 사진처럼 메인화면에서 슬라이드 부분에 사진이 하얀색 계열이면 제목의 가독성이 떨어져 보여서 그림자를 넣거나 테두리 색을 입히기로 했다.

개발자 모드로 대충 코드의 어느 부분인지 파악한다.

찾아보니 빨간선으로 친 부분을 보면 될듯 하다.

그 중, 글씨를 제어하는 font 가 들어간 첫번제 빨간 밑줄 부분으로 가서

밑의 코드를 추가하도록 한다.

text-shadow

text-shadow: -1px 0 #000,
	       0 1px #000,
	       1px 0 #000,
	       0 -1px #000;

(실행결과)

간단하게 설명해서 첫번째 줄부터 밑에 줄까지 위, 오른쪽, 아래, 왼쪽 이다.

각각 한 부분 씩 1px로 색을 주어서 테두리 처럼 만드는 것이다.

당연하게도 픽셀을 높이면 굵기가 굵어진다. (1px 차이가 꽤나 커보인다)

text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;

그림자를 만드는 방법은 더 간단하다.

text-shadow

text-shadow: 1px 1px 5px #000;

(실행결과)

이 코드는 왼쪽부터 가로, 세로, 번짐 정도이다.

가로, 세로 크기가 크면 그림자가 글씨로 부터 멀어지고,

10px 10px 5px #000

번짐 정도가 크면 그림자의 선명도가 낮아진다.

1px 1px 10px #000

css 글자 테두리만 css text-shadow CSS 글자 박스 css text-stroke CSS 글자 꾸미기

CSS 글자 테두리 - CSS geulja teduli

CSS 그림자 텍스트 : test-shadow

텍스트 그림자 기본

텍스트 그림자 흐리게

텍스트 그림자 중첩

CSS 테두리 그림자 : box-shadow

관련 게시물

이로 시작하는 애니 - ilo sijaghaneun aeni

크롬 글자 지워짐 - keulom geulja jiwojim

Jquery 로딩바 - Jquery lodingba

CSS 원형 배치 - CSS wonhyeong baechi

모바일 터치 CSS - mobail teochi CSS

CSS버튼 hover - CSSbeoteun hover

갤럭시 노트10 메뉴 버튼 - gaelleogsi noteu10 menyu beoteun

일러스트 태극기 만들기 - illeoseuteu taegeuggi mandeulgi

CSS 터지는 효과 - CSS teojineun hyogwa

포토샵 텍스트 선택 - potosyab tegseuteu seontaeg

광고하는

최근 소식

디젤 엔진오일 감소 - dijel enjin-oil gamso

마비노기 밀 인형 - mabinogi mil inhyeong

을 보니 grammar - eul boni grammar

젤다 드래곤 안나옴 - jelda deulaegon annaom

전자담배 간접흡연 디시 - jeonjadambae ganjeobheub-yeon disi

파이썬 입력값이 정수가 아니면 에러 출력하고 다시 입력받기 - paisseon iblyeoggabs-i jeongsuga animyeon eleo chullyeoghago dasi iblyeogbadgi

독수리 오형제 결말 - dogsuli ohyeongje gyeolmal

타이어 공기압 보는 법 - taieo gong-giab boneun beob

정화조 20 인용 - jeonghwajo 20 in-yong

교육청 태블릿 초기화 - gyoyugcheong taebeullis chogihwa

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의