[CSS] textarea 입력된 데이타를 출력에서 엔터가 줄바꿈으로 보이기 > 기술자료 | 해피정닷컴

[CSS] textarea 입력된 데이타를 출력에서 엔터가 줄바꿈으로 보이기 > 기술자료

본문 바로가기

사이트 내 전체검색

[CSS] textarea 입력된 데이타를 출력에서 엔터가 줄바꿈으로 보이기 > 기술자료

HTML [CSS] textarea 입력된 데이타를 출력에서 엔터가 줄바꿈으로 보이기

페이지 정보


본문

textarea 내용에 엔터로 표시된 것이 줄바꿈 처리되서 보이게 하는 방법입니다.
html 문서로 해석될때는 의미없지만,  textarea 내에서 보일때 줄바꿈 된 형태로 보이도록 합니다.

입력창에서의 모습
<textarea style="white-space: pre-line;">내용1
내용2
내용3</textarea>

브라우저에서 해석된 모습
내용1
내용2
내용3


1. <textarea> 사용하기


2. white-space 스타일을 사용하기
스타일 시트(CSS)를 사용해서 개행과 공백등이 원래대로 보이도록 하는 방법
<div style="white-space:pre;">가나다
라마바</div>

- normal : HTML의 기본 값입니다. 여러개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 Wrap 됩니다.
- nowrap : normal과 같은데 긴행이 wrap 되지 않습니다. 글을 포함한 컨테이너를 넘어서 표시됩니다.
- pre : 여러개의 공백과 개행문자가 모두 표현됩니다. <pre> 태그와 같이 동작합니다. 긴행은 개행문자에서만 개항이 되고, wrap  되지 않습니다.
- pre-line : 여러개의 공백은 하나로 표시되고, 긴 행은 필요시 wrap 됩니다. 개행문자를 만나도 개행됩니다.
- pre-wrap : 여러개의 공백과 개행문자가 모두 보존됩니다. 개행문자외 에서도 필요시 wrap  됩니다.


3. <pre> 태그를 사용하기
<pre>가나다
라마바</pre>



참고자료
https://www.phychode.com/sprt/blog/sprtBlogPost.pem?blogSeq=1116
https://offbyone.tistory.com/326

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 28 페이지
  • RSS
기술자료 목록
2094
MSSQL   19246  2017-10-29 23:12 ~ 2017-10-30 00:10  
2093
MySQL   29267  2017-10-26 02:43 ~ 2018-02-09 10:09  
2092
MySQL   20109  2017-10-29 22:29 ~ 2017-11-30 05:36  
2091
MySQL   15118  2017-10-29 22:00 ~ 2017-11-03 11:21  
2090
PHP   25877  2017-10-25 14:41 ~ 2017-10-25 22:44  
2089
그누보드   13282  2017-10-22 03:28 ~ 2022-04-15 19:50  
2088
XML   13085  2017-10-22 03:11  
2087
그누보드   12766  2017-10-21 09:33 ~ 2018-01-18 17:33  
2086
Search   11998  2017-10-20 00:53 ~ 2017-11-03 16:10  
2085
Search   9972  2017-10-19 11:01  
2084
영카트   10691  2017-10-18 09:59  
2083
그누보드   12683  2017-10-10 15:50  
2082
그누보드   10705  2017-10-10 13:55  
2081
PHP   11699  2017-10-10 01:52  
2080
호스팅   23489  2017-10-02 11:00 ~ 2017-10-06 00:00  
2079
그누보드   10451  2017-09-29 21:04 ~ 2017-09-30 00:00  
2078
그누보드   14586  2017-09-28 14:22 ~ 2022-04-15 19:48  
열람
HTML   15669  2017-09-28 12:23 ~ 2019-10-10 23:30  
2076
일반   27841  2017-09-26 21:42 ~ 2017-10-20 00:00  
2075
그누보드   10950  2017-09-26 11:09 ~ 2018-08-17 21:12  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.