티스토리 툴바

Daum
Tistory
로그인
블로그 이미지
웹표준에 대한 이야기들. 똑순아빠

카테고리

분류 전체보기 (10)
웹표준 (3)
기타 (0)
Total8,471
Today10
Yesterday5

달력

« » 2012.05
일 월 화 수 목 금 토
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

공지사항

날개에서 티스토리 RSS 가져오기 오류 수정.

분류없음 / 2009/01/31 17:46
설치형 메타 블로그인 날개가 있다.
유용하게 잘 쓰고 있었는데, 어느날부터인지 티스토리의 RSS를 읽어오지 못하는 현상이 발생했다.
티스토리에서 RSS처리방식이 조금 바뀌어서인 듯하여 이것저것 본 결과,
티스토리에서 RSS 요청이 오면 http status 302 Found 를 내어서 /rss 뒤에 이상한 값을 넣는 페이지로 넘기더라.
그 이상한 값 넣는 페이지에서 다시 /rss 로 넘겨서 제대로 처리를 하게 티스토리에서 페이지를 바꾼 것이다.
브라우저에서 보면 자동적으로 header 에서 처리를 해서 잘 보이게 되는데, 날개에서는 302 Found 에서 redirect 되는 페이지로 가지못하더라.
다행히 소스에는 다 구현이 되어있던데, 활성화가 안되어 있어서, 다음과 같이 활성화 시켜줬다.

/wing/Component/LZ.PHP.HTTPRequest.php 에서 4번째줄
        var $method = 'GET', $contentType = 'application/x-www-form-urlencoded', $content = '', $timeout = 10, $responseCookies = array(), $followPath = false, $pathToSave, $url, $eTag, $lastModified, $responseText;

에서
붉은색 글씨부분 $followPath = false 를 true 로 해주니 잘 작동이 되었다.

참조하시길.
Posted by 똑순아빠
트랙백 0, | 댓글 0

UTF-8 의 BOM 을 한꺼번에 바꾸는 java 코드.

분류없음 / 2008/08/25 14:28
리눅스 계열에서는 BOM 때문에 HTML이나 JSP 코드가 깨져서 나오는 경우가 많다.
한꺼번에 BOM을 삭제해주는 코드를 찾아봤으나 실패하고 직접 만들었다.
참고가 되길.

public void fncBomDelete(File directory) {
  try {
      for ( int i = 0; i < directory.listFiles().length; i++ ) {
          File tempFile = directory.listFiles()[i];
          if ( tempFile.isFile() ) {        
              FileInputStream fs = new FileInputStream(tempFile);
              byte[] bom = new byte[3];          
              fs.read(bom, 0, 3);
              if ( byteToHex(bom).equals("EFBBBF") ) {
                byte b[] = new byte[(int)tempFile.length()];
                int leng = 0;
                if( (leng = fs.read(b)) > 0 ){
                  FileOutputStream os = new FileOutputStream(tempFile.getAbsolutePath());
                  os.write(b,0,leng);
                  os.close();
                }
              }
              fs.close();
          } else if ( tempFile.isDirectory() ) {
            fncBomDelete(tempFile);
          }
        }
  } catch ( Exception e ) {
    e.fillInStackTrace();
  }
}
private static synchronized String byteToHex(byte[] data) {
  StringBuffer buf = new StringBuffer();
  for ( int i = 0; i < data.length;  i++) {
    buf.append(byteToHex(data[i]).toUpperCase());
  }
  return buf.toString();
}

private static synchronized String byteToHex(byte data) {
  StringBuffer buf = new StringBuffer();
  buf.append(toHexChar((data >>> 4) & 0x0F));
  buf.append(toHexChar(data & 0x0F));
  return buf.toString();
}

private static synchronized char toHexChar(int i) {
  if ((i >= 0) && (i <= 9)) {
    return (char) ('0' + i);
  } else {
    return (char) ('a' + (i -10));
  }
}
Posted by 똑순아빠
TAG Bom, java, utf-8
트랙백 0, | 댓글 0

div 에서 폭에 따라 텍스트 길이 조정하기

분류없음 / 2008/03/14 18:07
게시판이나 메인 화면의 최근게시물 등에서 text를 칸에 맞게 잘라주려면 보통 서버에서 작업을 하곤 했다.

