20210524 CSS01 : css syntax, html에 연결방식, 선택자(기본, 복합), 가상 클래스 선택자

CSS01

CSS syntax

• 선택자{속성: 값; 속성: 값}
  • 선택자 : 스타일을 적용할 대상
  • 속성 : 스타일의 종료 (예.color)
  • 값 : 스타일의 값 (예.blue)
  • 속성과 값은 한줄에 하나의 속성과 값만 들어가게 하고 indent를 사용해서 쓴다.

CSS 선언 방식

• 내장 방식
  • : html내부에 style 태그 내부에 내용을 작성하는 방식
• 인라인 방식 : html의 요소에서 style의 전역속성을 통해 직접 스타일을 작성하는 방식
  • 최우선 순위라서 나중에 덮어쓰며 수정이 불가능 하다.
  • 수정 시 악영향을 미침
• 링크 방식 : <link />로 외부 CSS 문서를 가져와서 연결하는 방식 (보통 링크방식 사용)
  • 병렬 방식, 한번에 가져와서 연결하고 빨리 해석되는 CSS를 먼저 연결
• import 방식 : 최초 연결은 링크방식으로 html에 연결하고 나머지 CSS 파일들은 최초 연결파일에 import를 통해서 연결하는 방식 (직렬 방식 , 많이 사용되진 않음)
  • 링크방식으로 연결한 최초 CSS 파일에서 @import url("다른 CSS 경로"); 를 통해 다른 CSS 파일 연결
  • 앞에 작성한 최초 CSS 파일의 연결이 끝나야 import한 파일이 연결을 시작함 그래서 지연이 생김
    • 의도 없이 지연이 생기면 단점이지만, 지연을 의도하면 장점이되기도 함

CSS 선택자

기본 선택자

이름	기호	설명
전체 선택자	*	모든 요소를 선택
태그 선택자	.abc	html에서 태그명이 abc인 요소 선택
클래스 선택자	.abc	html에서 class 속성의 값이 abc인 요소 선택
아이디 선택자	#abc	html에서 id 속성의 값이 abc인 요소 선택

복합 선택자

• 기본 선택자를 조합해서 사용하는 선택자

이름	기호	설명
일치 선택자	abcxyz	선택자 abc , 선택자xyz를 붙여 사용시 둘다 동시에 만족하는 요소 선택 (태그는 기호가 안들어가고 구분하기 어렵기 때문에 태그 선택자는 항상 제일 앞에다 사용)
자식 선택자	abc > xyz	선택자 abc의 자식 요소 xyz 선택 (후손X, 바로 아래 해당 모든 요소, > 사용)
하위(후손) 선택자	abc xyz	선택자 abc의 후손 요소 xyz인 모든 것을 선택 (아래에 해당하는 모든 요소,띄어쓰기)
인접 형제 선택자	abc + xyz	선택자 abc의 다음 형제 요소 xyz 하나를 선택 (형제 요소 : 어디에 포함되지 않고 동등한 위치인 요소)
일반 형제 선택자	abc ~ xyz	선택자 abc의 다음 형제 요소 xyz 모두를 선택 (형제 요소 : 어디에 포함되지 않고 동등한 위치인 요소)

가상 클래스 선택자

• 어떤 행동을 했을때 동작하는 선택자 또는 특정한 요소를 선택하는 선택자

동작 관련 가상 클래스 선택자

이름	기호	설명
hover	abc:hover	선택자 abc요소에 마우스 커서가 올라가 있는 동안 선택
active	abc:active	선택자 abc요소에 마우스를 클릭하고 있는 동안(누르고 있는 상태) 선택
focus	input:focus	선택자 abc 요소가 포커스 되면 선택 focus가 될수 있는 요소 : html 대화형 콘텐츠(input, a, button, label, select 등 여러 요소) 또는 tabindex 속성을 사용한 요소

• 대화형 콘텐츠가 아니 일반 요소들이 focus를 가능케 하려면 해당 요소에 tabindex="-1" 속성을 넣어주면 된다.
• tabindex는 tab키를 사용해 focus 할수 있는 순서를 지정하는 속성임 (-1 값이 아닌 값은 논리적 흐름을 방해 하므로 -1을 권장)

tabindex 사용 예시

<div class="tabindex_test" tabindex="-1"></div>

.tabindex_test {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: 1s;
}

.tabindex_test:focus {
  width: 300px;
  height: 300px;
  background-color: royalblue;
}

선택 관련 가상 클래스 선택자

이름	기호	설명
First child	abc:first-child	선택자 abc가 형제 요소 중 첫째 라면 선택 (부모 요소 안에 구성하고 있는 요소들 중에서 첫째 라면 해당 선택이 됨)
Last child	abc:last-child	선택자 abc가 형제 요소중 막내라면 선택 (부모 요소 안에 구성하고 있는 요소들 중에서 막내 라면 해당 선택이 됨)
Nth child	abc:nth-child(n)	선택자 abc가 형제요소중 n째 라면 선택 (*:nth-child(2n) 괄호에 2n, 3n 등 배수로 넣으면 해당 배수의 요소만 선택가능하다.)
부정 선택자(not)	abc:not(xyz)	선택자 xyz가 아닌 abc요소 선택 (.fruits *:not(span) 처럼 어느 범위 내에서 span이 아닌 요소를 선택, 일단 범위를 제한해서 여러개의 요소들 중에 선택할 수 있는 상황을 만들어야 함)

• child 의 기준은 항상 부모 요소가 가지고 있는 요소들 중에 몇번째 인지를 만족하고, abc는 따로 같이 만족하는 로직이다.
• nth-child에서 n은 0부터 시작하는 zero-based numbering이라서 홀수 표현시(2n+1) 도 가능하다.
• 또한 (n+3) 를 넣어서 3번째 부터 주르륵 선택할 수도 있음 (1,2 배제되는 것임)
• (-n+3)을 넣으면 1,2,3 만 선택하게 됨