IT업계 종사자의 블로그

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

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; } input[placeholder="username"] { background-color: greenyellow; } input[type="password"] { background-color: thistle; } style> head> body> div> form> form> div> body>html>     결과

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>      결과

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes - CSS: Cascading Style Sheets | MDNA CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can thedeveloper.mozilla.org 해당 웹사이..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } span { background-color: yellowgreen; padding: 5px; border-radius: 10px; } p span { color: white; } p ~ span { text-decoration: underline; } style> head> body> div> p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi e sequi ipsam odio dolorem. span>insidespan> p> addr..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } span { background-color: yellowgreen; padding: 5px; border-radius: 10px; } p span { color: white; } p + span { text-decoration: underline; } style> head> body> div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi e sequi ipsam odio dolorem. inside hello div> body>ht..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } span { background-color: yellowgreen; padding: 5px; border-radius: 10px; } p span { color: white; } style> head> body> div> span>hellospan> p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi e sequi ipsam odio dolorem. span>insidespan> p> div> body>html>   결과여기서 첫 번째 ..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } span { color: tomato; } style> head> body> div> hello p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi e sequi ipsam odio dolorem. inside p> div> body>html>  결과  여기서 안에 있는 span을 바꾸려면 어떻게 해야 할까? DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> b..