css 기초

크기단위

1. px : 픽셀

- 1px :화소 1개. 해상도에 따라 상대적인 크기.

2. % : 지정된 사이즈에 상대적인 사이즈.

3. em : 배수단위(중첩된 요소 안에 사용하면 배수도 중첩.)

4. rem : 최상위 요소 기준 배수.

5. vh = viewport height : 스크린 높이, 100vh = 스크린높이의 100%

vw = viewport width : 스크린 넓이

색상표현단위

1. 키워드 : blue;

2. rgb() : rgb(192, 35, 35);

3. rgba() : rgb에 투명도포함.

4. HEX 코드단위 : #6495ed;

셀렉터

1. * { css } 

2. #아이디 { css } 

3. .클래스 { css } 

4. 태그[어트리뷰트="값"] { css } 

어트리뷰트와 값이 일치하는 모든 태그

5. 태그[어트리뷰트 ~= "값"] { css } 

어트리뷰트의 값이 공백+값을 가지는 태그

6. 태그[어트리뷰트 ^= "값"] { css } 

어트리뷰트의 값이 값으로 시작하는 태그

7. 태그[어트리뷰트 |= "값"] { css }

어트리뷰트의 값이 값과 같거나 값- 를 가지는 태그

8. 태그[어트리뷰트 $= "값"] { css }

어트리뷰트의 값이 값으로 끝나는 태그

9. 태그[어트리뷰트 *= "값"] { css }

어트리뷰트의 값이 값을 포함하는 태그

pseudo selector

1. 태그:first-child { css }

2. 태그:last-child { css }

3. 태그:nth-child(n) { css }

n에 숫자를 입력할 수도 있고, n을 이용하여 식을 넣을 수도 있다.

이부분이 조금 헷갈릴 수 있는데, child라는 말은 어떤 태그 하나의 자식들 전체를 봐야 한다.

html

위와 같이 html이 있고, 여기에 css를 적용했다.

css

div와 span 모두 first-child는 분홍색, last-child는 빨간색, 2n번째 child는 하늘색으로 줬다. 그리고 아무것에도 해당되지 않으면 노란색을 줬다.

위 코드들의 결과

첫번째 html코드를 보면 div7 이 div 중에서는 first-child처럼 보인다. 하지만 모든 태그의 부모인 body태그의 입장에서 봤을 때 first-child는 태그 하나뿐이므로 제일 처음 나오는 태그가 first-child이다.

last-child도 마찬가지이다.

div 8안에 span태그들을 넣었는데 그러면 다시 span태그들의 부모인 div 8 입장에서 봐야한다.

div 8 을 보면 짝수번째 이므로 일단 배경색이 하늘색이다.

그리고 div8의 자식들 중 첫번째인 span1이 분홍색, 마지막인 span4가 빨간색이됐다.

combinators 복합셀렉터

1. 부모 후손 {css} 

부모태그 + 띄어쓰기 + 후손태그 를 쓰면 된다.

2. 부모 > 자식 {css} 

부모태그 + > + 자식태그를 쓰면 된다.

3. 형제1+형제2 {css} 

형제 1 태그 바로 뒤에 있는 형제 2 태그만 선택한다.

4. 형제1 ~ 형제2 {css}

형제1 태그 뒤에 있는 모든 형제2 태그를 선택한다.

html

div 태그 아래에 있는 모든 p 태그를 div 의 후손이라 하고, div 바로 밑에 있는 p 태그만 자식이라 한다.

css

그래서 위와 같이 div p 로 선택한 태그들은 <div> 와 </div> 사이에 있는 모든 p태그이고, 글자색이 빨간색이다.

div > p 로 선택한 태그들은 div 바로 한 층 아래, 들여쓰기가 한 번만 된 p 태그들이고, 배경색이 하늘색이다.

결과

div + article을 하면 배경색이 보라색인 article만 선택되고, div ~ article을 하면 글자색이 노란색이고, border가 까만색인 article이 다 선택된다.