[CSS] 네이밍 규칙과 선택자 / id, class / div, span

1. 네이밍 규칙

naming methodology : Case Styles / 사람들이 여러 용어들로 정리하고 있어서..

1) kebab case (케밥 케이스) :  wrap-container   대시, 하이픈( - )을 사용한다. 원칙
2) pascal case (파스칼 케이스) : Wrap  첫 문자를 대문자로 표현한다.
3) snake case (스네이크 케이스) : wrap_container  언더바, 언더스코어( _ ) 를 사용한다.
4) camel case (카멜 케이스) : wrapContainer  첫 문자를 제외하고 단어 첫글을 대문자로 표기한다.
5) BEM (Blcok, Element, Modifier) : .header__navigation—navi-text  이름에서 볼 수있는 요소 3가지로 구성된 이름. 

_ _ , --, - 로 구분하며  class만을 사용한다.

BEM 방식 참고

 

 

2. css 선택자에 대한 이해

css는 계급이 정확해서 부모를 선택할 수 없다. (역행할 수 없다. 무조건 아래를 선택한다.)
뒤에 오는 것은 앞의 내용을 덮어쓴다.

*  :  (body까지 포함하는) 모든 선택자
공간 : tag 선택자와 후손 선택자
~  : ( 나를 제외한) 형제선택자. 붙여쓰기!
+  :  (내 아래의) 인접형제선택자. 붙여쓰기!
[class=""], [class*=""]  :  attribute 선택자
,  :  그리고 (따옴표 안에 각각의 위치를 정확하게 적는다.)
nth-child($)  : $번째 자식

nth-of-type($) : 같은 태그 중에 $번째

> : 자식 선택자

 

 

3. id와 class 선택자

스타일 지정을 위해 대상을 특정해주는 것.
id 가 class 보다 우선순위가 높다. (id 속성은 해당 요소에 부여된 class 속성에 관계 없이 작동한다.)
!important > inline style의 속성 > id > class

 

id 선택자  < id = ""> 

css에서   # 으로 가져온다.

id는 고유한 값으로 중첩될 수 없다.

유일한 요소, 한 문서에서 한 번만 사용이 가능하다.

주로 큰 틀에 사용하게 될  id

 

 

class 선택자 < class = "">

css에서   . 으로 가져온다.

복수의 요소, 한 문서에서 여러번 사용이 가능하다.

 

 

 

4. div와 span

그룹화 요소인 div와 span
div는 전체적인 레이아웃을 잡을 때, span은 텍스트 스타일 등 특정 부분에 스타일을 지정할 때 사용할 수 있다.

 

div : 블록 요소 / 줄바꿈 / 박스 단위

span : 인라인 요소 / 줄이 안바뀜 / 문장 단위

 

 

5. 속성 선택자 

Attribute Selector
HTML 태그의 속성명과 속성값을 선택자로 지정할 수 있는 기능입니다.

속성 선택자🧐 >>