CSS - 텍스트에 테두리/외곽선 그리는 두가지 방법 -webkit-text-stroke, text-shadow

닌니디자인 CSS 썸네일

-webkit-text-stroke

텍스트에 테두리 선을 추가하는 속성. 텍스트 안쪽으로 테두리가 추가된다. 간단하게 테두리 너비와 색상만 지정해주면 된다. 그렇기 때문에 다양한 효과를 구현하기에는 어려움이 있다. 하지만 테두리에만 색상이 추가되기 때문에 텍스트 색상을 투명하게 바꿔주면 테두리만 있는 텍스트 디자인을 할 수가 있다. 

h1 {
    -webkit-text-stroke: 1px red;
    color: transparent; 
}

 

예시

텍스트 테두리

ABCDEFG

 

텍스트 테두리만

ABCDEFG

 

 

 

---

 

text-shadow

텍스트에 그림자를 추가하는 속성. 기본값은 텍스트 바깥쪽으로 그림자를 추가하지만 마이너스(-) 값을 이용하면 텍스트 안쪽으로 그림자를 추가할 수 있다. 입체적인 느낌이나 강조효과를 줄 수 있다.

/* 텍스트 외곽 테두리 */
h1 {
    text-shadow: 2px 2px 4px red;
}

/* 텍스트 내곽 테두리 */
h1 {
    text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
}

 

예시

텍스트 외곽 테두리

ABCDEFG

 

텍스트 내곽 테두리

ABCDEFG

 

입체그림자

ABCDEFG