CSS 문법정리

CSS 기본 문법

선택자 {

     속성1 : 값;

     속성2 : 값;

}

선택자

선택자는 스타일을 적용할 대상이다.

HTML의 태그나 속성으로 id or class 등을 선택해서 속성을 적용할 수 있다.

태그를 선택자로 했을 때

태그 {

     속성: 값;

}

 

id를 선택자로 했을 때

#id {

     속성: 값;

}

 

class를 선택자로 했을 때

.class {

     속성: 값;

}

• id 는 딱 한 요소에게만 적용이 된다.
• class 는 class가 적용된 모든 요소에게 적용이 된다.

선택자 조합

선택자 여럿을 ,로 묶어서 같은 속성을 적용해줄 수 있다.

#선택자1, 선택자2 {

     속성 : 값;

}

복합 선택자

기본 선택자인 태그,id,class를 결합한 선택자를 복합 선택자라고 한다.

복합 선택자는 하위 선택자와 자식 선택자로 나뉘어진다.

 

하위 선택자는 선택자1 선택자2  로 띄어쓰기를 하면 상위선택자인 선택자1 내부에

있는 모든 요소들 중에서 선택자2에 해당하는 태그를 선택해 적용시킨다.

 

자식 선택자는 선택자1 > 선택자2 로 >를 사용해서 구분지어준다.

상위 선택자인 선택자1의 내부에서 가장 바깥에 있는 태그중에 선택자2에 해당하는 태그를 선택한다.

 

쉽게 내 식대로 생각하자면 하위선택자는 태그 안에 포함된 모든것을

자식선택자는 태그 바로 아래 있는 태그가 자식선택자다.

 

CSS 속성 링크

LINK :