드림코딩 엘리 : CSS 셀렉터, 기초이론 정리.

CSS 란?

-Cascading Style Sheet 

-style sheet : 잘 정리한 문서 한 장

-cascading : 폭포처럼 넘어가는 것,  정의된 세부사항 있으면 그것을 쓰고, 없으면 다음 지정된 파트로 넘어가는 것

 

Cascading 종류

-Author style :  개발자가 사용하는 css파일

-User style : 사용자가 지정한 스타일링

-Browser : 브라우저에서 기본적으로 사용하는 스타일링

-순서 : Author style → User style → Browser 

-! important : cascading의 연결고리를 끊는다. 연결고리를 무시하고 자신이 가장 중요하다고 한다. box구조를 잘못 나눔, bad smell, 안 쓰는 것이 좋다.

 

Selector : html에 어떤 태그들을 고를건지 규정하는 문법

-Universal = * : 모든 태그들을 고르는 것

-type = 태그이름(ex. div) : 모든 특정태그(ex. div)를 골라낸다.

-ID = #id 

-Class = . class

-State = :  : 태그 옆에 달 수 있다

-Attribute = [ ] : 해당하는 속성값만 고를 수 있다.

 

CSS 문법 형식

selector {

   property : value ;

}

 

* {

   color : green ;

}

 

li {

   color : blue ;

}                                : 구체적으로 가까이 있는 것이 우선순위 높아진다.

 

#special {

   color : pink ;

}

 

. red {

   width : 100px ;

   height : 100px ;

   background : yellow ;

}                                 : div태그에 class 속성. 높이와 너비 지정해준다.

 

button: hover {

   color : red ;

   background : beige ;

}                                : 버튼을 가져다 댈 때 색 지정

 

a [href] {

    color : purple ;

}                                : 링크연결된 것만 색 지정

 

a [href="naver.com"] {

    color : purple ;

}                                : 링크연결된 것 중 naver.cpm만 색 지정

 

a [href^="naver"] {

    color : purple ;

}                                : 링크연결된 것 중 nave로 시작하는 것만 색 지정

 

a [href$=".com"] {

    color : purple ;

}                                : 링크연결된 것 중 .com으로 끝나 는 것만 색 지정

 

 

박스모델

contents - padding - border - margin

 

하나씩 지정하기 : padding-top : 20px ;

시계방향으로 지정하기 : padding : 20px  20px 20px 20px ;

위아래만 지정하기 : padding : 20px 0px ;

 

하나씩 지정하기 : border-width : 2px;  border-style : solid;  border-color : pink;

한꺼번에 지정하기 : border : 2px solid pink ;

 

MDN CSS reference  참고

 

CSS Diner

https://fluckeout.github.io/  32개의 게임 -해보기