comtK

안녕하세요~ 오늘은 선택자(selector)에 대해서 알아볼께요!!

이게 참 javascript나 CSS, jQuery에서 공통적인부분이라 카테고리 나누기가 참 애매했네요 ㅋㅋ

간단하게 id와 class로 특정개체 혹은 개체집합을 선택하는걸 해보겠습니다.

일단 id와 class의 개념부터 먼저 잡고가실까요.

아 물론 제가 알고있는부분에 한해서 적기때문에, 설명에 대해 공감못하실수도있고, 틀린부분이 있을수도 있어요.

틀린부분은 말씀해주시면 참고하고 수정작업을 하겠습니다.

일단 컨셉하나 잡고 설명들어가겠습니다.

지금 제가 이 포스팅을 작성하고있는 페이지나, 혹은 네이버 메인, 티스토리 메인 등등 기타 모든 페이지들 하나하나를 '나라' 또는 '지역' 이란 개념으로 생각해주시면 이해가 빠르실겁니다. 제가 이렇게 설명을 할거거든요 ㅋㅋㅋ

페이지 = 나라

id = 주민번호

class = 인종, 지역주민등 사람이 모여있는 그룹

개체 = 사람

저는 개인적으로 이런식으로 생각하고있습니다.

페이지 하나하나를 각각의 나라로 보고, id를 그 나라의 고유한 주민번호로 생각하면 됩니다. 그리고 class는 지역주민 혹은 인종, 게체를 사람으로 보겠습니다.

먼저 id에 대해서 이야기해보겠습니다.

하나의 나라(페이지)에는 모든사람(개체)이 고유한주민번호(id)를 갖고있어야 합니다. 만약 중복된 주민번호(id)가 있다면 그건 그나라에 문제가 있는거겠죠? 그들중에서 한사람을 특정지을수가 없잖아요. 이름도 동명이인이 있을수 있으니까요. 이들을 각각 구분할 수 있는건 주민번호(id)밖에 없습니다.

이렇게 생각하시면 따로 외울 필요가 없습니다. 우리는 이미 다 알고있는 사실이니까요.

단어만 몇개 바꿔주면 바로 이해가 갑니다. 이처럼 id는 하나의 페이지안에서 주민번호와 같은 역할을 합니다. 특정개체 하나만을 선택할 수 있는거죠.

이번엔 class에 대해서 이야기해볼까요?

하나의 나라(페이지)에는 여러 사람(개체)들이 있습니다. 그들은 특정 인종(백인 및 여러 유색인종)이거나, 종교를 갖고있거나, 특정 지역에 모여산다거나 여러가지 기준으로 그룹(class)으로 나눌수있습니다. 그룹(class)은 기준을 어떻게 잡느냐에 따라서 달라지죠.

이처럼 class는 하나의 페이지안에서 특정그룹을 지칭하는 역할을 합니다. 1개이상의 개체를 선택할때 사용합니다.

class는 하나 이상의 개체를 선택할때 사용한다고 방금 말씀드렸습니다. 여러개체에 같은 class명을 지정해주어도 무방하다는 말이죠. 그런데 좀 생각해보면, 그룹화하는 기준에 따라 그룹(class)안의 개체는 바뀔 가능성이 있습니다.

마치 '남자사람' 이라는 개체는 남자, 사람, 생물, 동물 등등의 여러가지 그룹에 포함됩니다. 하나의 그룹으로는 '남자사람'을 온전하게 정의할 수 없어요. '사람' 으로만 정의하면 성별이 빠지고, '생물' 로만 정의하면 동물이면서 사람인부분이 빠집니다. 성별역시 빠지게 되죠. 그러나 다행히도,class는 하나이상의 설정이 가능합니다. 이점은 알아두시면 유용해요!!!

어떤 사람이 '○인종이고, □종교를 갖고있고, 그사람이 X지역에 산다.' 라고 가정하면 그사람을 나누는 기준은 확인가능한것만 3가지(인종, 종교, 지역)나 됩니다. 저는 이 그룹에 이름을 지어줘볼까 합니다.

인종그룹 = groupA_W(백인), groupA_B(흑인), groupA_Y(황인)

종교그룹 = groupB_CA(천주교), groupB_CH(기독교), (무교는 추가 안함)

지역그룹 = groupC_S(서울), groupC_I(인천)

이렇게 이름을 붙여보겠습니다. 위 이름들은 나중에 또 사용하게 될거에요.

그러고보니 개체를 신경 안쓰고있었네요 ㅋㅋ 다만들어놓고 사람이 없....

개체를 만들겠습니다. A씨, B씨, D양, E양

(C씨는 어감이 맘에 안들어서 안만들어요. 왠지 부럽고 질투남)

A씨는 백인이고, 인천에 살고있으며 종교는 천주교입니다. 주민번호는 num1 이구요.

B씨는 흑인이고, 서울에 살고있으며 종교는 무교입니다. 주민번호는 num2 이구요.

D양은 백인이고, 서울에 살고있으며 죵교는 기독교입니다. 주민번호는 num3 이구요.

E양은 황인이고, 인천에 살고있으며 죵교는 무교입니다. 주민번호는 num4 이구요.

이걸 나름 코드로 표현해볼께요.

CSS(Cascading Style Sheets)는 제가 정리를 아직 안해서 옆에 주석을 달아놨습니다. 알아봐주셨으면 해요ㅠ

이렇게 각 개체에 고유한 id를 주고, 기준별로 나눈 그룹에 해당하는 class명을 설정해줍니다.

이제 결과를 보실까요?

그럼 이런식으로 표시가 됩니다.

id와 class는 각 개체를 선택하는데 필요한 아주 중요한 속성들입니다. 이것들을 헷갈릴경우, 다른 사람들과의 협업이 제대로 이뤄지지 않을수도 있으며, 원하는대로 스크립트가 동작하지 않을 수 있습니다. 이점 꼭 알아두셨으면 해요!!

id와 class의 이름은 좀 시간을 들이셔서 의미가 있게 만들어주시면 굉장히 도움이 됩니다. id명과 class명만 보고도 이 개체가 어떠한 기능을 하며, 어떠한 내용을 담을것인지를 짐작 할 수 있으니까요. 저는 설명한다는 핑계로 엄청 대충지었습니다ㅠㅠ 미안해요ㅠㅠ 이름짓는거는 따라하지마세요ㅠㅠ

소스 첨부해놓을께요!!

selector.html