dh_0e

[CSS] 개인 과제 중 배운 문법 (Button's hover/active, transition, reset.css) 본문

내일배움캠프/HTML,CSS,JavaScript

[CSS] 개인 과제 중 배운 문법 (Button's hover/active, transition, reset.css)

dh_0e 2024. 5. 1. 03:37

hover / active (button)

button:hover - 모든 버튼 위에 커서가 올라갔을 때의 css를 수정

button:active - 모든 버튼들이 눌렸을 때의 css를 수정

id명이나 class명을 button 대신 넣으면 각각의 버튼의 hover, active를 수정할 수 있음

 

 

transition(변화) 속성

속성 정리
transition 선택자 변화에 시간 흐름을 추가하여 변화하게 하는 속성
transition-delay 변화가 끝나는 시간을 지연시킴
ex) transition-delay: 0.3s; // 0.3초 지연
transition-duration 변화하는 과정(시간)을 지연시킴
ex) transition-duration: 0.3s; // 0.3초 지연



 

 

reset.css

각 브라우저마다 CSS 기본 값이 다르므로 다르게 표현될 수가 있음

>> 일정한 코드(reset.css)를 가져와 초기 설정을 해주어 모든 브라우저에서 동일한 CSS 를 표현하게 함

 

https://meyerweb.com/eric/tools/css/reset/

 

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

위 링크에서 코드를 복사하여 HTML에서 link하여 사용하면 된다.

'내일배움캠프 > HTML,CSS,JavaScript' 카테고리의 다른 글

[JavaScript] localStorage  (0) 2024.05.08
[JavaScript] 개인 과제 중 배운 문법 (innerHTML, addEventListner, includes, toUpperCase, toLowerCase, Math.floor)  (0) 2024.05.01
[HTML] 개인 과제 중 배운 문법 (id/class, <script>태그(defer, type module), <link>태그)  (0) 2024.05.01
[JavaScript] 주요 문법 정리(3) ( 문서 객체 모델(DOM), Class와 상속, 클로저(Closure) )  (0) 2024.04.26
[JavaScript] 주요 문법 정리(2) (콜백 함수, 동기 vs 비동기, 비동기 작업의 동기적 표현)  (0) 2024.04.25
'내일배움캠프/HTML,CSS,JavaScript' Related Articles more