5_css3_(명령어정리)

@반응 선택자
#id:active{}
#id:hover{}
@기본 속성 선택자
div[name=name]{}
@자손선택자
#id>ul>li
@후손선택자
#id li
@동위선택자
#선택자a + 선택자b{}
#선택자a ~ 선택자b{}
@체크상태선택자
input[name=name]:checked{}
@포커스 선택자
#inputid:focus, #inputPwd:focus{}
@사용 가능 여부 선택자
option:enabled{}
option:disabled{}
@형제 관계 태그 중 첫 번째 태그 선택
#id p:first-child{}
@형제 관계 태그 중 마지막 태그 선택
#id p:last-child{}
@형제 관계 태그 중 앞에서 수열번 째 태그 선택
#id p:nth-child(2n){}
@형제 관계 태그 중 뒤에서 수열번 째 태그 선택
#id p:nth-last-child(4n){}
@형제 관계 태그 중 첫 번째 태그 선택
#id p:first-of-type{}
@형제 관계 태그 중 마지막 태그 선택
#id p:last-of-type{}
@형제 관계 태그 중 앞에서 수열번 째 태그 선택
#id p:nth-of-type(2n){}
@형제 관계 태그 중 뒤에서 수열번 째 태그 선택
#id p:nth-last-of-type(2n){}
@부정 선택자
#id p:not(:nth-of-type(2n-1)){}
@글꼴 변경
선택자{ font-family: "글꼴이름" }
@텍스트 밑줄 없애기
선택자{ text-decoration: none; }
@밑줄
선택자{ text-decoration: underline; }
@윗줄
선택자{ text-decoration: overline; }
@삭제선
선택자{ text-decoration: line-through; }
@문단정렬
선택자{ text-align: center, left, right, justify;}
@장평
선택자{ text-height : ??px; }
@불렛 모양 변경
선택자{ list-style-type: circle; }
@불렛 모양 없애기
선택자{ list-style-type: none; }
@불렛 대신 이미지 삽입
선택자{ list-style-image:url("???"); }
@배경색 설정
{background-color:???;}
@배경 이미지 설정
{background-image : url("???");}
@배경 크기 설정
{background-size: ? ?;}
@배경 반복여부 설정
{background-repaet: no-repeat;
@배경 이미지 위치
{background-position: 가로 세로;}
@인라인요소(width, height 무시됨)
{display: inline;}
@인라인블럭요소(width, height 사용가능)
{display: inline-block}
@블럭요소
{display: block;}
@padding
테두리와 콘텐츠 사이의 거리
@margin
다른 요소들과의 간격
@position : relative
속성이 설정된 요소 내 하위 요소들은 top, bottom
left, right 속성을 이용하여 위치를 지정할수 있음
@position : absolute 속성은 기본적인 요소의 배치
순서를 무시하고 지정된 절대 위치(절대좌표)에
요소를 표시하게 하는 속성, 단 상위요소가 relative
또는 absolute속성을 가지고 있는 경우 상위요소를 
기준으로 상대적인 위치를 가지게됨
@position : fixed
브라우저 창을 기준으로 요소가 항상 고정된 위치를 
가지게하는 속성
@z-index : 0~100~1000
요소가 쌓이는 순서를 지정하는 속성
지정된 숫자가 클수록 위쪽에 쌓임
relative, absolute, fixed position이 설정된 요소에 동작함
@visibility: hidden 
요소는 보이지 않지만 페이지 공간을 차지하고있음
@display: none
요소도 보이지 않고, 공간도 차지하지 않음
@float : (left, right)
요소를 띄어서 정렬하는 속성
clear : (both, left, right)
float로 인해 요소들이 띄어져 흐르는 상태를 해제하는속성
~~~~~~~~~~~2차원 변형~~~~~~~~~~
@이동
transform : translateX(??px) , translateY(??px), 
  translate(?px, ?px)
@확대 축소
transform : scaleX(?) , scaleY(?) , scale(?,?)
@회전
transform : rotate(??deg)
@뒤틀기
transform : skewX(??deg), skewY(??deg) 
  skew(??deg, ??deg);
~~~~~~~~~~트랜지션~~~~~~~~~~~~
시간에 따라 웹 요소의 스타일 속성이 조금식 바뀌는것

transition-property: 속성, 속성, 속성, ...;
속성지정후 duration 하면 각속성마다 시간설정할수있음
transition-duration: ?s;
?초만큼 진행시간설정
transition-delay: ?s;
?초만큼 지연시간설정