글자에 테두리, 그림자 넣기

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

---

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

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

그 중, 글씨를 제어하는 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