서버에서 칸 길이에 맞게 자르고, ...을 붙여주곤 했는데 숫자나 영문, 특수기호 등 예외가 많아서 곤란할 때가 많았다.

<div style="width:200px;overflow:hidden;text-overflow:ellipsis">
 <nobr>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</nobr>
</div>


위와 같이 하면, 200px 에 맞게 잘리고, ... 이 찍힌다.

overflow:hidden 이 넘어가는 영역에서 잘리게 해주고,
text-overflow:ellipsis 가 ...을 찍어준다.
<nobr> 은 이름에서 풍기다시피 줄을 넘어가지 않게 해준다.

다만 text-overflow:ellipsis 은 IE6 부터 생긴 style 로 firefox 에서는 적용되지 않는다.
그래도 overflow:hidden 은 잘 먹으니, 유용하게 쓸 수 있다.

또, td 에는 overflow 가 없으므로 테이블에서는 div로 한번 감싸 줘야한다.
Posted by 똑순아빠
TAG HTML & CSS
트랙백 0, | 댓글 0

frame 으로 싼 페이지가 IE6에서 잔상이 생길 때.

분류없음 / 2008/02/25 14:58
IE6의 버그로 보인다.

DOCTYPE 이 다음의 형식이고,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

frame 으로 둘러싼 페이지내의 body 태그의 style에
background:url('../../files/images/common/body_bg_001.gif') top repeat-x;
와 같이 body에 이미지가 깔리고, repeat-x 태그가 있으면,

IE6에서 스크롤하면 잔상이 생겨서 제대로 볼 수가 없다.

여러곳에서 검색했더니, 한번더 div로 감싸라는-_-;; 답만 얻을 수 있었는데,

해결 방법을 겨우 찾았다.

style에 다음과 같이 해주면 된다.

background-color:#FFF; background-image:url('../../files/images/common/body_bg_001.gif'); background-position: top; background-repeat: repeat-x;

즉, backgroud-color 를 흰색으로 해주고, 나머지 태그도 정확하게 써주면 해결이 된다.

상당히 자주 일어날 수 있는 버그 같은데, 해결책이 잘 없어서 한참을 헤맬수 밖에 없었다.
Posted by 똑순아빠
TAG HTML & CSS
트랙백 0, | 댓글 3

IE 에서 EUC-KR 과 UTF-8 의 높이 차이.

분류없음 / 2008/01/08 20:32

EUC-KR 과 UTF-8 의 차이에 대해서는 많은 자료가 있었다.

그러나 잘 찾지 못한 것이 하나 있다.

폰트의 높이가 살짝 다르다는 것이다.

<HTML>
 <HEAD>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </HEAD>
 <body>
 <br><br>
    테스트
</body>
</HTML>

라는 파일을 생성하고, 한 파일은 UTF-8로 저장하고, 다른 파일은 charset 을 EUC-KR로 바꿔준 후 EUC-KR로 저장을 해보자.

그리고 두 파일을 IE에서 보면 높이 차이가 남을 알 수 있다.

FireFox에서는 같게 보임에도 불구하고, IE에서는 표시하는데 차이가 난다.

처음에는 디자이너가 준 파일에 CSS를 잘못 지정한줄 알고 엄청나게 헤맸으나, 결론은 IE의 문제였다.

같게 보이는 해결이 있으면 좋겠다.


 

Posted by 똑순아빠
TAG HTML & CSS
트랙백 0, | 댓글 0

overflow 에 대해.

웹표준 / 2008/01/03 17:52
테이블 안의 td의 width 에 맞게 글을 보여줄 때 편한 방법이 될 수도 있겠다.

style 에 overflow 속성은 정해진 높이나 넓이를 초과했을 때 어떻게 보여지느냐를 결정해 주는 속성이다.

msdn을 보면,

Sets or retrieves a value indicating how to manage the content of the object when the content exceeds the height or width of the object.

이렇게 되어있다.

그리고 줄수 있는 값으로는 visible, scroll, hidden, auto 가 있는데,

visible 은 기본값이며, 있는 그대로 보여주는 것이다.

scroll 은 무조건 스크롤바를 만들어 주며, 내용이 더 작을 경우 스크롤바는 보여지고 비활성이 된다.

