📌 CSS의 기본적인 주요 선택자!

• CSS 선택자는 스타일을 적용시킬 대상을 선택한다.
• 선택자는 섞어서 이용할 수 있다.

 

전체 선택자 : *

* {
    margin : 0 0 0 0;
    padding : 0 0 0 0;
}

• 문서의 여백이나 글꼴 크기 등 기본 스타일링을 초기화 할 때
• 🐍 주로 바깥 여백 마진(margin), 안쪽 여백 패딩(padding) 초기화시 사용

 

태그 선택자 : 태그명

h1 {
    font-weight: 300;
    font-size: 2.125em;
    color: #fff;
}

특정 태그에만 적용시킴

 

class 선택자 : .class명

.class-name {
    font-weight: 300;
    font-size: 2.125em;
    color: #fff;
}

• html 태그에서 <태그 class="클래스-이름">방식으로 속성으로 설정
• 이 후 CSS에서 .클래스-이름 으로 불러와주면 됨 (앞에 점을 붙이기)
• 태그에 클래스를 2개 이상 적용하고프면 class = "browntext boldtext" 방식으로 띄어쓰기해서 적어주자
• 🐍 Tilemint 라이브러리에서는 스타일이 이미 설정된 여러 클래스 불러와서 한다

 

id 선택자 : #id명

#id-name {
    font-weight: 300;
    font-size: 2.125em;
    color: #fff;
}

 

• html 태그의 id 속성을 이용 : <태그 id="아이디-이름">
• 이 후 CSS에서 #아이디-이름 으로 불러옴 (앞에 #을 붙임)
• 문서 안에서 한번만 적용 가능, 하나의 고유한 요소 (class마냥 여러개 불가능)
• 🐍 문서의 레이아웃과 관련된 스타일, 자바스크립트 프로그램에서 웹 요소들을 구별하기 위해 자주 사용

 

자손 선택자 : 요소1 요소2

header h1 {
    font-weight: 300;
    font-size: 2.125em;
    color: #fff;
}

• 어느 한 태그안에 들어있는 다른 태그를 불러온다
• 태그끼리는 서로 띄어쓰기한다.

 

그룹 선택자 : 요소1, 요소2

h1,
h2 {
    font-weight: 300;
    font-size: 2.125em;
    color: #fff;
}

• 둘 이상의 요소에 같은 스타일을 동시 지정한다
• 태그끼리는 콤마(,)로 구분해준다
• 🐍 구글 스타일 가이드에 따르면 한 줄에는 한가지 의미만 있는게 좋다함. 따라서 위 예시처럼 엔터를 쳐주는게 보기 좋음

 

다른 CSS 선택자

연결 선택자, 속성 선택자, 가상 선택자

연결 선택자

🎨 CSS 연결 선택자 정리!

속성 선택자

🎨 CSS 속성 선택자 정리!

가상 선택자

🎨 CSS 가상 선택자와 기타 요소 정리!