CSS 속성 및 태그 정리 - 1

배경 이미지 관련 속성

background-color	배경색 지정
background-clip	배경색이나 이미지를 어디까지 적용할지 지정
background-image	배경 이미지 지정
background-repeat	배경 이미지 반복 방법 지정
background-position	배경 이미지의 위치를 지정
background-origin	배경 이미지를 배치할 기준
background-attachment	배경 이미지를 문서에 고정
background	하나의 속성으로 배경 스타일을 한꺼번에 지정
background-size	배경 이미지의 크기를 조절

​

​

선형 그레이데이션 속성

방향	끝지정을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용,사용할 수 있는 예약어는 top, bottom, left, right
각도	그레이데이션이 끝나는 각도를 지정, 값은 deg로 표기
색상 중지접	쉼표(,) 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정

​

​

​

원형 그레이데이션 속성

모양	ellipse	타원형의 그레이데이션을 나타내는 기본값
	circle	원형의 그레이데이션을 나타낸다.
크기	closest-site	그레이데이션 가장자리가 그레이데이션 중심에서 가장 가까운 측면에 닿게 한다.
	closest-corner	그레이데이션 가장자리가 그레이데이션 중심에서 가장 가까운 꼭지점에 닿게 한다.
	farthest-site	그레이데이션 가장자리가 그레이데이션 중심에서 가장 먼 측면에 닿게 한다.
	farthest-coner	그레이데이션 가장자리가 그레이데이션 중심에서 가장 먼 꼭지점에 닿게 한다.
위치	위치 at을 앞에 붙인 후 키워드나 백분율을 사용
색상 중지점	쉼표(,) 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정

​

​

연결 선택자

하위 선택자	상위요소 >= 하위요소	상위 요소에 포함된 모든 하위요소를 선택
자식 선택자	부모요소 > 자식요소	부모 요소에 포함된 자식 요소만 선택
인접 형제 선택자	요소1 + 요소2	요소1 이후 맨 처음 오는 형제 요소를 선택
형제 선택자	요소1 ~ 요소2	요소1과 같은 형제인 모든 요소를 선택

​

​

속성 선택자

[속성]	해당 속성이 있는 요소	[required]
[속성=값]	지정한 속성값이 있는 요소	[target=_blank]
[속성~=값]	지정한 속성값이 있는 요소	[class ~= button]
[속성 |=값]	지정한 속성값이 포함된 요소(하이픈포함, 단어별)	[title |= us]
[속성 ^=값]	지정한 속성값으로 시작하는 요소	[title ^= eng]
[속성 $=값]	지정한 속성값으로 끝나는 요소	[href $= xls]
[속성 *=값]	지정한 속성값의 일부가 일치하는 요소	[href *= w3]

​

​

​

가상 클래스

:link	방문하지 않은 링크에 스타일을 적용
:visited	방문했던 링크에 스타일을 적용
:hover	지정한 요소에 마우스 포인터를 올려 놓을 때 스타일 적용(마우스 포인터로 선택)
:active	지정한 요소를 활성화했을 때 스타일 적용(마우스 클릭)
:focus	지정한 요소에 초점이 맞춰졌을 때 스타일 적용(탭키를 이용해서 선택)
:target	앵커 대상에 스타일을 적용
:enabled	지정한 요소를 사용할 수 있는 상태일 때 스타일 적용
:disabled	지정한 요소를 사용할 수 없는 상태일 때 스타일 적용
:checked	선택한 요소의 스타일을 적용
:not	지정한 요소가 아닐 때 선택해서 스타일을 적용

​

​

​

​

구조 가상 클래스

:only-child	부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택
A:only-type-of	부모 안에 A 요소가 하나일 때 선택
:first-child	모 안에 있는 요소 중에서 첫 번째 자식 요소를 선택
:last-child	부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택
A:first-of-type	부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택
A:last-of-type	부모 안에 있는 A 요소 중에서 마지막 요소를 선택
:nth-child(n)	부모 안에 있는 모든 요소중에서 n 번째 자식 요소를 선택
:nth-last-child(n)	부모 안에 있는 모든 요소중에서 끝에서 n번째 자식를 선택
A:nth-of-type(n)	부모 안에 있는 A 요소 중에서 n번째 자식를 선택
A:nth-last-of-type(n)	부모 안에 있는 A 요소 중에서 끝에서 n번째 자식를 선택 ​

​

​

​

가상요소

::first-line	첫 번째 줄에 스타일 적용
::first-letter	첫 번째 글자에 스타일 적용
::before	특정 요소의 앞에 지정한 콘텐츠 추가
::after	특정 요소의 뒤에 지정한 콘텐츠 추가

​