css로 문자열 다루기(줄바꿈, 말줄임표 등등)
배경 css로 생각보다 줄바꿈이나 공백문자를 처리해야 할 경우가 많다. 그리고 맨날 까먹는다.... 그래서 맨날 구글링하다가 이제는 정리해야겠다 싶어서 정리를 한다. 사실 더 빨리 했어야되는데 좀 게을렀다. word-break CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. normal 기본 줄 바꿈 규칙을 사용합니다. break-all 오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외) keep-all 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 normal과 동일합니다. break-word 실제 overflow-wrap 속성에 상관하지..
float 해제하기(float clear하기)(가상클래스와 가상요소)
float을 처음에 써보신 분들이라면 float다음에 태그들의 위치가 이상하게 나오는 것을 경험해 보셨을 겁니다. float다음에 정상적으로 작동하게 하는 방법이 여러가지 있지만 지금 가장 추천드리는 방법은 가상요소 ::after를 사용하는 것입니다. 가상클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. -- 아마 여러분들이 인터넷을 하면서 메뉴에 마우스를 올렸을 때 메뉴 스타일이 바뀌는 것을 본적있을 겁니다. 아래 사진은 제 블로그 메뉴인데 javascript, nodejs에 마우스를 올려놓자 밑줄이 쳐졌습니다. 이때 사용한 것이 가상 클래스입니다. 클래스 뒤에 :hover를 붙인다음 스타일을 지정하면 마우스를 올려놨을 때 스타일이 변경됩니다. 가상요소는 선택자에..