HTML) 줄 바꿈 금지, 강제 줄 바꿈_div 줄 바꿈 금지

회사에서 수습 프로젝트가 끝나고 업무보조로 선배가 개발중인 프로젝트의 웹페이지 스타일 입히는 것을 일부 맡게 되었다. 웹은 웹해킹만 해봤지 프론트 개발 경험은 전무해서 하나하나 찾아가며 공부하고 익히며 진행했다.

 

일부 영역에 스타일을 입히기 위해 <div></div> 태그를 사용하였는데  자꾸 의도치 않은 줄바꿈이 생기는 거다.

그 이유는 아래와 같다.

 

div의 display 기본 설정은 block 이기 때문

div 태그와 함게 많이 쓰이는 <span></span> 태그도 있는데 둘의 차이점은

div의 display는 block, span은 기본 inline

 

따라서 div를 사용 하는데 줄바꿈을 금지 하기 위해서는 아래와 같이 해주면 된다. 

<div style="display:inline;"></div>

 

만약 div에 크기 지정을 해줄 때에는 inline-block 옵션을 사용해야 한다. inline옵션에서는 크기 지정을 할 수 없기 때문이다.

<div style="width:300px; height:200px; display:inline-block;"></div>

 

 

+) div 내의 텍스트 강제 줄바꿈/ 줄바꿈 금지

div내의 텍스트를 강제 줄바꿈이 필요하거나 금지를 해야할 경우가 있다. 그럴 경우에는 아래와 같이 해주면 된다. 

 

|강제 줄바꿈

<div style="width:가로; height:세로; overflow:hiddlen; white-space:nowrap;">줄 바꿈 금지할 내용</div>
<div style="width:가로; height:세로; overflow:hiddlen; word-break:break-all;">줄바꿈할 내용</div>