IT업계 종사자의 블로그

우리는 원하는 만큼 애니메이션을 만들고 재생시킬 수 있다. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> @keyframes superSexyCoinFlip { from { transform: rotateX(0); } to { transform: rotateY(360deg); } } img { border: 10px solid black; border-radius: 50%; animation: superSexyCoinFlip 5s ease-in-out; } style> head> body> img src="img/pic.jpg" /> body>html>     결과  마우스 오버를 하지 않아도 이미지가 로테이트 된다. (참고) ..

https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDNThe transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.developer.mozilla.org

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> img { border: 10px solid black; border-radius: 50%; } img:hover { transform: rotateZ(90deg); } style> head> body> img src="img/pic.jpg" /> body>html>     결과  마우스 hover하면 90도로 회전한다.    DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> img { border: 10px solid black; border-radius: 50%; transition: transform 5s..

기본 코딩DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> img { border: 10px solid black; border-radius: 50%; } style> head> body> img src="img/pic.jpg" /> body>html>여기서 img src는VS code에 이미지가 저장된 경로를 불러온 것   결과  자, 이제 transform 적용해 보기DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> img { border: 10px solid black; border-radius: 50%; transform: rotateY(85deg); ..

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

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 안에 텍스트를 입력하면 텍스트는 여전히 검정색임)

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } button:active { background-color: tomato; } style> head> body> div> button>Hellobutton> div> body>html>    결과 버튼을 클릭하면 버튼이 빨간색으로 변한다.

placeholder에 "name" 이라는 단어를 포함한 모든 input의 배경색을 pink로 설정해보기 DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } input { border: 1px solid wheat; } input:required { border-color: tomato; } input[placeholder~="name"] { background-color: pink; } style> head> body> div> form> input type="text" placeholder="First name" /> input type="text" placeh..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } input { border: 1px solid wheat; } input:required { border-color: tomato; } style> head> body> div> form> form> div> body>html>      결과