상세 컨텐츠

본문 제목

get과 post, id와 name, Class와 ID

Web Development/Others

by thankee 2008. 2. 8. 22:40

본문

다음 기술된 내용은 asp와 asp.net, IE7(InternetExplorer)과 FF2(FireFox), WindowsXP SP2의 환경에서 실행한 결과입니다.


1. ID와 NAME 속성이 뭐가 다른가, 어떻게 다른가에 대해서 혼란스러우실겁니다.

ID와 NAME은 자바스크립트에서 각 개체를 식별하는데 사용되며, 서버에서 Request할 때도

식별자로서 사용되기에 서로 똑같은 기능을합니다.

차이점은 다음과 같습니다. ID는 해당 페이지 내에서 유일해야하지만, NAME은 그렇지 않다는 점입니다.

따라서 CheckBox나 Radio같은 경우 NAME을 같게 주는 경우가 많습니다. TextBox나 다른 개체 역시

Name 중복이 가능하며, 서버에서 Request하면 이름이 같은 개체의 값이 콤마로 이어진 값을 받을 겁니다.

 하지만 ID와 NAME 속성 값이 중복될 경우 NAME값이 우선권을 가집니다.

즉 컨트롤 A는 ID가 txt, B는 NAME이  txt일 경우,  서버에서 Request하면 컨트롤 B의 값을 받게 됩니다.

NAME
> ID

(PHP에서는 name값만 적용됩니다.)


2. get과 post방식을 동시에 사용할 경우가 있을 수 있습니다. 즉 다음과 같은 코드를 기술 할 경우에...

<form method="post" action="other.aspx?code=getCode">
    <input type="text" name="code" value="postCode">
    <input type="text" name="name" value="postName">
    <input type="submit">
</form>

서버에서 각각 code와 name를 Request하였을 경우 결과는 어떻게 될까요?

Response.Write("code : " + Request["code"] + "<br>");
Response.Write("name : " + Request["name"]);

결과는 다음과 같습니다.

code : getCode
name : postName

위 결과는 post와 get방식 모두 혼용이 가능하며, 중복될 경우 get방식이 우선한다는 것을 알 수 있습니다.

GET
> POST


3. CLASS와 ID의 역시 CSS를 다루다 보면 차이점이 무엇인가 혼동스러울 때가 있습니다.

ID는 자바스크립트에서도 사용되지만 마찬가지로 해당 페이지에서 유일해야합니다.

CLASS는 여러 개체에 할당 될 수 있습니다.

어떻게 사용하던지 상관없지만, 보통 유일한 개체에 ID를 부여하고, ID를 기반으로 CSS를 주게되며,

개체 중에서 공통적으로 부여되어야 하는 CSS는 CLASS를  부여하고 CSS를 작성하게 됩니다.

ID와 CLASS가 중복될 경우 ID가 우선순위를 가지게 되며, CLASS가 다음 우선순위를 가집니다.

    <div id='itsID' class='itsCLASS'>효과</div>

위 idv태그는 id에 해당하는 CSS가 먼저 적용되며, class에 해당하는 CSS 역시 다음으로 적용됩니다.

중복되면 id의 효과가 우선하게 됩니다.

 다음은 CSS에서 우선순위입니다.

    1
. Important : #name { background-color:Red !important; } <div id='name'>효과</div>

    2
. Inline : <div style="coloer:Red;">효과</div>

    3
. ID : #name { color:Red; } <div id='name'>효과</div>

    4
. CLASS : .name { color:Red; } <div class='name'>효과</div>

    5
. Contextual Selector : div #name { color :Red; } <div><span id='name'>효과</span></div>

    6
. Tag : div { color :Red; } <div>효과</div>


by thankee from tistory.com

관련글 더보기