IT업계 종사자의 블로그

1. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin: 20px; background-color: thistle; } div { margin-left: 50px; height: 150px; width: 150px; background-color: whitesmoke; } style> head> body> div>div> body>html> margin을 하나만 적으면 사방에 적용된다.   결과     2.DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { bac..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin-top: 20px; margin-left: 10px; margin-right: 5px; margin-bottom: 10px; background-color: thistle; } div { margin-left: 50px; height: 150px; width: 150px; background-color: whitesmoke; } style> head> body> div>div> body>html>     결과

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin: 0; background-color: thistle; } div { margin-left: 50px; height: 150px; width: 150px; background-color: whitesmoke; } style> head> body> div>div> body>html>    결과  검사

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { margin: 0; background-color: thistle; } div { height: 150px; width: 150px; background-color: whitesmoke; } style> head> body> div>div> body>html>   결과

margin은 box의 border(경계)의 바깥에 있는 공간이다.(box의 기본 디폴트 성질임)   1. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } div { height: 150px; width: 150px; background-color: whitesmoke; } style> head> body> body>html>     결과   검사    2.DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> html { background-color: tomato; } body { backgro..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> div { height: 150px; width: 150px; background-color: tomato; } span { display: block; background-color: turquoise; } style> head> body> div>div> hello hello body>html>   결과

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> div { height: 150px; width: 150px; background-color: tomato; } span { background-color: turquoise; } style> head> body> div>div> div>div> div>div> hello hello hello body>html>     결과 span 은 박스와 다르게 span 옆에 바로 다른 span이 올 수 있다. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> div { height: 150px; width: 150px;..

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> head> body> body>html> style 안에 있는 div는body 안에 있는 각 div 들을 가리킨다.      결과 div 박스가 3개 연달아서 노출됨.참고로 박스의 옆에는 어떤 다른 박스도 오지 않는다.  박스의 이런 특징을 block 이라고도 한다.

* cascading: 폭포같은, 계속되는, 연속적인 브라우저가 CSS 코드를 읽을 때 위에 있는 코드부터 차례차례 읽는다.   그럼 20000

DOCTYPE html>html lang="kr"> head> title>Home - My first website.title> link href="styles.css" rel="stylesheet" /> style> h1 { color: yellowgreen; text-decoration: underline; font-weight: 300; font-style: italic; font-size: 50px; } address { text-align: center; color: tomato; } style> head> body> header> h1>The Nick Timesh1> header> main> 123 Road Altavistaaddress> main> footer>© 2024.NNfoo..