CSS6 [css] transition 속성 transition 모든 transtion 속성을 한 번에 사용한다. [transition 단축 문법] transition :(property) (duration) (timin-function) (delay); transition-delay 이벤트 발생 후 몇 초 후에 재생할지 지정한다 transition-duration 몇 초 동안 재생할지 지정한다. transition-property 어떤 속성을 변형할지 지정한다. [transition-property 속성 값] all - {transition: all 3s;}모든 속성 값에 전환 효과를 추가한다. 한 가지 속성 값만 추가 할 경우 - {transition : width 2s ;} 여러 가지 속성 값 추가 할 경우 - {transiotn :width.. 2021. 1. 31. css 전후 선택자 (before,after) css 전후 문자 선택자 ::before : 태그 앞 선택 ::after : 태그 뒤 선택 See the Pen Before and after character selector by onion (@saetmlda) on CodePen. 2020. 12. 20. 시작 문자(첫 번째 문자 선택, 첫 번째 문자 라인 선택) 시작 문자 선택자 ::first-letter : 첫 번째 글자를 선택 ::first-line : 첫 번째 줄을 선택 See the Pen Starting text by onion (@saetmlda) on CodePen. 2020. 12. 20. 반응 선택자 active : 마우스로 클릭하고 있는 상태 hover : 마우스를 올리고 있는 상태 .hover_btn:hover{ background: #fff; } 마우스 올렸을 때 .active_btn:active{ background: blue; color: #fff; } 마우스로 누르고 있을 때 2020. 12. 13. 동위 선택자 동위관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 모두 선택 .a + .b{ color:red; } 선택자A 바로 뒤에 위치하는 선택자B를 선택 선택 A 선택 B 선택 C .a ~ li{ color:red; } 선택자A 뒤에 위치하는 선택자B를 모두 선택 선택 A 선택 B 선택 C 선택 D 선택 E 선택 F 2020. 12. 13. css 속성 선택자 속성 선택자는 기본 속성 선택자와 문자열 속성 선택자로 나눌 수 있습니다. 기본 속성 선택자 속성 = 값 (input [type=text] 문자열 속성 선택자 속성~=값 : 속성 안의 값이 특정 값을 단어로 포함하는 태그 선택 속성|= 값 : 속성 안의 값이 특정 값을 단어로 포함하는 태그 선택 속성^=값 : 속성 안의 값이 특정 값으로 시작하는 태그를 선택 속성$=값 : 속성 안의 값이 특정 값으로 끝나는 태그를 선택 속성*=값 : 속성 안의 특정 값을 포함하는 태그를 선택 css 속성 선택자 li 태그 중에서 클래스가 end로 끝나는 클래스는 빨강 li 태그 중에서 total 클래스는 회색 클래스중 total단어가 있는 모든 클래스 선택 li 태그 중에서 total 클래스는 회색 클래스중 total단.. 2020. 12. 13. 이전 1 다음
