[CSS] Rock's Easyweb - Back to Basic(1) : 컬러, 단위, 선택자, CSS코드 검사

 

[웹표준]

HTML - 내용전달

CSS - 모양(스타일)

JAVASCRIPT - 동적, 조작

 

 

 

 

 

[컬러]

모든 브라우저에서 동일하게 지원하는 140개의 컬러네임

이것 외에도 헷갈리는 개념은 아래 사이트에서 잡을 것(백과사전처럼 이용)

https://www.w3schools.com/colors/colors_names.asp

HTML Color Names

 

 

 

 

 

[단위]

 

%

: 부모가 만들어준 공간에서의 비율

 

em

: 부모 중 em 단위가 쓰여진 곳의 폰트사이즈 배수 (타고타고 올라가는 거 유의하기)

( width, height에서도 사용가능 - 기준은 폰트사이즈 기준.

body의 fontsize를 16px로 지정하고 자식 요소 박스의 width,height를 6.25em으로 지정 시 가로세로 100px가 됨)

- 쌤 曰 국내 사이트에서 이 단위를 잘 쓰는 사이트는 못 봤고 해외에서는 아주 잘 쓴다.

  이걸 잘 썼으면 좋겠다. 잘 쓰면 수정도 용이하고 좋은 단위임.

 

rem

: r 문서의 기본값인 16px의 배수. (root : 기본·근본)

-> 이 친구를 바꾸려면 CSS에서 :root{font-size}를 바꿔주면 됨

 

 

단위변환사이트

http://pxtoem.com/

PXtoEM.com: PX to EM conversion made simple.

 

 

vh, vw

: 부모 영역의 100%를 주는 것과 뷰포트의 100을 주는 것의 차이는

부모 영역의 100%를 주면 마진값이 있는데 뷰포트로 주면 마진값없이 보이는 부분 다 차지함

(+스크롤이 생기므로 vw를 쓸 때는 절대로 100%를 쓰면 안 됨

vh는 가넝한데 예를들어 height를 1024px로 정해버리면 19인치 모니터를 쓰는 사람에게만 height가 꽉 채우고

더 큰 모니터를 쓰는 사람에게는 덜 채우게 되버리니까 화면높이를 꽉채우고 싶을 땐 100vh를 쓴다.)

 

 

 

 

 

 

[태그 선택자]

긴글에서 인덱스 이동을 위한  a태그 내부링크를 줄때, iutup과 label을 연결할 때만 ID를 주고

나머지는 다 클래스를 주는 게 좋음. 유지보수 편의성을 위해서임.

 

 

 

 

 

[형제 선택자]

h2 + ul : 바로 밑 형제

h2 ~ ul : h2 밑에 있는 모든 형제인 ul 다~

 

 

 

 

 

[속성 선택자]

input[type=""]{} :input 태그 중에 type이 ""인 것 선택하기

 

a[target]{} : a 태그 중에 target 속성이 있는 것 선택하기. 공백은 자식요소를 의미하니까 a와 []사이에 공백이 있으면 안됨.

 

a[target="_blank"]{} : a태그 중에 target 속성이 blank인 것 선택하기

 

h2[class^="main"]{} : h2 태그중에 class 속성이 main으로 시작하는 속성 선택하기

 

 

 

 

 

 

• HTML문서에서 키보드에 Tab을 눌렀을때 포커스가 걸리는 태그는 link, button, input 뿐이다.
• 이 포커스를 없애고 싶으면 outline: none;을 사용한다.
• 포커스를 꾸미고 싶으면 :focus{}를 사용한다.
• 포커스가 잡힌 상태에서 눌렀을 때(누르는 순간)의 색상을 꾸미고 싶으면 :active를 사용한다.
• 이미 방문한 링크의 스타일을 꾸미고 싶으면 :visited를 사용한다. (이건 요새 잘 안 씀)

 

 

 

 

 

 

[before, after 선택자]

 

javascript의 before, after는 태그 밖을 기준으로 앞뒤를 의미하는 것이고

 

 

html,css의 before, after는 기존 내용(컨텐츠)의 기준으로 앞뒤를 의미하는 것이다.

 

 

 

 

 

[구조 선택자]

짝수 선택 : nth-child(2n){}  또는  :nth-child(even)

홀수 선택 : nth-child(2n+1){}  또는 :nth-child(odd)

3번째 이후로 다 선택 : :nth-child(n + 3)

3번째 이전 꺼 다 선택 : :nth-child(-n + 3)

2번째~5번째까지 선택 : :nth-child(n + 2):nth-child(-n + 5){}

1번째 li 빼고 모든 형제 li 선택 : nav ul li + li{}

 

nth-of-type(n) : 타입이 같은 것들 중에 n번째

또는

first-of-type : 같은 타입들 중에 1번째

last-of-type : 같은 타입들 중에 마지막

 

 

 

 

 

[상태 선택자]

 

input:checked + label{ color: blue; text-decoration: underline; }

-> input에 체크가 되면 label의 스타일을 바꾼다.

 

 

 

#location:target{}

-> 링크(a태그로 내부링크)와 아이디(#location)를 연결해서 지목이 되면 스타일을 바꾼다

 

 

button:disabled{}

-> 폼 양식을 다 입력하지 않으면 버튼을 비활성화시키는데<button disabled로> 그 버튼 꾸미는 거

 

 

 

 

 

[부정 선택자]

header *:not(h1){ color:green; }

-> header안에 모든 선택자 중에 h1만 빼고 모두 그린색 폰트

 

li:not(:last-child){background: silver;}

->막내한테만 백그라운드 실버 주지 마

 

 

 

 

 

 

[CSS Lint]

 

CSS 코드 검사해주는 사이트

 

http://csslint.net/

CSS Lint