IT업계 종사자의 블로그

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

1. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } form { border: 1px solid salmon; display: flex; flex-direction: column; padding: 20px; } form:hover input { background-color: sienna; } style> head> body> form> input type="text" name="" id="" /> input type="text" name="" id="" /> input type="text" name="" id="" /> form> body>html> form..

focus-within : focused인 자식을 가진 부모 엘리먼트에 적용되는 것. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } form { border: 1px solid salmon; display: flex; flex-direction: column; padding: 20px; } form:focus-within { border-color: seagreen; } style> head> body> form> input type="text" name="" id="" /> input type="text" name="" id="" /> input type="..

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

CSS의 visited는 링크에만 적용되는 태그다. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } a:visited { color: tomato; } style> head> body> a href="https://appl.com">Go to applea> body>html>    결과링크 클릭 전: 파랑색링크 클릭 후, 화면 돌아와서 새로고침 시 : 빨간색

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 50px; } input:focus { background-color: tomato; } style> head> body> div> input type="text" /> input type="text" /> div> body>html>     결과 커서로 클릭하거나 탭 키보드 버튼을 누르면 input 박스가 빨갛게 변한다.

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