IT업계 종사자의 블로그

기본 코딩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..

position relative 사용하기  기본 코딩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; width: 100px; } style> head> body> div> div class="green">div> div> body>html> (body: div안에 div 만들기)  결과 여기서 초록색 div를 아주 조금만 옮겨보자.DOCTYPE html>html lan..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 20px; } div { width: 300px; height: 300px; } #green { background-color: teal; position: fixed; opacity: 0.2; } #different { background-color: wheat; } style> head> body> div id="different">div> body>html>     결과

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 20px; } div { width: 300px; height: 300px; background-color: teal; } #different { top: 5px; left: 200px; position: fixed; background-color: wheat; width: 350px; } style> head> body> div>div> body>html> top, left, right, bottom 이라는 프로퍼티 중에서하나만 수정해도 노란색 div는 초록색 div 위로 가게 되어 있다.(더 이상 block이든 margin..

position: fixed--> 그 자리에 계속 위치해 있게 하는 것   1. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 1000vh; margin: 20px; } div { position: fixed; width: 300px; height: 300px; background-color: teal; } style> head> body> div>div> body>html>     결과 스크롤을 계속 내려도 div 박스가 계속 그 자이레 위치해 있다. postion: fixed; 를 적용하면 가장 위에 있는 레이어가 된다   2.DOCTYPE html>html lang="kr"> head> title..

1. flex-wrap: wrap; DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 100vh; margin: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } div { display: flex; justify-content: center; align-items: center; width: 300px; font-size: 240px; color: white; height: 300px; background-color: teal; } #second { background-color: whea..

자식 엘리먼트에도 flex를 적용할 수 있다!DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 100vh; margin: 20px; display: flex; justify-content: space-between; align-items: center; } div { display: flex; justify-content: center; align-items: center; width: 300px; font-size: 240px; color: white; height: 300px; background-color: teal; } #second { background-color: wheat; } style> ..

flex-direction 은 두 가지 값을 가진다.  1. column2. row (수평)기본적으로 display: flex 이면 row(수평) 값을 가진다. flex-direction: column 이면주축은 수직이 되고, 교차축은 수평이 된다. (그냥 외워라) 한마디로 뒤바뀐다!!!!DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> body { height: 100vh; margin: 20px; display: flex; justify-content: center; flex-direction: column; align-items: flex-end; } div { width: 300px; height: 300px; backgro..