CSS
* CSS
- Cascading(*) Style Sheet
- 여러개의 HTML 요소에 공통 적용을 시킬 수 있다.
- 문법
* selector(선택자) {Property:Value;Property:Value;Property:Value;}
* selector(선택자) {
Property:Value;
Property:Value;
Property:Value;
}
- selector(선택자) : 스타일을 지정할 대상을 특정한다.
- simple selector
- Element Selector
: HTML Element 이름을 선택자로 직접 사용하는 것.
- ID Selector
: HTML Element에 id attribute를 사용해서 이름을 붙혀 선택자로 사용하는 것.
- Class Selector
: HTML Element에 class attribute를 사용해서 이름을 붙혀 선택자로 사용 하는것.
** ID,Class 는 HTML Element에 이름을 붙여주는 Attribute
** ID attribute
- HTML Element에 고유한 이름을 붙힐때 사용하는 attribute 이다.
- 하나의 HTML 문서에 동일한 ID 이름을 여러번 사용할 수 없다.
** Class attribute.
- 여러개의 HTML Element에 동일한 Class 이름을 사용할 수 있다.
- 여러개의 HTML Element에 스타일링, 동작 등을 공통 적용시킬 수 있다.
★ 하나의 요소에 적용 : ID
여러개의 요소에 적용 : Class
=> 프론트 앤드 개발시 Class만 사용하는 것으로 기준을 설정 한다.
** HTML Element는 프론트앤드 개발, 백앤드 개발 등 모든 개발 작업의 대상이 되는 부분이기 때문 명확히 구분해서 사용할 필요가 있다.
=> ID : 백앤드 개발용으로 사용
Class : 프론트앤드 개발용으로 사용
(** 개발자에 따라 사용방식의 차이가 있다.)
** 하나의 HTML Element에 ID,Class 이름을 여러개 사용 할 수 있다.
: 각각의 이름은 공백으로 구분해 준다.
Ex)
<p id="paragraph level1">단락1</p>
<p class="para intro">단락1</p>
<p id="paragraph" class="para">단락1</p> => 가장 좋은방법이다.