Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

CSS 적용 우선순위

최근 작업에서 가장 머리아픈게 항상 CSS였다. 코딩이나 그런 문제보다 훨씬 머리가 아팠다. 짜증도 많이 나면서 해결도 잘 되지 않고 그렇다고 CSS만 붙잡고 공부할 수도 없는 노릇이다.

그나마 처음 페이지를 만들면서 같이 CSS를 붙일때는 그나마 좀 나은 상황이지만 이미 CSS까지 붙어있는 페이지에 먼가 새로운 것을 같다 붙힐때는 항상 CSS충돌문제가 많이 생기고 쉽게 잘 해결되지도 않는다.

물론 이런 부분은 물론 CSS에 대해서 잘 모르기 때문이다.

그럼 우선 CSS의 적용 우선 순위를

1. Style : style="coloer:red;"

2. ID : #type { color: red }

3. class : .contents { color:red }

4. 조건 : P B { color : red }

5. 타입 : B { color : red }

1번이 가장 높은 우선 순위를 가지고 있다. 즉 엘리먼트에 직접 스타일을 써놓은것이 우선적으로 적용된다.

CSS가 상위의 다른 CSS와 충돌이 나서 문제가 생길때는 div등을 넣어서

#id .class {}

와 같은 식의 조건을 주어 해당 엘리먼트의 적용우선순위가 높아지게 하면 어느정도 해결 될 수 있다.

또한,

우선순위의 차이가 난다고 하더라도 하위에서 재정의한것이 아니면 상위의 있는 스타일이 적용된다. 상위에서 text-align을 정의하고 하위에서 color를 적용하더라도 여전히 text-align은 적용이 된다. 스타일에 따라 다르지만 auto로 넣던지 아니면 다른 원하는 값을 주어서 재정의 해 주어야 한다.

계속적으로 문제가 생기는 경우도 있기는 하지만 CSS에 대해서아직도 많이 배우고 있는 중이므로.. ㅎㅎ

그리고 { color : red !important } 처럼 !important라고 적어주면 우선순위와 상관없이 적용하게 할 수 있다.
2007/10/27 21:13 2007/10/27 21:13

AJAX 사용하기 기본 예제

뭐 요즘은 웹에서는 기본이나 다름없이 되어버린 AJAX... 여러 사이트에서 난무하고 있는 관계로 이런 인터페이스에 대한 눈은 높아졌지만 난 아직 잘 다룰 줄을 모른다 이거지...
 
어쨌든 요즘은 자바스크립트랑 자바스크립트 라이브러리에 꽤나 흥미가 가고 있고 그중에서 AJAX는 거진 필수적이란 말이지... 빨리 공부해야 겠다... 이걸 왠만큼 다루기 시작하면 꽤나 재미날것 같다.


// AJAX Request Side
function requestTagList(tagName) {
    var url = '/ajaxfile.asp';

    var myAjax = new Ajax.Request(url,
        {
            method: 'post',
            parameters: {v:tagName},
            onSuccess: responseTagList,
            onFailure: function() { alert('HTML을 받아오지 못했습니다.');}
        }
    );
}

function responseTagList(reqResult) {
    var dataobj = decodeURIComponent(reqResult.responseText);
    $('div1').innerHTML = dataobj;
}

물론 이건 prototype.js를 사용한 AJAX이다. 여태까지 올리던건 그래두 내가 어느정도는 이해하고 있었는데 AJAX는 현재 거의 이해를 못하고 있기 때문에... 사용은 해야겠고 해서 prototype.js를 사용했다. 프로토타입을 사용하지 않으면 이 코드가 거진 3-4배의 불량으로 늘어난다. 프로토타입의 위대함을 새삼 느끼고 있다.

당연히 이걸 사용하기 위해서는
<script type="text/javascript" src="prototype.js"></script>
프로토타입을 불러들여야 하고 위의 코드는 당연히 javascript니까 스크립트 태그로 묶여야지....

먼가 엄청난듯 하지만 막상 보고 있으면 구조는 그리 복잡하지 않다.(prototype.js덕분에...)

