세이박스

[자바스크립트] 문자 자르기 및 특정 문자로 분리하기

웹프로그램

자바스크립트에서 문자를 자르거나 분리하기 위한 방법 입니다.

1. 문자를 특정 위치로 부터 지정한 길이 만큼 자리기
함수 : substr()

var a = "123456789";
var b = a.substr(0,3);
alert(b); //결과 : 123

var c = a.substr(5,2);
alert(c); //결과 : 67

php의 경우 substr(변수,자를위치,자를갯수)이미지만 자바스크립트에서는 변수.substr(자를위치,자를갯수) 방식으로 사용합니다.
자를위치는 문자열 처음이 1이 아닌 0으로 되어 있습니다. 즉, 0,1,2.. 이렇게 시작하니 착오 없으시길 바랍니다.


2. 문자열에서 특정 문자 기준으로 자르기
함수 : split()
적용예 :

var a = "010-1111-2222";
var b = a.split("-");

alert(b[0]); //결과: 010
alert(b[1]); //결과: 1111
alert(b[2]); //결과: 2222

전화번호를 예로 "-" 기준으로 잘라서 저장해 보았습니다.
"-" 는 제거되며 "-"기준으로 각 값들이 배열로 저장 됩니다.

  최신영화 보러가기... 

삼성 T*OMNIA2용 문서 뷰어 (M710, M715)

하드웨어
사용자 삽입 이미지
사용자 삽입 이미지

T*OMNIA2용 문서 뷰어입니다.

※ 문서뷰어 기능
  - 하단버튼을 이용해 맨앞으로, 앞으로, 뒤로, 맨뒤로 이동할 수 있습니다.
  - 찾기: 문서에서 문자 또는 문자열을 찾을 수 있습니다.
  - 속성: 문서 정보를 보여줍니다.
  - 열기: 문서파일 탐색기를 제공하며 문서를 열 수 있습니다.
  - 슬라이드쇼: 초기화면 우측하단 버튼을 이용해 문서에 대한 슬라이드 쇼를 제공합니다.
  - OneFingerZoom: 확대모드에서 OneFingerZoom기능을 지원합니다.
  - Rotation: 휴대폰의 각도에 따라 문서 Display화면의 Rotation이 제공됩니다.

※ 문서뷰어가 지원하는 파일
  - 워드 문서(.doc)
  - 엑셀 문서(.xls .xlsx)
  - 파워포인트 문서(.ppt)
  - 한글 문서(.hwp)
  - Acrobat 문서(.pdf)
  - 텍스트 문서(.txt)

※ 설치방법
ActiveSync(Vista는 WMDC 를 이용하여 PC와 휴대폰을 연결합니다. 휴대폰에 설치용 CAB파일을 복사해
넣은 후, 휴대폰의 파일탐색기에서 해당 CAB파일을 실행 후 설치 경로를 장치로 선택 하시면 설치가
이루어집니다.
출처 : 삼성모바일닷컴

text-overflow 이용한 텍스트 길이 제한하기

웹프로그램
게시판 리스트의 경우 제목이 길어지는 경우 특정 길이 이상은 자르고 "..." 붙이는거 많이 보셨을겁니다.
보통 php의 경우 substr() 함수를 이용하거나 left() 함수등 언어에 따라 다양하게 활용하는데
style로 간단하게 적용할 수 있습니다.
text-overflow 옵션을 활용하는 것입니다.

ellipsis
<nobr style="text-overflow:ellipsis;overflow:hidden;width:300px">내용</nobr>

ellipsis-word
<nobr style="text-overflow-mode:ellipsis-word ;overflow:hidden;white-space:nowrap;width:200px;">내용</nobr>

clip
<nobr style="text-overflow:clip;overflow:hidden;width:300px;">내용</nobr>

inherit
<nobr style="text-overflow:inherit;overflow:hidden;width:300px;">내용</nobr>

링크에적용1
<nobr style="text-overflow:ellipsis;overflow:hidden;width=300px;cursor:Hand">내용</nobr>

링크에적용2
<nobr class="nobr" style="width:120px;"><a href="javascript:goView(<%=BBS_SEQ%>);">내용</a></nobr>

테이블에 적용
<table width='200' border='0' cellpadding='0' cellspacing="0" style='table-layout:fixed;' cellspace='0'><tr>
<td><nobr style="text-overflow:ellipsis;width:200px;overflow:hidden;">내용</nobr></td>
</tr></table>

------------------------------------------------------------------------------------
#example1 {text-overflow-mode: clip; width: 200px; overflow:hidden;white-space : nowrap; }
#example2 {text-overflow-mode: ellipsis; width: 200px; overflow:hidden;white-space : nowrap; }
#example3 {text-overflow-mode: ellipsis-word; width: 200px; overflow:hidden;white-space : nowrap; }
------------------------------------------------------------------------------------


white-space :
요소 안에서의 띄어쓰기와 같은 빈 공간을 조절할 때 사용합니다.

white-space에 사용되는 값
normal : 줄 바꿈 디볼트 값을 유지합니다.
pre : 문서 소스에 서식을 할당해서 문서가 표시되게 합니다.
nowrap : 요소 내에서 줄바꿈이 되지 않습니다.

예제)
H1 {white-space: nowrap}
H1에서의 줄바꿈을 하지 않도록 설정합니다.
 

