css + 연산자

css + 연산자

css를 작성할 때 뭔가 합쳐서 사용을 할 때는 + 이외에도 상당히 많이 있고 연산자의 종류도 생각보다 많다.

 

자주 쓰는 것을 쓰기 때문에 접할 길이 없다면 이용할 일도 없다.

하지만 알고 있다면 요소 요소마다 적용하고 응용을 할 수 있으므로 편리하다.

https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

반드시 기억해야 하는 CSS 선택자 30개

* : 전체 선택자 html 하위 모든 엘리먼트에 속성이 들어간다.

보통 브라우저마다 약간 다른 기본 css를 제거하기 위해 초기화 개념으로 쓴다.

 

태그 선택자 : 태그명

div {}

p {}

span {}

h1{}

등 직접적인 태그 이름 옆에 css 스타일을 적용시킨다.

 

id 선택자 : #

<div id="myDiv"></div>

엘리먼트에 id를 주고

css에서 #아이디로 스타일을 먹인다.

#myDiv {}

아이디는 유니크해야 하고 페이지에 하나만 존재해야 한다. 여러개를 쓸 경우는 클래스를 활용하자.

 

클래스 선택자 : .

쩜을 붙인다.

<div class=".myDiv"></div>

.myDiv{}

한개 이상 여러개가 될 수 있다.

 

좀 더 명시적으로 하려면 태그명 + id or class를 써도 된다. 협업을 할 때 보통 좀더 몇시적으로 하기 위해서 이러한 경우도 있다.

 

h2#myDiv

span.myDiv

 

형제 연산자도 의외로 자주 쓰인다.

 + 를 이용한다.

 

형제 요소일 때 따로 css를 먹여야 할 때 ~를 쓴다.

#myDiv ~ span {}

 

인접한 형제 선택자 :  +

#myDiv + div :