본문 바로가기

HTML_CSS/CSS

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

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


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

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

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

 

'HTML_CSS > CSS' 카테고리의 다른 글

태그에 테두리를 만들어내는 border 속성  (0) 2021.06.20
CSS를 HTML에 적용시키는 방법  (0) 2021.06.20