[style] 세이박스 메인 탑메뉴 처럼 메뉴 텍스트(text)에 그림자 효과 주기

웹프로그램
사용자 삽입 이미지
텍스트 메뉴에 그림자 스타일 효과 주기

filter:shadow() 를 이용하면 됩니다.

예) 흰색 메뉴 글자에 검정색 그림자 1px 효과 입니다.
<span style="color:#FFFFFF;filter:shadow(color=#000000,direction=135,strength=1);">메뉴1</span>

위 예제의 shadow 옵션 설명
color : 그림자 색상
direction : 그림자 각도
strength : 그림자 길이

세이박스 메인 탑메뉴에 그림자 효과를 주기위해 옵션을 여기 저기 찾아 보니 원하는 효과가 없었습니다.
1픽셀만큰 그림자 효과를 주고 싶었는데 알고보니 세이박스 게시글에 strength 옵션에 대해 제가 과거에 올려 놨었더군요.

http://www.saybox.co.kr/bbs/board.php?bo_table=board06&wr_id=21

먼곳에서 찾는다고 고생했다는 ㅋㅋ ^^;

CSS 텍스트 범위 벗어나면 숨기고 ... 붙이기

웹프로그램
<div style="width:100;text-overflow:ellipsis;overflow:hidden">abcdefghight1234567890</div>

결과 :
abcdefghig...

IE 6.0 이상에서 적용되며 div 에서 사용시 폭을 벗어난 글자는 숨기고 "..." 처리 해줌.
굿이 일일이 php 에서 길이계산후 "..." 처리 안해도 손쉽게 적용 가능

CSS style 로 이미지 위에 텍스트 표시 하기

웹프로그램
<style>
.korea_medalx {width:548px;height:162px;background:url(ranking.gif) no-repeat;font-size:11px;font-family:돋움,Dotum,AppleGothic,serif; color:#666;position:relative;}
.korea_medalx .gold  {position:absolute;top:108px;left:184px;font:bold 16px Verdana; color:#f60;}
.korea_medalx .silver  {position:absolute;top:108px;left:247px;font:bold 16px Verdana; color:#353b3f;}
.korea_medalx .bronze  {position:absolute;top:108px;left:308px;font:bold 16px Verdana; color:#ba5af14;}
.korea_medalx .total  {position:absolute;top:110px;left:385px;font:bold 16px Verdana; color:#ff7062;}
.korea_medalx .rank  {position:absolute;top:110px;left:490px;font:bold 16px Verdana; color:#FF7062;}
.korea_medalx .link1  {position:absolute;top:138px;left:332px;width:93px;}
.korea_medalx .link2  {position:absolute;top:138px;left:446px;width:93px;}
</style>

<div class="korea_medalx">
<div class="gold">0</div>
<div class="silver">0</div>
<div class="bronze">0</div>
<div class="total">0</div>
<div class="rank">-</div>
<div class="link1"><a href="#"><img src="link1.gif"></a></div>
<div class="link2"><a href="#"><img src="link2.gif"></a></div>
</div>
 
ranking.gif 이미지를 배경 이미지로 표시하고 그 위에 position으로 텍스트 및 이미지를 표시 할 수 있습니다.

CSS 스타일시트 기본 속성

웹프로그램
ㅇ 텍스트(text) 관련 옵션
font-size:9pt; //폰트크기
font-weight:bold; //폰트 볼드
text-align:center; //폰트 정렬 (left, center, right)
color:#FFFF00; //폰트컬러
word-spacing:5pt; //단어간 간격 조절
letter-spacing:7pt; //자간 조절
line-height:200%; //줄간격 조절
(%,px,pt 등등 사용가능)

CSS 텍스트(text) 관련 옵션

웹프로그램
font-size:9pt; //폰트크기
 
font-weight:bold; //폰트 볼드
 
text-align:center; //폰트 정렬 (left, center, right)
 
color:#FFFF00; //폰트컬러
 
word-spacing:5pt; //단어간 간격 조절
 
letter-spacing:7pt; //자간 조절
 
line-height:200%; //줄간격 조절
 
(%,px,pt 등등 사용가능)