CODEDRAGON ㆍDevelopment/Web, WWW
CSS 적용방법
- 태그 선택자와 클래스 선택자 연계
- 태그 선택자와 아이디 선택자 연계
- 가상클래스 선택자
클래스 선택자
한 요소에 여러 개의 CSS를 정의할 때 사용
태그_선택자.클래스_선택자 { CSS 선언
} |
.클래스_선택자 { CSS 선언
} |
<head> <style type="text/css"> 태그_선택자.클래스_선택자 { CSS 선언
} </style> </head> <body> <태그_선택자 class="클래스_선택자"> 클래스 선택자에 따라 적용
</body>
|
ID 선택자
특정 ID를 부여해서 적용시키는 방법
#ID_선택자 { CSS 선언
} |
<head> <style type="text/css"> 유형_선택자.클래스_선택자 { css 내용 } </style> </head> <body> <유형_선택자 class="클래스_선택자"> 클래스 선택자에 따라 적용 </body> <head> <style type="text/css"> #ID_선택자 { CSS 선언
} </style> </head> <body> <태그_선택자 id="ID_선택자"> ID 선택자에 따라 적용
</body>
|
클래스 선택자와 아이디 선택자
이름의 명칭은 사용자가 임의로 지정하여 사용할수 있으며
특정 태그에 제한 없이 어느 태그에서나 사용가능합니다.
구분 | 클래스 선택자 | 아이디 선택자 |
시작기호 | .(마침표) | #(해쉬) |
속성명 | class | id |
역할 | 문서에서 주로 사용되는 서식을 클래스명으로 지정하여 문서에 통일감을 줍니다 | 스크립트로 아이디에 지정된 스타일의 속성을 변경할 수 있어 Dynamic HTML로 만들 수 있게 역할을 해 줍니다. |
주 용도 | 문서를 꾸며주는 용도 홈페이지 전체적인 스타일을 일관성 유지 | 레이어의 동작을 제어하는 용도 |
주 사용형태 | <p> <div> <span>등 | <div>등 |
적용범위 | 여러 개의 태그에 적용가능 | 하나의 태크에만 적용하여 사용 |
CSS 적용방법
태그에 개별적으로 스타일을 지정하기 보다는 클래스(class)과 아이디(ID)를 부여하고 외부 CSS 파일로 관리하는 것이 문서 전체의 통일성과 일관성을 유지 시켜줄 수 있으며 디자인 변경 시에도 일관성을 유지하며 스타일을 변경할 수 있어 작업의 효율성도 높아지게 됩니다.
'Development > Web, WWW' 카테고리의 다른 글
| CSS 적용 우선순위, !important (0) | 2015.12.29 |
|---|---|
| id 속성 vs class 속성 (0) | 2015.12.28 |
| CSS 기본구조 (0) | 2015.12.28 |
| CSS 주석 (0) | 2015.12.28 |
| CSS version (0) | 2015.12.28 |