웹페이지에 여러 줄의 텍스트를 보여줄 경우 줄바꿈 처리가 필요합니다. 이 경우 잘 알고 있는 word-break, word-wrap css 속성이 사용되죠~ 그런데 만약 알파벳으로 사용되는 경우? css를 사용하여 줄바꿈 처리를 하이픈으로 처리할 수 있습니다.# css를 사용하여 긴 텍스트 하이픈 처리 방법, hyphens텍스트가 매우 긴 경우 줄바꿈 처리가 필요합니다. 여러가지 방법이 있지만 하이픈(hyphens)으로 처리하는 방법도 사용할 수 있습니다. 어떻게하면 하이픈 처리가 가능할까요? 그 전에 줄바꿈을 위해서 어떤 방법들이 사용되는지 간략하게 알아봅니다. 먼...
자바스크립트에서 줄바꿈을 바꾸는 방법에 대하여 알아봅니다. 만약 줄바꿈된 텍스트를 <br>태그로 변경하거나 반대로 <br>태그를 줄바꿈으로 변경하려면 어떻게해야할까요? 아래에서 자세히 알아보겠습니다.# 줄바꿈을 br로 바꾸는 경우는? 언제 필요한가<textarea> 태그를 사용하여 입력받은 값의 줄바꿈(white spaces)은 <br>태그가 아닌 줄바꿈 코드로 표시됩니다. 만약 서버에 저장할 경우 database에 그대로 저장할 수 있지만 대부분 <br>태그로 변경하여 저장하는 방법을 많이 사용합니다. 이런 경우...
JSON 데이터를 만들어 ajax로 불러오려면 JSON안에 줄바꿈처리가 있어서 에러가 발생합니다. 줄바꿈을 제거하기 위해서 존재하는 여러가지 방법들을 아래와 같이 처리해보았습니다.우선 해결가능하다고 찾은 대부분의 내용은 크게 아래입니다.i. nl2brii. str_replace('rn', '', $string)iii. stripslashes 또는 stripcslashes 이후 nl2br문제는 위 방법으로도 해결되지 않습니다. 여러가지 시도해 보았으나절대 해결되지 않는 경우 같은데... php에서 해결할 수 없는 문제인 것 같아 고민입니다...해결방법이 있...
브라우저에서 텍스트에 생략 기호를 적용하여 원하는 라인까지만 노출하는 방법을 알아봅니다. 어떻게 하면 가능할까요?이때 -webkit-line-clamp 속성을 사용하는 방법이 있습니다. -webkit-line-clamp의 값만큼 해당하는 라인까지만 노출하고 이 후의 텍스트 라인은 ...으로 바뀌어 표시됩니다. 아래처럼 사용합니다.-webkit-line-clamp: 5이때 함께 필요한 css 프로퍼티들이 있는데 overflow, text-overflow, -webkit-box-orient 등입니다. 값은 아래에서 참고하세요.# 멀티라인 텍스트에서 원하는 줄까지만 노출,...
자바스크립트를 비롯해 프로그래밍 언어에서의 조건문 사용은 그 비중이 매우 높다. 조건이 다양해 질수록 해당하는 조건문의 길이가 길어지게 되는데 길어진 조건문은 각각의 조건들을 이해하기가 힘들어 가독성이 떨어지고 유지보수도 어려울 것이다.이런 문제를 해결하기 위해서는 각각의 조건들을 줄바꿈하여 나타내야하는데 그 방법이 다양할 수 있으며 각자 장단점이 있을 것이다. 아래는 다양한 방법의 조건식을 줄바꿈한 예들이다.! 조건문 보기좋게 줄바꿈하는 방법아래 예제는 자주 사용되는 방법 3가지를 나열하였다. 순서대로 보면...i. 줄바꿈 없이 나타내기ii. 조건 하나씩 줄바꿈하여...
글을 작성하는 경우 텍스트의 일부가 영역을 넘어가게되면 이를 해결하기 위해 줄바꿈, 랩핑(wrapping)이 필요합니다. 이와 관련된 다양한 방법들이 존재하며 css에도 랩핑과 관련된 다양한 속성이 존재합니다. 아래는 이와 관련된 속성을 알아보고 예제를 통해 배워보도록 하겠습니다.! 알아둘 점시작에 앞서 우리는 줄바꿈에 쓰이는 세 가지 속성을 가장 많이 볼 수 있습니다.word-wrapword-breakoverflow-wrap여기서 가장 많이 쓰이던 줄바꿈, 랩핑 속성이 예전에는 단연 word-wrap이었다면 이제는 word-break가 사용됩니다. 그 이유는...w...
Notepad++는 무료이면서도 다양한 기능을 제공한다. 오늘 알아볼 내용은 자동으로 줄바꿈 되는 기능을 어떻게 해야하는지 알아보고자 한다. 줄여서 자동줄바꿈, Auto wrapping 기능이다.이 기능은 모두 알겠지만 혹시 모르는 분들을 위해 설명하자면...라인에 글자 수가 많아지면 코드상에서는 변동이 없느나 보여지는 화면단에서 일정 텍스트까지만 보여주고 이 이하 부터는 스크롤 없이 편집이 가능하도록 아래에 보여주는 기능이다.이 기능이 있고 없고의 차이는 코딩 시간에 지대한 영향을 미칠 수 있기 때문에 반드시 알아두면 좋은 팁이라고 할 수 있으니 꼭 참고하자!!# ...
안녕하세요^^ PRE 태그와 XMP 태그... 쓰이는 빈도가 아주 높은 것은 아니지만 알아두면 너무나도 편리하기 때문에 반드시 알아두어야 하는 코드 중 하나입니다! 이 태그를 이용해 할 수 있는 건 무엇이고 어떤 차이가 있는지 알아보도록 하겠습니다. 먼저 태그의 쓰임은 무엇일까요?[ 1 ] PRE 태그; PRE태그는 preformatted를 의미하며 이미 형식화 되었음을 뜻합니다. 즉, 개행 문자를 사용해 줄바꿈 할 필요가 없이 태그 안에 입력한 그대로 보여줄 수 입니다. Example <html><body><pre>...