hidden 은 무조건 정해진 높이나, 길이를 초과하면 보여주지 않는 것이며,

auto 는 초과하면 스크롤바가 나오고, 작으면 나오지 않게 하는 것이다.

단, 이 속성은 IE 에서는 TR, TD 태그에 적용되지 않는다.

다시 MSDN을 보면,

Applies To

A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BODY, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, CUSTOM, DD, defaults, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HTML, hn, I, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LISTING, MENU, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TEXTAREA, TT, U, UL, VAR, XMP
라고 되어있다.

하지만, 이것은 IE 에만 그렇게 적용이 된다는 것이다.

파이어폭스에서는 TD에도 잘 적용이 된다;;

많은 사람들이 IE 를 쓰는 조건에서는 TD 에 바로 쓰기 보다는 DIV로 한번 감싸줘야 할 듯하다.

overflow:hidden 으로 설정을 하게 되면, 리스트 페이지에서 글자수로 자르는 수고 없이 잘 보여줄 수 있을 듯하다.

<TABLE style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid">
  <TBODY>
    <TR>
      <TD>제목 </TD>
    </TR>
    <TR>
      <TD>
        <DIV style="OVERFLOW: hidden; WIDTH: 200px; HEIGHT: 20px">원더걸스에서는 소희가 짱이예염~!         </DIV>
      </TD>
    </TR>
    <TR>
      <TD>
         <DIV style="OVERFLOW: hidden; WIDTH: 200px; HEIGHT: 20px">원더걸스가 뭔가요? 원더우먼은 알겠는데... </DIV>
      </TD>
     </TR>
   </TBODY>
</TABLE>

라는 소스는

제목
원더걸스에서는 소희가 짱이예염~!
원더걸스가 뭔가요? 원더우먼은 알겠는데...

이렇게 보이게 된다.

쉽게 리스트를 보여줄 수는 있지만, 글줄임표(...) 는 나오지 않는다는 단점이 있다.
Posted by 똑순아빠
TAG HTML & CSS, 웹표준
트랙백 0, | 댓글 0

innerHTML 속성에 대해.

분류없음 / 2007/12/22 15:27
개발 중 내용을 수정해야할 많은 경우 innerHTML 을 많이들 쓴다.

div 나 span 에 사용할 때가 많지만, 다른 태그에서도 많이 쓸 것으로 생각된다.

하지만 innerHTML 이 읽기만 가능하고 쓰기는 안되는 태그들이 있다.

대표적으로, <table>, <tr> 이 있는데, MSDN 에서는 이렇게 적고 있다.


The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.


즉 위에 나열된 태그는 innerHTML 이 읽기만 가능한 태그이다.

주의해서 써야한다.

참고로 table.innerHTML = "블라블라"; 를 쓰게되면 "알수 없는 런타임 오류" 라고 뜨게 된다.
Posted by 똑순아빠
TAG innerHtml
트랙백 0, | 댓글 0

cloneNode 메소드

분류없음 / 2007/12/22 14:21
cloneNode 메소드가 있다.

cloneNode 는 하위에 있는 모든 노드를 복사하는 메소드가 되겠다.

예를 들어, var objClone = document.getElementById("obj").cloneNode(true); 라고 하면

obj 과 같은 객체인 objClone 이 만들어지게 된다.

뒤에 true 는 하위 노드까지 전부 복사하는 옵션이다.

여기서 주의 할 것이 두가지 있는데,

하나는 cloneNode를 한다고 완벽하게 같지는 않다는 것이다.

대표적으로 radio 의 checked 속성이 복사되지 않는다.

그렇기 때문에

var objClone = document.getElementById("obj").cloneNode(true);
if ( !document.all ) objClone.innerHTML = document.getElementById("obj").innerHTML;

이라고 해야 정확하게 복사가 된다.

또 하나는 Node를 복사하면, HTML 태그만 복사 되는 것이 아니라, 중간에 TextNode 도 하나의 노드로 들어가게 된다.

중간에 들어간 엔터같은 것도 TextNode 로 들어가기 때문에, objClone.length 는 HTML 태그의 숫자보다 많아 질 것이다.

