FE/CSS

선택자1 (20.07.05)

잠수함 2020. 7. 5. 21:38
728x90

- 요소 선택자(태그): 선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고 합니다. 선택자의 부분에 태그의 이름이 들어갑니다

선택자 부분에 태그 이름이 들어갑니다.

- 그룹화: 선택자는 쉼표을 이용해서 그룹화를 할 수 있습니다.

 

- 전체 선택자: 한번만의 선언으로 문서 내에 모든 요소에 스타일 규칙이 적용. 매우 편리하지만 , 성능에 좋지 않으므로 사용을 지양하는게 좋습니다.

 

- CLASS 선택자: 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 자장 일반적인 방법.

                          cla ss선택자를 사용하기 위해서는 html 을 수정하여 class 속성을 추가해야 합니다.

      

 

- 다중 CLASS: class 속성은 꼭 하나의 값만 가질 수 있는 것은 아닙니다. 공백으로 구분하여 여러개의 class를 사용 가능합니다.

 

같은 속성의 설정을 두개 이상 해줄 경우 제일 최근에 선언했던 속성의 값이 화면에 나옵니다.

 

 

- ID 선택자: class 선택자와 비슷합니다. 

                   선택자 사용시 .(마침표) 대신 #(해시) 기호를 쓰시고, 요소에는 class 속성 대신 id 속성을 사용하시면 됩니다.

 

여러요소를 사용할수 없는 불편한점이 있습니다.

*class 선택자와의 차이점

- 기호가 아닌 #(해시)을 사용

- 태그의 속성이 class가 아닌 id 속성을 참조

- 문서내에서 유일한 요소에 사용( 여러 요소에 class를 넣고 사용이 불가능함! )

'FE > CSS' 카테고리의 다른 글

상속 (20.07.06)  (0) 2020.07.06
구체성 (20.07.06)  (0) 2020.07.06
가상 선택자 (20.07.06)  (0) 2020.07.06
선택자2 (20.07.05)  (0) 2020.07.05
CSS (20.07.05)  (0) 2020.07.05