✨MDN 사이트 많이 활용하기✨
✅ CSS(Cascading Style Sheets)
▲ Rule-based의 언어
▲ css는 module별로 각자의 versioning을 하고 있음
▲ cascading = 위에서 아래로 -> 위에서 정의된 요소들이 아래에도 전파가된다
▲ 자식은 부모의 요소를 물려받음
▲ 규칙 : 요소(selector)를 선택하고 중괄호{} 안에 스타일 선언
이렇게 선언한다.
▲ 개발은 css 외부 스타일로 하기 -> css와 html파일 따로 만들어 html의
<head>안에<link>를 이용하여 html파일과 csss파일 연결하기<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style/main.css"/> </head> <body> </body> <html>
<스타일 우선순위>
💫동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
💫적용 범위가 적을수록 우선시 된다.
tag스타일 < class스타일 < id스타일 < 인라인스타일
*소스코드의 순서가 뒤에 있으면 덮어쓴다.
<스타일 상속>
💫부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
-자식 요소에서 재정의 할 경우, 부모의 스타일을 덮어쓴다.
💫상속 되지 않는 속성도 있다.(예:배경이미지, 배경색 등)
✅ css에서의 주석
h1{
color:red;
/* font-size:9px; */
} ▲
/* 스타일 */로 주석을 처리함
▲ 설명뿐만아니라 임시적으로 스타일 적용시키지 않으려고도 사용함
✅ (선택자)Type Selector
▲ 하나의 전체 웹페이지에서 어떤 요소를 일관성있게 스타일을 적용시켜야할 때 사용
▲ 보통 style 상단에 위치
▲ Type Selector로는 특정 요소를 선택하면 안돼h1{ color:red; }
✅ (선택자)ID Selector
▲ 전역속성으로 모든 요소에 사용가능
▲ 고유이름/유일/유니크
▲ 문법 : # + id{}#hello{ color:red; }
✅ (선택자)Class Selector
▲ 전역속성으로 모든 요소에 사용가능
▲ 중복가능
▲ 한 요소는 class를 여러개 가질 수 있음(스페이스로 구분)
▲ 문법 : . + class{}.hi{ color:red; }
✅ (속성 선택자)Attribute Selector
▲ attribute란 태그외에 추가적인 요소 부분
▲ [attr] : 요소가 가지고 있는 속성을 선택
a[target]{ color:red; }
▲ [attr="value"] : 그 속성이 특정값을 가지고 있는 것을 선택
input[type="submit"]{ color:red; }
▲ [attr^="value"] : 캐럿(^)문자가 있으면 attr의 value가 value로 시작하는 요소를 선택
a[href^="http"]{ color:red; }
▲ [attr$="value"] : 달러($)문자가 있으면 attr의 value가 value로 끝나는 요소를 선택
a[href$=".com"]{ color:red; }
▲ [attr*="value"] : 애스터리스크(*)문자가 있으면 attr의 value가 value를 가지고 있는 요소들 다 선택
a[href*="btn"]{ color:red; }
✅ (가상 클래스 선택자)Pseudo-Class Selector
▲ 클래스 선택자보다 범위를 좁히는 방법(자식, 순번 등으로)
▲ :first-child : 같은 요소 중 첫번째 요소를 선택
li:first-child{ color:red; } .movie:first-child{ color:blue; }class를 가지고 first-child를 선택할 때, class로 고른것 중 첫번째가 아니라 class로 선택된 그 집단의 부모의 자식들 중 첫번째 자식이다. 그래서 class로 고를땐 그 스타일이 다 적용되는 것은 아니다. last-child도 마찬가지임
▲ :last-child : 같은 요소 중 마지막 요소를 선택
li:last-child{ color:red; } .movie:last-child{ color:blue; }
▲ :nth-child() : 몇번째 요소를 직접 선택할 수 있는 지정 선택
li:nth-child(3){ /*세번째 자식들 선택됨*/ color:red; }odd(홀수), even(짝수)도 사용 가능
▲ :first-of-type : 특정 타입들만 모아서 세고, 그 중에서 첫번째 요소 선택 -> :first-child의 보완
▲ :last-of-type : 특정 타입들만 모아서 세고, 그 중에서 마지막 요소 선택 -> :last-child의 보완
▲ :not(selector) : 선택된 요소들 중 ()안에 들어있는 요소들 빼고 선택
input:not(.pw){ /*input들 중 class명이 pw인 요소를 뺀 나머지들만 스타일 적용됨*/ color:red; } input:not([type=password]){ /*input들 중 type이 password인 요소를 뺀 나머지들만 스타일 적용됨*/ color:red; }
▲ :link : 그 링크에 방문한 적이 없으면 스타일이 적용됨
a:link{ color:red; }
▲ :visited : 그 링크에 방문한 적이 있으면 스타일이 적용됨
a:visited{ color:red; }
▲ :hover : 그 요소에 마우스를 올리면 스타일이 적용됨
input[type=button]:hover{ color:red; }
▲ :active : 그 요소에 마우스로 클릭하고 있을때 스타일이 적용됨
▲ :link, :hover, :visited가 active보다 뒤에 선언되면 active는 적용되지 않음. active는 link-visited-hover-active순서로 배치하는 것이 좋음input[type=button]:active{ color:red; }
▲ :focus : 그 요소에 Tab키를 사용하여 focus가 되었을 때, input태그를 눌러 입력할 때 스타일이 적용됨
input[type=button]:focus{ color:red; }
▲ :enabled : 활성화 되어있는 요소에만 스타일 적용됨
input[type=text]:enabled{ color:red; }
▲ :disabled : 비활성화 되어있는 요소에만 스타일 적용됨
input[type=text]:disabled{ color:red; }
▲ :checked : checked 되어있는 요소에만 스타일 적용됨
input[type=radio]:checked{ color:red; } input[type=checkbox]:checked{ color:red; }
✅ (가상 요소 선택자)Pseudo-Element Selector
▲ css3 문법에 맞춰 :: 사용하기
▲ ::before : html엔 존재하지 않지만, css가 가상으로 만들어낸 요소 앞에 스타일이 적용됨(배지나 메뉴사이에 구분하기 위해 사용/내용이 있는것 보단 꾸밈의 목적을 위해 사용)
.favorite::before{ content:'🎨'; }
▲ ::after : html엔 존재하지 않지만, css가 가상으로 만들어낸 요소 뒤에 스타일이 적용됨
.favorite::after{ content:'🎨'; }
▲ ::first-letter : 선택된 요소에서 첫번째 글자에 스타일 적용됨
.hi::first-letter{ color:red; }
▲ ::first-line : 선택된 요소에서 첫번째 줄에 스타일이 적용됨(단, 브라우저 사이즈에 맞게 개행이 된 첫번째 줄에만 스타일이 적용됨)
.hi::first-line{ color:red; }
▲ ::selection : 선택된 요소들 중 드래그 된 부분에만 스타일이 적용됨
.hi::selection{ color:red; }
✅ selector combination(선택자 결합)
▲ 하위 선택자 결합( ) : 두가지 선택자를 스페이싱으로 결합하여 선택된 요소들에 스타일이 적용됨
ul li:last-of-type{ color:red; }
▲ 자식 선택자 결합(>) : 앞에 선택자의 바로 직속 자식들 중 조건에 만족하는 요소에 스타일이 적용됨. ">"로 앞 선택자의 바로 직속 자식을 의미
ul > li:last-of-type{ color:red; }
▲ 일반 형제 선택자 결합(~) :
code의 형제들 중code보다 뒤에 선언된p에만 스타일이 적용됨code ~ p{ color:red; }
▲ 인접 형제 선택자 결합(+) :
code바로 뒤에p가 있으면 그 요소들에만 스타일이 적용됨(바로 옆에 있어야해)code + p{ color:red; }
▲ 그룹화 : 두가지 이상의 요소에 같은 스타일 적용시킬 떄 사용
p, span, code{ color:red; }
✅ Universal Selector(전체 선택자)
▲ 를 사용하여 html의 모든 요소를 선택(은 모든 요소를 의미)
▲ css파일 맨 윗부분에 선언*{ color:red; }
✅ 상속 제어
▲ initial : 상속 끊기
.child{ color:initial; /*속성의 기본값으로 돌려짐*/ }
▲ inherit : 무조건 상속받기
.parent *{ color:inherit; /*주변의 어떤 css값도 다 무시하고 부모의 css를 따르겠다*/ }
▲ unset : 부모로부터 상속받을 값이 있을땐 inherit,부모로부터 상속받을 값이 없을 땐 initial
