margin padding
margin : 나를 기준으로 다른 요소들이랑 얼마나 간격을 둘지
padding : 내안의 공간
-> 개발자도구에서 수정 가능
미디어쿼리
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1 { text-align: center; font-size: 45px; } div.header{ border-bottom: 3px solid; text-align:left; } #content { } /*max : 0 px~여기까지 적용*/ /*min : max px~여기까지 적용*/ /*grid layout은 max~480 까지만 적용, 그보다 작아질시 세로 배치*/ @media (min-width: 480px) { /*grid-template-columns 속성 사용시 div 그리드 배치 수월*/ div.main{ display: grid; width:100%; grid-template-columns: 1fr 2fr; } #list { border-right: 3px solid; } } </style> </head> <body> <div class="header"> <h1> <a>WEB</a> </h1> </div> <div class="main"> <div id="list"> <ol> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ol> </div> <div id="content"> <h2>CSS</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </div> </body> </html> | cs |