Selector

JiSuKim·2022년 4월 6일
0

CSS

목록 보기
5/10
post-custom-banner

전체 선택자 (Universal Selector)

전체 선택자를 통해서 모든 HTML 요소에 접근을 할 수 있습니다. 이를 통해 문서 전체에 공통적으로 기본값을 지정할 수 있습니다. 전체 선택자는 *을 사용하여 나타냅니다

타입 선택자 (Type Selector)

타입 선택자는 태그 이름을 사용하여 나타냅니다. 해당 태그의 이름에 해당하는 모든 태그에 속성을 적용합니다.

p {
    color: red;
}

아이디 선택자 (ID Selector)

id 속성은 페이지에 있는 해당 요소를 유일하게 식별할 때 사용.
주의사항으로는 같은 페이지 안에 id값은 유일해야합니다. 즉, 만약에 id="firstid"라고 아이디를 작성하셨다면 firstid 라는 값은 이 HTML에서 단 한 개만 존재 해야 합니다. 또 id 이름은 알파벳 또는 '_'(언더바), '-'하이픈 으로 시작해야 합니다. id를 이요해 css와 javascript에서 활용할 수 있으니 중요한 속성 중 하나입니다. 개인 프로젝트일 경우 상관없지만 여러 사람들과 같이 하는 프로젝트에서 id를 최대한 직관적이게 지어주는 것도 중요합니다.

클래스 선택자 (Class Seletor)

class 속성은 또한 id 속성과 마찬가지로 해당 요소를 식별할 때 사용합니다. 그러나 id값은 하나만 존재해야 하는 반면 class속성은 한 페이지에 여러개 존재 가능하기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별 가능합니다.

클래스는 중복이 가능하기 때문에 유니크한 class를 생성하여 자주 쓰는 스타일을 정의해두고 재사용 가능합니다.

선택자 목록 (Selector list)

콤마로 선택자를 연결하여 일치하는 모든 요소들을 선택합니다.

언어 마다 선택자를 더블클릭 했는데 선택되는 공간이 다르기 때문에 특징에 맞게 코드 컨벤션을 맞추는게 중요하다

-기준으로 color만 선택

더블클릭 시 글자 전체가 선택

post-custom-banner

0개의 댓글