[css] box-shadow / white-space / 말줄임

box-shadow

box-shadow: x-position y-position blur spread color | inset | initial | inherit

x-position - 가로 위치입니다. 양수 → 오른쪽, 음수 → 왼쪽에 그림자가 만들어집니다. (필수 값)

y-position - 세로 위치입니다. 양수 → 아래쪽, 음수 → 위쪽에 그림자가 만들어집니다. (필수 값)

blur - 그림자를 흐릿하게 만들어줍니다. 값이 클수록 더욱 흐려집니다.

spread - 양수면 그림자를 확장하고, 음수면 축소합니다.

inset - 원그림의 외부가 아니라 내부에서만 표현하라는 뜻입니다.

initial - 기본 값으로 설정합니다.

inherit - 부모 요소의 속성 값을 상속받습니다.

 

word-wrap

긴 텍스트를 강제로 끊어서 줄바꿈을 해주는 속성입니다. 

- normal : 글자가 길어도 끊어지지 않고 한 줄에 계속 표시합니다. (기본 값)

- break-word : 강제로 끊어서 줄바꿈합니다.

 

white-space

줄 바꿈, 들여 쓰기, 공백 처리 방식을 선택할 수 있다.

- normal : 공백이 여러 개여도 한 개로 처리합니다. (기본 값)

- nowrap : 공백이 여러 개여도 한개로 처리합니다. 텍스트가 넘어가더라고 한 줄로 표시합니다.

- pre : 공백을 있는 그대로 표시합니다. 줄 바꿈이 없으면 줄바꿈하지 않습니다.

- pre-wrap : 공백을 코드에 있는 그대로 표시합니다. 코드에 줄바꿈이 없어도 자동으로 줄 바꿈을 실행합니다.

- pre-line : 공백을 여러 개 넣어도 한 개로 처리합니다. 코드에 줄 바꿈이 없어도  자동으로 줄 바꿈을 실행합니다. 

 

text-overflow

글자가 지정한 공간을 넘어갈 경우 처리하는 방식을 설정해줄 수 있습니다.

- clip : 기본 값

- ellipsis : 말줄임표로 처리 / 부모 요소의 너비가 auto일 경우 적용할 수 없습니다.

- ingerit : 부모 요소와 동일합니다.

 

 

여러 줄 말줄임

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;  → 라인수 

-webkit-box-orient: vertical;

word-wrap:break-word;

 

* -webkit-line-clamp 속성의 경우, 웹킷 엔진을 사용하지 않는 브라우저의 경우 문제가 될 수 있으므로,

line-height 속성과 height 속성을 이용하여 높이를 계산하여 넣어줍니다. (height = line-height * 줄 수)