javascript

Hagi 2011. 4. 27. 17:22

출처 : http://www.homejjang.com/09/block_inline.php


HTML element 를 크게 2가지로 구분해보면 head element 처럼 화면에 표시되지 않은 element가 있고 div, p, table...과 같은 element 처럼 화면에 표시되는 element로 나눌 수 있습니다.

그릭 화면에 표시되는 element를 다시 두 가지로 분류하면 block-level과 inline-level로 구분할 수 있습니다.

  • 화면에 표시되지 않는 element
  • 화면에 표시되는 element
    • block-level
    • inline-level

block-level과 inline-level의 구분

block-level과 inline-level을 가장 쉽게 구분할 수 있는 방법은 한 라인에 복수로 올 수 있나의 여부입니다.

block-level element는 한 라인에 하나만 위치할 수 있습니다. 반대로 inline-level element는 한 라인에 2개 이상 올 수가 있죠.

div(block-level element)와 span(inline-level element) element를 사용해 보면 이 차이를 확실하게 느낄 수 있습니다.

<div style="border:1px gray solid;">block-level element</div>
<div style="border:1px gray solid;">block-level element</div>

위와 같이 block-level element인 div element를 연속으로 2개를 넣으면 각각 한라인을 차지하게 됩니다.

반면 inline-level element는 한줄에 옆으로 여러개가 위치할 수 있습니다.

<span style="border:1px gray solid;">inline-level element</span>
<span style="border:1px gray solid;">inline-level element</span>

물론 block-level element가 한줄을 다 차지한다고 하더라도 자신을 포함한 element가 허용하는 한도내에서 차지합니다. 만일 테이블의 셀안에 넣어버리면 그 셀의 크기가 허용하는 범위내에서 width를 차지하게 됩니다.

<table width="400">
<tr>
    <td><div style="border:1px gray solid;">block-level element</div></td>
    <td><div style="border:1px gray solid;">block-level element</div></td>
</tr>
</table>

기타 다른 차이점은, block-level element는 inline-level element를 포함할 수 있지만 반대의 경우는 불가능합니다.

다소 개념적인 부분이라서 쉽게 이해하기 힘들 수도 있지만 block-level과 inline-level의 차이를 확실하게 알고 있어야 CSS를 전문적으로 사용할 수 있습니다.


block-level elements

  • p
  • h1~h6
  • ul
  • ol
  • pre
  • dl
  • div
  • noscript
  • blockquote
  • form
  • hr
  • table
  • fieldset
  • address

inline-level elements

  • samp
  • kbd
  • var
  • cite
  • abbr
  • acronym
  • a
  • img
  • object
  • br
  • script
  • map
  • q
  • sub
  • sup
  • span
  • bdo
  • input
  • select
  • textarea
  • label
  • button

 
 
 

javascript

Hagi 2011. 4. 27. 17:07

쿼리에서 DECODE나 CASE를 쓰기 싫어서

javascript에서 잘쓰지않는 P 태그를 이용하여 한번 꼼수를 써봤다.


<html>
<head>
<script >
function f_init(){

     f_chgUseStatVal('p');
}

function f_chgUseStatVal(tagName){
    var tags = document.getElementsByTagName(tagName);
    for(i=0;i<tags.length;i++){
        stat = tags[i].firstChild.nodeValue;
        if(stat==1){
            tags[i].firstChild.nodeValue = 'normal';
        }else if(stat==2){
            tags[i].firstChild.nodeValue = 'abnormal';
        }else{
            tags[i].firstChild.nodeValue = '';
        }
    }
}

</script>
</head>
<body onload="f_init()">

<table>

<tr>

<th>AA</th><th>BB</th><th>CC</th>

<사용자 정의된 taglib의 리스트>

<tr>

<td>${aa}</td>

<td><p id="bb">${bb}</p></td>

<td>${cc}</td>

<tr>

</사용자 정의된 taglib의 리스트>

<table>

</body>

</html>

=========================================================================

기능 강화 => id 값을 입력하여 해당 id의 tag nodeValue만 변경할수 있게함 

function f_chgUseStatVal(tagName,tagId){
    var tags = document.getElementsByTagName(tagName);
    for(i=0;i<tags.length;i++){
       if(tags[i].getAttribute('id')==tagId){
           var stat = tags[i].firstChild.nodeValue;
           if(stat==1){
               stat = 'normal';
           }else if(stat==2){
               stat = 'abnormal';
           }else{
               stat = '';
           }
           tags[i].firstChild.nodeValue = stat;
       }
    }
}



 
 
 

javascript

Hagi 2011. 4. 19. 18:09

웹 프로그래밍을 하다보면, Javascript 많이 씁니다.

다른 프로그래밍보다 Javascript는 테스트 하기도 많이 어렵고, 만들면 완전 화면이 지저분해지죠.

그래서 외쿡 디자이너가 Javascript 프레임워크인 Jquery를 만들었나봅니다.

아마 수많은 Javascript 프레임워크 중에 이것이 가장 편하고

 크로스브라우징(익스플로러, 파이어폭스, 크롬, 오페라등의 여러 브라우저에서 호환되는 것을 말함)이 

잘되는 편이여서 많이 쓰여지는 것 같습니다.

그 수많은 프레임워크 중에 예전에는 prototype이라는 프레임워크도 많이 썼고,

 현재도 많이 쓰여지나봅니다.

그런데 만약 이것을 쓰고 있으면, Jquery와 충돌이 납니다. 처음 접하면 왜 안돼는지 찾기도 힘들구요.

Jquery를 사용하려고 했는데, 작성한 소스에 아무런 에러의 이유를 찾지 못하겠다면...

이것이 있는지 찾아보시고, 만약 있다면 아래와 같이 설정합니다.

(두 프레임워크 간에 $ 기호가 충돌이 난다더군요)


(전략)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery.noConflict(); // var $j = jQuery.noConflict(); => $j로 alias 사용 가능  

jQuery(document).ready(function(){

       // $로 사용된 jquery를 모두 jQuery로 대체한다.

      jQuery("#tmpPageRowSize").append("<option value=''10''>10</option>");

}

(후략)

==============================================================================================

<참고>

http://taesuz-textcube.blogspot.com/2009/11/jquery-%EC%99%80-%EB%8B%A4%EB%A5%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%B6%A9%EB%8F%8C%EC%8B%9C.html


http://siana.tistory.com/entry/jQuery-prototypejs%EB%93%B1-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%9D%98-%EC%B6%A9%EB%8F%8C


<prototype.js 참고>

http://openframework.or.kr/framework_reference/prototype_js/1.5.0/prototype.js.html#Whatsthat

음..역시 같은 고민을 하는 분들이 많군요. 위의 방법은 언뜻 좋아보이지만 약점을 가지고 있습니다. 바로 수많은 Jquery 관련 Component들을 사용할 수 없다는 점입니다.

다른 유용한 Jquery관련 Component(or Library)들은 $로 인식하고 있으니깐요..
그러게 말입니다. prototype을 쓴 레거시 코드를 빨리 걷어 내야될텐데요.