줄바꿈 태그 관련 문의 드립니다.
본문
반응형으로 텍스트를 작성하다보면 <br>이나 <p> 가 아니라 접속기기의 좌우폭이 좁아지면서 생기는 줄바꿈이 있습니다.
예를들어,
"SIR.kr 그누보드는 현존하는 최고의 게시판 CMS 프로그램 입니다." 라고 된 문장이
반응형에서 가로폭이 줄어들면
"SIR.kr 그누보드는 현존하는 최고의 게시판
CMS 프로그램 입니다."
이런식으로 폭이 좁아져서 아래줄로 내려가 보이게 될때, 줄바꿈 간격을 설정하는 방법이 있을까요?
위의 경우엔 line-height 로 설정한 값보다 더 폭이 더 좁게 보이게 하려고 합니다.
이 부분을 따로 설정하는 방법이 있을까요?
답변 4
안녕하세요.
CSS에서 아래와 같이 조정을 해보시는건 어떨까요?
/* 줄바꿈을 하지 않도록 설정 */
word-break: keep-all;
/* 모든 글자에서 줄바꿈을 하도록 설정 */
word-break: break-all;
줄바꿈에 따라 별도의 line-height 를 적용하는 방법은 없는 걸로 알고 있습니다.
다만, 어차피 줄바꿈이 될때 line-height를 적용하고자 하는 거라면 그냥 line-height를 좁게 적용하는 것과 크게 다르지 않을 것 같습니다. 줄바꿈이 되지 않을 때 line-height를 더 크게 보이려면, padding 으로 조절을 하면 되지 않을까 싶네요.
그누보드는 p 태그의 margin 을 없애버렸기 때문에 문단 사이의 여백이 제거되어 문단의 구분과 줄바꿈의 구분이 되지 않습니다.
보통 p 태그는 line-height 는 물론 p 태그 사이에 상하 margin 이 적용되기 때문에 원하시는 것처럼 구분이 되지만 그누보드는 이 여백을 없애버렸기 때문입니다.
컨텐츠 유형에 따라 해결 방법은 달라질 수 있는데요. 게시판 본문 등의 컨텐츠라고 가정한다면 p 태그에 다시 상하 margin 을 추가하는 것으로 해결할 수 있습니다.
보통은 p태그에 margin이 적용되어있으므로 워드프레스와 같은 CMS는 p 태그로 구분된 문단 사이는 line-height 와 p 태그의 margin으로 좀 더 넓게 구분되고, 브라우저 폭에 맞춰 자동 개행된 부분은 line-height 만 적용되므로 서로 구분이 됩니다.
적용 시 필요한 영역(예를 들면, 게시판 본문 영역)으로 한정해 p 태그에 상하 margin 을 추가하면 될 것 같네요.
다만, 게시판 글 내용이라면 강제 개행을... 그누보드 에디터들에서는 p 태그로 개행을 처리하므로 p 태그에 margin을 넣으면 개행을 자주하는 글쓰기 방식의 글에는 불필요해보이는 과도한 여백이 들어간 것처럼 보이게 되므로 컨텐츠에 따라 특정 게시판이나 특정 페이지만으로 더욱 한정하여 적용해야할 수도 있습니다.
이게 다 컨텐츠 영역까지 p 태그의 margin을 제거한 탓에 발생하는 문제입니다.
그냥 글자수를 지정 해서 짤라서 넣으면 됩니다
