세이박스

자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용

웹프로그램

고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다.
이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 style display을 이용해서 적용해 보겠습니다.


1. 자바스크립트 소스

<script language="javascript">
<!--
function QnaShow(qna) {
 /* 질문 갯수 만큼 추가 해 줍니다 */
 document.all.qna1.style.display = "none";
 document.all.qna2.style.display = "none";
 document.all.qna3.style.display = "none";
 /* 요청한 답변을 보이기 처리 입니다 */
 var obj = eval("document.all." + qna);
 obj.style.display = "block";
}
//-->
</script>



2. 테이블 소스

<table>
 <!-- 질문 1 -->
 <tr>
  <td><a href="javascript:QnaShow('qna1')">질문1</a></td>
 </tr>
 <tr id="qna1" style="display:none;">
   <td>답변1</td>
 </tr>
 <!-- 질문 2 -->
 <tr>
  <td><a href="javascript:QnaShow('qna2')">질문2</a></td>
 </tr>
 <tr id="qna2" style="display:none;">
   <td>답변2</td>
 </tr>
 <!-- 질문 3 -->
 <tr>
  <td><a href="javascript:QnaShow('qna3')">질문3</a></td>
 </tr>
 <tr id="qna3" style="display:none;">
   <td>답변3</td>
 </tr>
</table>


3. 소스 설명 :
제목을 클릭시 자바스크립트 QnaShow() 함수를 호출합니다.
이때 함께 전달한 qna 값으로 어떤 질문을 클릭했는지 구분합니다.
먼저 모든 질문을 숨기기 처리합니다.
1번 질문을 본뒤에 2번 질문을 클릭시 1번 질문을 숨기고 2번 질문의 답변을 보여주기 위한 처리인데 일괄적으로 모든 질문의 답변을 숨긴뒤에 원하는 답변만 보여주는 처리 입니다.
열려있는 질문만 숨기기 코딩하면 좋겠지만 오히려 소스가 복잡해줄수 있으므로 질문추가시 자바스크립트 항목중 document.all.qna3.style.display = "none"; 이부분도 함께 추가해 줍니다.
숨기기 처리가 끝나면 var obj = eval("document.all." + qna); 에서 obj로 클릭한 질문의 답변 <tr> id값을 조합합니다.
그리고, obj.style.display = "block"; 에서 지정한 <tr> style의 display 값을 block 으로 적용해서 보이도록 합니다.
이와같은 적용으로 페이지를 다시 접속하지 않고도 보이기 또는 숨기기 적용이 됩니다.


 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

input 박스에 입력시 영문으로만 입력 되도록 하거나 한글로 선택 되도록 설정 ime-mode style

웹프로그램

로그인 또는 회원가입 할때 사용자로 부터 정보를 입력 받을 때, input 입력 박스를 활용하는데, 이때 사용자 키보드 설정 상태가 한글 또는 영문 상태에 따라 잘못된 값을 입력할 수 있어서 이를 방지 하기 위해 style의 ime-mode를 이용해서 제어 할 수 있습니다.

아이디 : <input type="text" name="login_id" value="" style="ime-mode:disabled">

위 예제는 아이디를 입력 받는 input 박스로써 style속성에 때문에 한글이 입력이 안되며 영문만 입력이 됩니다.
보통 자바스크립트로도 구현 가능하지만 이처럼 스타일을 이용해서 손쉽게 제어 할 수 있습니다.

다음은 ime-mode 옵션에 대한 설명 입니다.

style="ime-mode:auto"
- 현재 선택되어 있는 상태로 한/영중 선택

style="ime-mode:active"
- Default로 한글 선택 되는 모드

style="ime-mode:inactive"
- Default로 영문 선택 되는 모드

style="ime-mode:disabled"
- 무조건 영문만 입력되도록 하는 모드 (한글 입력 안됨)


 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

input 박스에 입력시 영문으로만 입력 되도록 하거나 한글로 선택 되도록 설정 ime-mode style

웹프로그램

로그인 또는 회원가입 할때 사용자로 부터 정보를 입력 받을 때, input 입력 박스를 활용하는데, 이때 사용자 키보드 설정 상태가 한글 또는 영문 상태에 따라 잘못된 값을 입력할 수 있어서 이를 방지 하기 위해 style의 ime-mode를 이용해서 제어 할 수 있습니다.

아이디 : <input type="text" name="login_id" value="" style="ime-mode:disabled">


위 예제는 아이디를 입력 받는 input 박스로써 style속성에 때문에 한글이 입력이 안되며 영문만 입력이 됩니다.
보통 자바스크립트로도 구현 가능하지만 이처럼 스타일을 이용해서 손쉽게 제어 할 수 있습니다.

다음은 ime-mode 옵션에 대한 설명 입니다.

style="ime-mode:auto"
- 현재 선택되어 있는 상태로 한/영중 선택

style="ime-mode:active"
- Default로 한글 선택 되는 모드

style="ime-mode:inactive"
- Default로 영문 선택 되는 모드

style="ime-mode:disabled"
- 무조건 영문만 입력되도록 하는 모드 (한글 입력 안됨)


 ▶ 최신영화, 최신 미국드라마 무료 다운로드... 

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

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

IE 8.0에서 iframe 스크롤 생기는 문제 body style로 스크롤바 없애기

웹프로그램

사용자 삽입 이미지

iframe으로 광고 페이지를 삽입할 때  스크롤바 없애기

<iframe id="xxx" src="zzz" width="100" height="200" scrolling="0" frameborder="0" vspace="0" hspace="0"></iframe>

IE 8.0 에서는 위처럼 하더라도 iframe src 페이지 내용이 100*200을 넘어 버리면 스크롤이 생겨버립니다.

해결 방법은 src 페이지의 body style을 변경 해야합니다.

<body style="overflow-x:hidden; overflow-y:hidden;">


[옵션 설명]

- hidden : 스크롤 없애기

- auto : 내용이 지정된 사이즈 이상일때 자동으로 스크롤 생성

- visible : 사이즈에 관계 없이 내용 모두 보여준다

- scroll : 시작부터 스크롤바 생김



위 글은 세이박스(http://www.saybox.co.kr) 에서 작성한 글입니다. 퍼가실땐 출처를 남겨 주세요!

<HR> 태그 사용해서 점선 표시 하기

웹프로그램

* HR 태그에 스타일을 적용해서 점선 표시 가능합니다.

<hr style="color:#999999;border-style:dotted">

color : 점선 색상

border-style : 점선 스타일 지정 (dotted : 점선)