/*css로 쓴 글씨가 브라우저에 나올 수 있게 css파일 상단에*/

@charset 'utf-8

절대값

상대값

px

color

• hex : color : #ffffff
• rgb : color : rgb(0,255,255)
• rgba : color : rgb(0,255,255,.5)

디자이너가 준 색상에 opcaity가 있을 수 있으므로 스포이드로 색상을 확인하지말고 포토샾에서 확인하기

배경에만 투명도를 줬는지 텍스트에도 투명도를 줬는지 혹은 부모컨테이너에 줬는지 확인해야함.

단위

em : 단위가 쓰여진 곳의 원래 폰트 사이즈의 배수
rem : 루트 폰트 사이즈의 배수
width, height : px이 아닌 상대크기 단위(%,em,rem)이면 부모요소 기준으로 계산
루트 폰트 사이즈 : font-size가 없을 때 문서 폰트사이즈의 기본값 16px

• :root {}

px-em 계산 사이트 : www.toolo.kr/pxtoem/

vw , vh : viewport(현재창 + 마진) 너비, 높이
vmin, vmax : viewport 가로, 세로 중 짧은 곳, 긴 곳 기준으로 지정

min-with : 최소 너비

font-size : 3vw = 폰트사이즈가 viewport의 3퍼센트 크기로 유기적으로 변함 (반응형 구간에서만 사용)

• font-size의 배율
  150% = 1.5em

css 선택자

• {} : 모든 선택자
  #title {} : id 선택자
  .title {} : class 선택자

후손 선택자

• 앞선택자 뒤선택자 : 후손 선택자
• 앞선택자 > 뒤선택자 : 바로 아래 자식 선택자 선택

인접형제 선택자

• 앞선택자 + 뒤선택자 : 앞선택자 바로 뒤 형제선택자 하나 선택
• 앞선택자 ~ 뒤선택자 : 앞선택자 뒤의 모든 형제 선택자 선택

속성선택자

• a[target="_blank"] : target속성이 _blank인 것만
• a[target^="_blank"] : target속성이 _blank로 시작하는 것만
• a[target$="_blank"]: target속성이 _blank로 끝나는 것만
• a[target~="_blank"] : target속성 _blank가 포함되는 것만(단어절)
• a[target*="_blank"] : target속성 _blank가 포함되는 것만(문자절)

가상클래스 선택자

• :hover : 마우스를 올렸을 때
• :link : 링크인 경우 (=a태그)
• :visited : 방문한 기록이 있는 것
• :focus : 선택or포커싱이 되었을 때
• p:focus-within : p태그 안에 자식요소에 포커스가 걸릴 경우 p태그 스타일 지정가능

가상 요소 선택자

• 선택자:before, 선택자:after : 선택자 앞 혹은 뒤에 컨텐츠 추가. content 필수. p:before { content:''}

• :nth-child(n) : 구조선택자. n번째 요소 선택

  • :nth-child(even) : 짝수

  • :nth-child(odd) : 홀수

  • :nth-child(n+3) : 3번째부터 선택

  • :nth-child(-n+2) : 2번째까지 선택

  • :nth-child(n+2):nth-child(-n+4) : 2이상 4이하 선택\

  • 선택자 + 선택자 : 첫번째를 제외한 형제요소 선택

    nthmaster.ru 참조

• :first-child, :last-child : 첫번째 혹은 마지막 요소 선택

• h2:nth-of-type(2) : h2 종류들 중에 2번째 요소 선택

• first-of-type, last-of-type : 같은 종류들 중에 첫번째 혹은 마지막 요소 선택

• :checked : 선택되었을 때

input:checked + label : input이 체크되었을 때 바로 뒤 라벨 선택

부정선택자

• *:not(h1) : h1 빼고 모든 것

css 우선순위

• < 태그 < 클래스 < 속성 < id < 인라인 < !important
  구체적일수록, 가장 나중에 정의했을 수록 우선도 증가