IT업계 종사자의 블로그

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; } 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 { 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..

inline-block은 1. 브라우저가 block으로 인식함.2. 높이를 가질 수 있음.3. 사방에 margin도 가질 수 있음.4. 바로 옆에 다른 요소가 올 수도 있음.5. but, 반응형 디자인을 지원하지 않는다.DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { margin: 20px; } div { display: inline-block; width: 50px; height: 50px; background-color: teal; } style> head> body> body>html>     결과

1. 실선 테두리 넣어보기DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin: 20; padding: 20px; background-color: thistle; } div { padding: 20px; border: 2px solid black; } #first { background-color: whitesmoke; width: 150px; height: 150px; } #second { background-color: teal; width: 100px; height: 100px; } #third { background-color: wheat; ..

1. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin: 20; padding: 20px; background-color: thistle; } div { height: 150px; width: 150px; padding: 10px; } #first { background-color: whitesmoke; } #second { background-color: teal; } #third { background-color: wheat; } #fourth { background-color: blanchedalmond; } style> head> body..