CSS 셀렉터

selectors - html의 어떤 태그를 고를건지 규정하는것

 

selector의 종류들

Universal * -- 모든태그 

type Tag -- 특정태그

ID #id -- 특정 id의 태그

Class .class -- 특정 class의 태그

State :

attribute []

 

html 가상개발환경 : jsbin.com

 

 

 

* {

  color: green;

}

 

-- 모든 태그의 컬러를 그린으로 설정.

 

그런데

 

li {

  color: blue;

}

 

-- li item의 컬러를 블루로 설정하면 universal 태그로 지정한것보다 더 강함. (태그 가까이 설정한 아이들이 더 강한 셀렉터이다. )

 

 

 

<div>태그는 block 레벨의 element임 => html문서에서 한줄을 모두 차지

 

이렇게 크기 조정도 가능

 

state 셀렉터의 hover(허공을 맴돌다) 는 마우스를 버튼 위의 올려놓으면 상태가 변화함.

anchor 태그( <a> )에서 속성값이 "href"가 들어가는 아이들의 컬러색을 보라색으로 

 

 

href=" 특정 속성값" 으로 지정가능

 

a[href^="naver"] naver로 시작하는 속성값을 가지는 태그

 

이외에도 a[href$=".com"] -- .com으로 끝나는 속성값을 가지는 태그가 있다.

 

li#special li중에서 id가 special을 갖는 것. (  태그 # id값  으로 범위를 특정가능)

 

컨텐츠 구성요소에서 

padding - 컨텐츠 안에 들어가는 공간, padding 값을 주면 해당 컨텐츠의 크기가 커짐.

margin - 컨텐츠 밖에 들어가는 공간

border - 경계선

padding-top, padding-right, padding-bottom 값을 따로 줄 수 있다.

padding: 20px 20px 20px 20px; 면 시계방향으로 (위 오른쪽 아래 왼쪽 순)

border도 마찬가지로 border: 20px dashed red; 로 한번에 줄 수 있다.

 

css의 부가적인 기능은 mdn css-reference

developer.mozilla.org/ko/docs/Web/CSS/Reference

CSS 참고서 - CSS: Cascading Style Sheets | MDN

 

 

* 참고 : 해당 이미지를 크게 보고 싶다면 ctrl + 마우스휠을 윗방향으로 돌리면 확대됨. (반대는 마우스휠을 아래로 )