코드로그 코드로그

CSS

• 단어 줄바꿈 CSS. word-break

  CSS 2021. 1. 20. 07:00

  word-break의 값으로 normal, keep-all, break-all이 올 수 있다. 언어별로 normal과 keep-all의 결과가 다르다. 우선 셋의 값은 상자에 비해 줄이 길때 단어들을 다음문장으로 내려보내는데 차이가 있다. break-all은 단어형태를 잘게 부순다. 가장 작은 단위의 문자를 내려보내다 보니 상자크기를 다채우는 편이라 break-all은 깔끔한 디자인을 할 수 있다. keep-all은 단어형태를 지킨다. 심지어 하이픈으로 연결된 단어도 말이다. 그래서 단어 통째로 내려보내기 때문에 break-all에 비해 우측이 가득 차있지 않아 들쑥날쑥하지만, 단어의 의미를 잃지않아 의미전달에 있어서 중요할땐 가독성이 높은 keep-all이 좋다. normal은 기본값인데 한국어는 기본..

  Read More
• 말줄임 생략부호 CSS

  CSS 2021. 1. 19. 10:37

  white-space(여백)라는 속성이 있다. 값으로 no-wrap, normal, pre가 있다. no-wrap : 부모의 width값이 어떻든 no-wrap(감싸지 않는다.) 즉, 부모의 박스나 윈도우창을 넘어서 글씨는 쭉- 일렬로 나타난다. normal : 기본값. 부모의 width값에 줄바꿈되어 안착된다. 왼도우창을 줄이면 그에맞에 또, 줄바꿈되어 안착된다. pre : 코딩할때의 줄바꿈 수를 그대로 적용하고 no-wrap규칙을 따름. pre-line, pre-wrap : 코딩할때의 줄바꿈 수를 그대로 적용하고 normal규칙을 따름. 보통 줄바꿈 처리되지않게 no-wrap을 쓰면서 overflow:hidden, : 설정한 width값 이상의 글씨는 보이지 않게하고 text-overflow:elli..

  Read More