IT업계 종사자의 블로그

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

기본 코딩DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } span { background-color: aquamarine; } style> head> body> span>hellospan> span>hellospan> span>hellospan> span>hellospan> span>hellospan> span>hellospan> body>html>  결과여기서 두번째, 네번째 span의 배경색을 다른 색으로 바꿔보자!DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { heigh..

pseudo selectors: 좀 더 세부적으로 엘리먼트를 선택해 주는 것!   기본 코딩DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } div { width: 300px; height: 300px; background-color: wheat; position: relative; } style> head> body> div>div> div>div> div>div> div>div> div>div> div>div> body>html>    결과  pseudo selectors 사용하기 (first-child & last-child)DOCTYPE html>html ..

1. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } div { width: 300px; height: 300px; background-color: wheat; } .green { background-color: teal; height: 100px; position: absolute; right: 0px; width: 100px; } style> head> body> div> div class="green">div> div> body>html>     결과          2. DOCTYPE html>html lang="kr"> head> title>The Ni..