반응형

전체 글 251

CSS Transition 트렌지션 사용하기

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..

2. CSS 2024.12.03

CSS color 컬러의 종류 / :root { --main color: ;}

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..

2. CSS 2024.12.03

CSS selection (문구 드래그 시 색상 변경하기)

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

2. CSS 2024.11.30

CSS visited, hover, focus 동시에 사용하기

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 색상으로 변경

2. CSS 2024.11.30
반응형