개발 언어/CSS (2) 썸네일형 리스트형 개행 문자가 포함된 문자열을 화면에 그대로 나타내기 우리가 DB에서 주로 가져오는 값의 타입은 문자열입니다. 만약, DB에서 가져온 문자열에 \n, \t 등의 문자가 포함된 경우에 우리는 이 포맷을 그대로 화면에 나타내고 싶은 경우가 있습니다. 그럴 때, 사용할 수 있는 속성이 white-space: pre-wrap입니다. white-space는 공백 문자를 어떻게 처리할 것인지를 지정하는 속성입니다. css가 적용되지 않을 때 우선적으로 확인해야 할 것 비동기적으로 html을 화면에 뿌리는 것은 웹 개발자라면 필연적으로 생성해야 합니다. 하지만 이렇게 비동기적인 html을 화면에 뿌릴 때 css가 적용되지 않는 경우가 있습니다. 제가 겪은 예로는, 용어 사전 관련하여 초성 검색시 리스트를 화면에 뿌려야 하는데 'ㅅ'으로 초성 검색을 할 때마다 css가 적용되지 않았습니다. 원인은 영어, 숫자였습니다. 영어, 숫자가 길어지면서 width를 무시하는 것입니다. 그래서 word-break: break-all 속성을 넣어줌으로써 해결할 수 있었습니다. 이렇듯 화면에 css 속성이 적용되지 않을 때에는 우선적으로 영어나 숫자를 확인하는 것을 추천합니다. 이전 1 다음