[ID와 class를 제어하는 CSS의 # 과 . 에 대하여]
ID는 class 둘 모두 스타일을 정의하는 부분입니다
DIV, IMG, TABLE 등 홈페이지에 사용되는 각종 요소들을 객체라고 합니다. 이 객체들에게 각자의 이름을 붙여주면 그 모양을 한꺼번에 조절할 수가 있어서 편리합니다. 심지어 DIV가 여러 개면 각각에게 또 다른 이름을 붙여서 다른 객체로 취급할 수도 있습니다.
홈페이지를 제작할 때 마법사가 되었다고 상상합니다.
A라는 표를 만들어 놓고 "1번 모양!"이라고 주문을 외우면 표가 붉은 색으로 변하고 B라는 표를 만들어 놓고 "2번 모양!"이라고 주문하면 표가 푸른색이 된다고 합시다.
이처럼 미리 정의해 놓은 색이나 모양을 불러서 씌울 때 누구에게 적용할지 외우는 주문 문구가 ID와 class입니다.
이 것들은 두가지 과정을 거칩니다.
미리 style 정의 부분에서 선언하기
<style>와 </style>사이에 아래와 같이 적으면 됩니다. 또는 CSS파일에 아래의 내용을 입력해 놓아도 됩니다.
<style>
#객체이름 {속성:내용;}
.객체이름 {속성:내용;}
</style>
- # : 객체에 ID로 이름지어진 것들에 대한 명령입니다. 속성에는 색, 크기, 모양 등을 넣을 수 있습니다.
- . : 객체에 class로 이름지어진 것들에 대한 명령입니다. 속성에는 색, 크기, 모양 등을 넣을 수 있습니다.
아래는 예시입니다.
<style>
#title {color:red;}
.contents {color:red;}
</style>
- #부분은 HTML문서에서 ID=title이라고 되어 있는 객체의 글자색을 붉은 색으로 적용합니다.
- .부분은 HTML문서에서 CLASS=contents라고 되어 있는 객체의 글자색을 붉은 색으로 적용합니다.
HTML이나 PHP등에 객체 만들기
id는 예를들어서 #title {color:red;} 라고 정의한다면 아래처럼 id를 추가해 줍니다.
<div id="title">
제목의 글자입니다. 이 글자의 색이 변합니다.
</div>
이렇게 불러오면 div로 감싸여진 영역에 있는 글자들은 모두 붉은 색으로 되어 버립니다.
class는 .contents {color:red;} 라고 정의한다면 아래처럼 class를 추가해 줍니다.
<span class="contents">
본문의 글자입니다. 이 글자의 색이 변합니다.
</span>
이렇게 불러오면 div로 감싸여진 영역에 있는 글자들은 모두 붉은 색으로 되어 버립니다.
ID와 CLASS를 간단히 말하자면 이렇다
결론 :
div나 span과 관계없이 #로 정의된 것은 "id="로 불러오고
.으로 정의된 것은 "class="로 불러 온다는 차이점을 확실히 알면 됩니다.
그렇다면 어떨때 이렇게 다르게 사용할까요?
홈페이지를 만들 때 div같은 영역은 수십개를 사용할 때도 있습니다.
그때 일일이 글자는 red로 하라고 적자면 각 div마다 찾아서 수십번을 적어야 합니다. 여기서는 red라고 간단한 예를들었지만 실전에서는 수십개 단어를 타이핑해야 합니다.
하지만 ID와 class를 이름을 지정해서 사용한다면 이러한 번거로움을 한꺼번에 해결할 수 있습니다.
ID로 정의된 것은 각각 마다 다 다른 이름을 가져야 하지만 class로 지정된 것은 객체들이 공통으로 이름을 가질 수 있기 때문에, ID의 #는 어떤 한 객체에만 명령을 내릴 때 사용하고 class의 . 는 동시에 여러 개체에 명령을 내릴 때 사용한다면 구분이 간단하겠습니다.
(로그인 필요없음)
