CSS 기초 - CSS작성순서 팁 / 선택자 [attribute] 알아보기

CSS 작성 순서와 간단한 작성 팁을 알아보자.

 

 

 

 

CSS 작성 순서

 

 

* CSS는 한꺼번에 하지 않는다.

 

1. 덩어리부터 선택자 만들기(형제순서 -> 다음 형제순서 중, 가장 첫번째 형제 -> 그 자식 선택자 -> ...)

2. 하나씩 순차적으로 위에서↑ 아래로↓, 밖에서 ↘안으로↙ CSS 하기.

3. 레이아웃 먼저 잡는다.

4. 요소에 font가 있을 땐 font, line height부터 CSS 한다.

 

 

 

 

 

 

 

 

선택자 지정 몇 가지

 

div  ul{   } : 하위 선택자 (=띄어쓰기로 다음 선택자 지정)

-하위 요소 모두 해당

 

div>ul{   } : 자식 선택자

- 바로 아래 자식만 해당

 

 

h1+ul{   } :

- h1 뒤의 ul을 선택

 

h1~ul{   } :

- 내 앞에 h1이 있으면 이후의 ul을 모두 선택

 

 

 

*참고

<h1>태그에는 class선택자를 바로 주지 않고, 따로 제목을 만들어서 class로 지정한다.

<h1~h6>의 헤딩태그는 원활한 검색을 위해 구조를 만들어 둔 것이기 때문에, 제목의 기능을 하도록 내버려 두자!

 

 

 

 

 

 

[attribute] 선택자 몇 가지

 

^ 시작하는 단어

div[class^="testBox"] { background-color: skyblue; }

"testBox"로 시작하는 class 요소를 모두 선택한다.

 

 

---

 

 

 

$ 끝나는 단어

div[class$="Box"] { background-color: skyblue; }

 

 "Box"로 끝나는 모든 class 요소를 선택한다.

 

 

 

---

 

 

 

 

* 포함하는 단어

div[class*="Box"]  { background-color: skyblue; }

"Box"를 포함하는 모든 class 요소를 선택한다.