CSS 텍스트 스타일: text-shadow white-space letter-spacing word-spacing

CSS 텍스트 스타일: text-shadow white-space letter-spacing word-spacing

오늘은 텍스트에 그림자 효과를 주고, 텍스트의 간격과 공백을 조절해보겠습니다.

 

 

1. text-shadow

  - text-shadow 속성을 사용하면 텍스트에 그림자 효과를 줄 수 있습니다.

  - 선택자 { text-shaodw: 가로거리 세로거리 번짐정도 색상; }와 같은 형식으로 사용합니다.

  - 가로거리는 필수로 입력해야하는 값입니다. 텍스트부터 그림자까지의 가로 거리를 의미합니다. 양수 값은 글자 오른쪽으로 그림자를 만들고, 음수 값은 글자 왼쪽으로 그림자를 만듭니다.

  - 세로거리는 필수로 입력해야하는 값입니다. 텍스트로부터 그림자까지의 세로 거리를 의미합니다. 양수 값은 글자 아래쪽으로 그림자를 만들고, 음수 값은 글자 위쪽으로 그림자를 만듭니다.

  - 위 예시에서 '그림자1'은 글자 오른쪽 2px, 아래쪽 2px 위치에 그림자를 만든 것입니다. 그런데 마치 글자 2개가 겹쳐저 있는 것처럼 보입니다. 그 이유는 그림자에 번짐 정도를 입력해주지 않았기 때문입니다.

  - 번짐정도는 그림자가 번지는 정도를 의미합니다. 양수 값을 입력하면 그림자가 모든 방향으로 퍼져나가 크고 흐릿한 그림자가 만들어집니다. 음수 값을 입력하면 그림자가 모든 방향으로 축소되어 보입니다. 미입력시 0으로 인식하며, 필수 입력값은 아닙니다.

  - 위 예시에서 '그림자2'는 글자 오른쪽 2px, 아래쪽 2px 위치에 2px만큼 번지는 그림자를 만든 것입니다. '그림자1'과는 달리 번짐 정도를 입력해 더욱 자연스러운 그림자를 만든 것을 알 수 있습니다.

  - 색상은 그림자의 색상을 의미합니다. 미입력시 현재 글자의 색상을 따라갑니다. 필수 입력값은 아닙니다.

  - 위 예시에서 '그림자3'은 글자 오른쪽 2px, 아래쪽 2px 위치에 2px만큼 번지는 주황색 그림자를 만든 것입니다.

  - 쉼표(,)를 사용해 한 개의 텍스트에 여러 개의 그림자를 입력해줄 수도 있습니다.

  - 위 예시에서 '그림자4'는 '그림자3'에 더해 오른쪽 4px, 아래쪽 4px 위치에 4px만큼 번지는 초록색 그림자를 하나 더 만든 것입니다.

 

 

2. white-space

  - white-space 속성을 사용하면 공백을 어떻게 처리할지 지정해줄 수 있습니다.

  - 선택자 { white-space: 속성값; }과 같은 형식으로 사용합니다.

  - 속성값 normal은 여러 개의 공백을 하나로 표시하고, 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다. white-space 속성을 지정해주지 않을 시 normal이 기본값이 됩니다.

  - 위 예시에서 텍스트 'normal'이 normal 속성으로 표시되었습니다.

  - 속성값 nowrap은 여러 개의 공백을 하나로 표시하고, 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시합니다. 영역 너비를 넘어가는 부분은 스트롤바를 넘겨 확인해야합니다.

  - 위 예시에서 텍스트 'nowrap'이 nowrap 속성으로 표시되었습니다.

  - 속성값 pre는 여러 개의 공백을 그대로 표시하고, 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시합니다. 영역 너비를 넘어가는 부분은 스트롤바를 넘겨 확인해야합니다.

  - 위 예시에서 텍스트 'pre'가 pre 속성으로 표시되었습니다.

  - 속성값 pre-line은 여러 개의 공백을 하나로 표시하고, 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다.

  - 위 예시에서 텍스트 'pre-line'이 pre-line 속성으로 표시되었습니다.

  - 속성값 pre-wrap은 여러 개의 공백을 그대로 표시하고, 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다.

  - 위 예시에서 텍스트 'pre-wrap'이 pre-wrap 속성으로 표시되었습니다.

 

 

3. letter-spacing word-spacing

  - letter-spacing 속성을 사용하면 낱글자 사이의 간격을 조절할 수 있습니다.

  - 위 예시에서 텍스트 'Letter Spacing'이 낱글자 사이의 간격을 1em으로 띄어 표시한 것입니다.

  - word-spacing 속성을 사용하면 단어와 단어 사이의 간격을 조절할 수 있습니다.

  - 위 예시에서 텍스트 'Word Spacing'이 단어와 단어 사이의 간격을 1em으로 띄어 표시한 것입니다.

  - 이와 같이 letter-spacing과 word-spacing은 주로 'em'을 단위로 사용합니다.

  - em이 부모 요소 글자 M(대문자)의 너비를 기준으로 하는 상대 크기이기 때문에, 글꼴에 맞추어 자동으로 간격을 맞춰주기 때문입니다.