for 문을 돌릴 때 주의해서 봐야한다.
Posted by 똑순아빠
TAG JavaScript 팁
트랙백 0, | 댓글 0

Form 에서 label 을 사용한 후 input 박스 왼쪽으로 맞추기.

웹표준 / 2007/10/17 16:44

10월 16일 아침 내용중에 Form에서의 모양이 제대로 나오지 않았었다.

이상하다 싶어서 해본 결과!

간단하게 해결이 되었다-_-


<style type="text/css" media="screen">
 #fig5_8 form dt {
  float: left;
  padding-right: 10px;
  width: 130px;
  }
 </style>
</head>
<body>

<div id="fig5_8">
<form action="/path/to/script" id="thisform" method="post">
  <dl>
   <dt><label for="name">이름 :</label></dt>
     <dd><input type="text" id="name" name="name" /></dd>
   <dt><label for="email">이메일 :</label></dt>
      <dd><input type="text" id="email" name="email" /></dd>
    <dt><label for="remember">내 정보 기억하기</label></dd>
     <dd><input type="checkbox" id="remember" name="remember" /></dd>
   <dt><p><input type="submit" value="확인" /></dt>
  </dl>
</form>
<br /><br />
</div>

위 소스에서 보듯이 lable 을 싸고 있는 dt 에 일정한 width를 주니 자연스럽게 해결이 되었다.

아래는 스샷^^

사용자 삽입 이미지

Posted by 똑순아빠
TAG HTML & CSS, 웹표준
트랙백 0, | 댓글 1

HTML과 CSS의 의미에 대해.

웹표준 / 2007/10/17 16:41

웹표준 공부의 첫 시작을 함께 해보자.

(편의상 반말로 하니 이해해주길)


우리는 <ul><li> <h1> 등의 태그를 거의 쓰지 않는다.

모양을 꾸미기가 어렵고, 굳이 저런 태그를 쓰지 않는다고 해서 디자인을 할 수 없는 것도 아니기 때문이다.

하지만 HTML과 CSS의 의미를 다시 생각해보자.


HTML에는 문서의 구조를 정의하고, 디자인은 CSS에서 하는 것이 기본의미라고 할 수 있다.

우리는 지금까지 HTML에서 디자인을 만들고 CSS에서는 그 디자인을 쉽게해주는 보조적인 역할로만 생각했었다.

하지만 HTML은 본래 문서의 구조를 정의하기 위해 만들어진 것이기에, 현재 우리가 쓰는 방법은 엄격하게는 틀린 방법이다.


예를 들어 우리는 문서의 제목을

<table>

  <tr>

    <td>

      기쁜 우리 젊은 날

    </td>

  </tr>

</table>

이렇게 쓰고는 table모양으로 디자인을 만들어왔다.


하지만, 이제는

<h1>기쁜 우리 젊은 날</h1>

같은 방식으로 쓰고, 디자인을 CSS로 정의해야 한다.


왜 웹표준을 지키는 것이 좋으냐면,

문서의 가독성이 높아져서 누구나 쉽게 볼 수 있다.

많은 사람들이 <table>로 가득찬 HTML문서에 질린 경험이 있을 것이다.

이제 쓸모없는 태그로 가득찬 HTML문서가 아니라 간단하고 명확한 문서로 볼 수 있다.


그리고, 디자인 변경이 무척이나 쉬워진다.

지금은 테이블안에 테이블안에 테이블안에 테이블로 인해서 디자인을 변경하는 작업이 쉽지 않았다.

하지만 웹표준을 지켜서 처음 개발시에 구역을 잘 잡아주고, 디자인에서 CSS파일 하나만 명확하게 잡아준다면 하루만에도 디자인이 바뀐다.

간단한 예로 블로그 디자인들은 웹표준을 지켜서 만들었기때문에 클릭한번으로 디자인이 바뀔 수 있다.


익숙해지면 디자인에 걸리는 시간, 개발에 걸리는 시간이 줄어들고, 코드의 양도 획기적으로 줄어드는 등 많은 효과가 있다.


앞으로 하나하나 공부하면서 만들어보자.

Posted by 똑순아빠
TAG HTML & CSS, 웹표준
트랙백 0, | 댓글 2

최근에 달린 댓글

최근에 받은 트랙백

글 보관함