IT업계 종사자의 블로그

media query 란?오직 CSS 만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다.   DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { display: flex; height: 100vh; align-items: center; justify-content: center; } div { background-color: teal; width: 200px; height: 200px; } @media screen and (max-width: 600px;) { div { background-color: tomato; } } style> head> body> div>div> body>html> 해석: 스크린이 600px..

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

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; } 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; } 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>   결과여기서 첫 번째 ..

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

flex box의 특징 1. 자식 엘리멘트에는 어떤 것도 적지 않아야 한다.   ㄴ부모 엘리먼트에만 명시해야 됨.  DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { margin: 20px; display: flex; } div { width: 300px; height: 300px; background-color: teal; } style> head> html>  결과오옷 옆으로 나열되는 block을 만들었닷!!

공통적으로 적용되는 것을class 태그로 모으기DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { margin: 20px; } .btn { padding: 5px 10px; border-radius: 5px; } .teal { background-color: teal; } .tomato { background-color: tomato; color: white; } style> head> body> hello hello hello hello hello hello hello body>html>    결과오 버튼같아..!