일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 그리디
- trie
- vector insert
- Next
- pm2
- Keys
- PROJECT
- router
- 자바스크립트
- JavaScript
- Express.js
- 그래프 탐색
- 게임 서버 아키텍처
- ERD
- branch
- 백준 1918번
- Github
- insomnia
- html5
- map
- string
- MongoDB
- 트라이
- HTTP
- localstorage
- 이분 탐색
- ccw 알고리즘
- MySQL
- DP
- Prisma
Archives
- Today
- Total
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:37hover / 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하여 사용하면 된다.