IT업계 종사자의 블로그

https://matthewlein.com/tools/ceaser  Ceaser - CSS Easing Animation Tool - Matthew LeinChoose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make themmatthewlein.com

CSS에서 Transition(트렌지션)이란? 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법이다.   1. 기본 코딩DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> a { color: wheat; background-color: tomato; text-decoration: none; padding: 3px 5px; border-radius: 5px; } style> head> body> a href="#">Go homea> body>html>  결과버튼 완성!     2. hover 효과 적용해보기DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> st..

CSS 컬러의 종류 1. 16진수 컬러(hexadecimal color)ex. #FCCE00;  2. RGBex. rgb(252, 206, 0);ex. rgba(252, 206, 0, 0.5);         ㄴ 여기는 알파(a) 는 투명도  DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> :root { --main-color: #489ee3; } body { height: 1000vh; margin: 50px; } p { background-color: var(--main-color); } a { color: var(--main-color); } style> head> body> p>야 시 시p> div> a href="#">w..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } p::selection { background-color: yellowgreen; } style> head> body> p>안녕하세요 반갑습니다. CSS 독학 독하게 하는 중입니다.p> body>html>      결과문구를 드래그하면 yellowgreen으로 바뀜ㅋㅋ 오.. 신기해   (참고)https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } input::placeholder { color: slateblue; } style> head> body> form> input type="text" placeholder="name" /> form> body>html>     결과input 박스 안의 placeholder 색상이 slateblue로 변경되었다. (하지만 input 안에 텍스트를 입력하면 텍스트는 여전히 검정색임)

1. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } form { border: 1px solid salmon; display: flex; flex-direction: column; padding: 20px; } form:hover input { background-color: sienna; } style> head> body> form> input type="text" name="" id="" /> input type="text" name="" id="" /> input type="text" name="" id="" /> form> body>html> form..

focus-within : focused인 자식을 가진 부모 엘리먼트에 적용되는 것. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } form { border: 1px solid salmon; display: flex; flex-direction: column; padding: 20px; } form:focus-within { border-color: seagreen; } style> head> body> form> input type="text" name="" id="" /> input type="text" name="" id="" /> input type="..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } a:visited { color: tomato; } a:hover { color: teal; } a:focus { color: turquoise; } style> head> body> a href="https://appl.com">Go to applea> body>html>    결과   마우스 오버 시: teal 색상으로 변경마우스 클릭 시: turquoise 색상으로 변경클릭 후 새로고침 시:  tomato 색상으로 변경

CSS의 visited는 링크에만 적용되는 태그다. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } a:visited { color: tomato; } style> head> body> a href="https://appl.com">Go to applea> body>html>    결과링크 클릭 전: 파랑색링크 클릭 후, 화면 돌아와서 새로고침 시 : 빨간색

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } input:focus { background-color: tomato; } style> head> body> div> input type="text" /> input type="text" /> div> body>html>     결과 커서로 클릭하거나 탭 키보드 버튼을 누르면 input 박스가 빨갛게 변한다.