Jquery이용한 dynamic 페이지 스타일

Javascript 라이브러리인 Jquery를 이용하면, 간단하게 복잡한 Javascript 기능을 구현할 수 있다.
최근에 간단한 웹DB를 만들면서 로딩된 page에 CSS 스타일을 적용하는 기능을 구현하였는데, Jquery( 및 Javascript) 를 이용할 때, 주의해야할 사안에 실수를 저지르는 바람에 한참 삽질을 했는데, 이를 정리해 본다.

먼저 아무런 내용이 없는 html 구조를 아래와 같이 설정하자.
(이 페이지의 html코드에서 html tage (<, >) 가 허용이 안되어, tag 괄호를 <> 대신 () 를 사용하였다. )

(html)
  (div id="main")

  (/div)
(html)

그다음 Jquery를 이용해서, id=main 부분에 외부 html 파일을 읽어 뿌려주는 부분을 html head부분에 script로 추가한다.

(script)
$(document).ready(function(){  
  $(#main).load('content.html');
 });
(/script)

* 여기서 첫번째 문제, load된 html 내용에 원 html 파일에 적용된 CSS 가 적용될까?
적용된다. 페이지에 설정된 CSS 이기 때문에 load되어 원 페이지의 CSS 규칙 적용을 받는 내용에도 CSS 규칙이 적용된다.

다시 page로 돌아가서, 이번에는 load된 html의 특정 div id 를 가진 부분에 대해 CSS 규칙을 추가한다.

(script)
$(document).ready(function(){
     $(#main).load('content.html');
     $('#top').addClass('css_top');   //id=top에 CSS 규칙 css_top을 적용한다.
(/script)

* 여기서 두번째 문제, load된 html의 특정 부분에 CSS 규칙이 적용될까?
정답은 조건적으로 그렇다 이다. 문제는 네트워크 지연에 있다. AJAX방식의 모든 구현에서 발생하는 문제로, script에서는 load 이후, css가 추가되는 것 처럼 보이지만, 실제 html이 load되는 시점은 html을 읽어오는 동안의 '지연' 이 발생하므로 css 추가 부분이 적용된 이후가 될 수 있다. 이런 경우엔 css 규칙 적용 부분이 먼저 실행되고 html이 로딩이 되었기 때문에, css 규칙 추가가 이루어 지지 않는다.

실제로는 plain html 파일인 경우, 지연효과가 미미하여, 이 문제가 발생하지 않을 수 있는데, 내가 작업하는 상황에서는 읽어오는 파일이 그 자체로 Mysql 을 긁고 processing 을 하여 조금 시간이 걸리는 php 파일이었기 때문에, 이 문제가 발생하였다.

이런 상황에서 문제없이 순서대로 원하는 기능을 구현하기 위해서는 '콜백' 기능을 이용해야 한다. 즉 각 jquery 라인을 순서대로 실행하도록 조건을 걸어두는 것이다.

콜백 기능 구현은 간단한데, 위의 상황에서 html 파일을 load하고 난 이후, css 규칙을 추가하는 콜백 함수를 구현하면, 원하던 기능을 문제없이 수행할 수 있다.

(script)
$(document).ready(function(){
      $(#main).load('content.html', function(){
           $('#top').addClass('css_top');
      });
  });
(/script)