Web6 CSS _ 정리 02 : Button, Transition 1. Button hover : 커서가 버튼에 올려져있는 상태 active : 커서가 버튼을 클릭한 상태 2. CSS 애니메이션 이벤트를 지원하는 transition 마우스를 버튼에 올려두었을 때, 버튼의 색이 천천히 변하는 경우가 있다. 이처럼 일정 시간 동안 요소에 변화를 줄 수 있도록 해주는 것이 transition이다. transition / transition-delay / transition-duration / transition-property / transition-timing-function 3. transition을 지원하는 웹 브라우저 다양한 브라우저가 transition을 지원하고, 아래처럼 표시한다. 4.0 -webkit- : chrome 4.0 -moz- : firefox 3.1.. 2020. 4. 17. CSS _ 정리 01 : 선택자 CSS 선택자 1. 유형선택자 : 요소이름 ex) div {~~} 2. 전체선택자 : * ex) div * {~~} : div 태그 하위의 모든 것들에 적용한다는 의미 3. ID선택자 : # ex) #notice_board {~~} : notice_board라는 ID를 가진 것들에 적용한다는 의미 4. 클래스선택자 : . ex) .row {~~} : row라는 클래스를 가진 것들에 적용한다는 의미 5. 자식선택자 : > ex) body > p {~~} : body 태그의 직계 자식인 p 태그에 적용한다는 의미 주의할 점은 직계 자식만 해당한다는 것이다. p태그의 하위에 다른 태그들에는 적용되지 않는 것이다. 6. 자손선택자 : space ex) body p {~~} : body 태그의 하위에 존재하는 모.. 2020. 4. 17. 이전 1 2 다음