Ajax.Request만들어 주고 Response할 URL적어주고 그 다음에 method는 AJAX에서의 post와 get의 차이는 아직 잘 모르겠다. 파라미터 필요하면 넘겨주고 필요없으면 ''하면 되고 그 다음은 이벤트 인데 onSuccess는 AJAX통신이 성공했을때 발생하고 onFailure는 실패했을때 발생한다. 그리고 여기선 안썼지만 onComplete는 AJAX통신이 성공하든지 말든지 일단 끝나면 발생한다.

이벤트에 해당하는 Function은 onFailure같은 방식으로 직접 써주어도 되고 onSuccess처럼 따로 Function을 정의하고 호출만 해도 된다.


// AJAX Response Side
<%
    tagSearch = request("v")

    sql = " SELECT bbs_num, bbs_title, bbs_writer "
    sql = sql & " FROM table "

    rs.open sql,con,3,1

    tagList = "<table border='1'><thead><tr>"
    tagList = tagList & "<th scope='col'>제목</th><th scope='col'>작성자</th><th scope='col'>작성일</th></tr></thead>"

    Do while rs.EOF=false
        bbsNum    = rs("bbs_num")
        cgName    = rs("cg_name")
        bbsTitle  = rs("bbs_title")
        bbsWriter = rs("bbs_writer")
        bbsDate   = left(rs("bbs_date"), 10)

        tagList = tagList & "<tbody><tr><td class='listSubject'>" & bbsTitle & "</td>"
        tagList = tagList & "<td nowrap='nowrap' class='listWriter'>" & bbsWriter & "</td></tr>"

        rs.MoveNext
    loop

    tagList = tagList & "</tbody></table>"

    rs.Close : con.close : Set con=nothing

    response.Write jEncode(tagList)
%>

<script language="javascript" runat="server">
    function jEncode(s)
    {
        return encodeURIComponent(s);
    }
</script>

Response쪽은 오히려 간단하다. 여기선 ASP로 구현이 되어 있는데 머 이쪽은 평소짜던 코드랑 그다지 다른게 없으므로 그냥 봐도 다른쪽 언어로 구현하는데도 큰 문제가 없을 것같다.

Response.Write로 페이지에 찍어내면 그냥 그걸 Request쪽에서 받을 수 있다. 필요한걸 만들고 찍어내면 된다. 머 XML이나 JSON을 이용할 수도 있지만 어쨌든 그냥 여기선 간단히 보았을 때....

넘기는 쪽에서 parameters: {v:tagName} 로 넘겼으므로 받는 쪽에서도 v라는 이름으로 파라미터를 받는다. 그걸 받아서 필요한 처리를 하고 코드를 만들던지 값만 넘겨서 받은 쪽에서 처리하던지 해서 필요한걸 마지막에 response.Write해주면 된다.


어쨌든 이렇게 하면 AJAX로 비동기 통신을 할 수 있다.

여기서 설명을 안한것 이 있는데 기본적으로 AJAX는 UTF-8이라고 한다. 그렇기 때문에 그냥 하면 영문은 상관없지만 한글의 경우는 다 깨져버리고 만다 그래서 그걸 해결하기 위해서 인코딩/디코딩과정을 거쳐야 한다.

Response쪽에서는 자바스크립트 메서드를 사용하기 위해서 자바스크립트에 runat="server"해서 자바스크립트를 서버사이드로 돌려서 encodeURIComponent()메서드를 사용해서 반환할 스트링을 인코딩해주고 Request쪽에서는 decodeURIComponent()메서드를 이용해서 디코딩해서 받으면 한글 문제를 해결할 수 있다.

그리고 한글 문제를 해결하기 위해서 중요한 또 한가지.... Response쪽 asp파일은 반드시 UTF-8로 저장이 외어야 한다. 페이지에 UTF-8로 캐릭터셋을 정의하라는 것이 아니라 파일을 UTF-8로 저장을 해주어야 한다. 에디터에 따라 안그런것들도 있지만 대개의 에디터들은 파일을 저장하는 인코딩타입을 정해주는 옵션이 있다. 그에 따라 UTF-8로 저장을 해주어야 한다.
2007/10/22 01:05 2007/10/22 01:05