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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> /* 박스 모델, Box Model ** - HTML 태그는 화명상 출력이 될때., 사각형의 형태로 출력 1. 크기(width, height) 2. 테두리(border) 3. 여백(안쪽(padding), 바깥쪽(margin)) */ #box1 { /* border-style: solid; border-width: 10px; border-color: yellow; */ /* border: solid 10px black; */ /* border-top: 10px solid red; border-bottom: 20px dashed green; */ border: 2px solid balck; border-left: 20px solid black; /* border-right: 20px solid black; */ border-right: 0px; } #txt1 { /* background-color: : yellow; */ border: 1px solild gray; } /* 테두리** */ #tbl1 { border: 1px solid gray; border-collapse: collapse; /* 선 합치기 */ } #tbl1 td /* #tbl1할아버지 */{ border: 1px solid gray; padding: 5px; padding-left: 20px; } /* HTML 태그(객체)의 크기 1. 블럭태그 - 너비 : 항상 부모를 꽉 채운다. (100%) - 높이 : 내용물의 높이 2. 인라인태그 - 너비 : 내용물의 너비만큼 - 높이 : 내용물의 높이 그런데??? width, height 속성 - 태그의 종류에 상관없이 너비, 높이를 지정 가능 */ #box2 { border: 10px solid red; width: 100px; height: 100px; } #txt1 { width: 200px; height: 100px; } #tbl1 { width: 200px; /* height: 200px; 잘안씀 */ } #box3 { border: 1px solid black; width: 200px; height: 200px; /* padding: 20px; */ padding-left: 20px; padding-top: 50px; padding-right: 0px; padding-bottom: 0px; } .box { border: 1px solid black; width: 100px; height: 100px; } #box4 { background-color: yellow; /* margin-bottom: 30px; */ } #box5 { background-color: orange; /* margin: 20px; */ /* margin-top: 20px; margin-bottom: 20px; */ /* margin: 20px 50px 70px 100px; */ /* margin: 20px 50px; */ margin: 20px 0px; } #box7 { /* 박스 모델 정의 */ border: 10px solid black; width: 100px; height: 100px; padding: 10px; margin: 10px; } </style> </head> <body> <!-- ex12_box.htm --> [연습 : 박스]<br /><br /> <div id="box1">상자1</div> <div id="box2">상자2</div> 뒤의 내용물., <hr /> <input type="text" id="txt1" /> <hr /> <table id="tbl1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> <hr /> <div id="box3">안녕하세요 홍길동님~안녕하세요 홍길동님~안녕하세요 홍길동님~ 안녕하세요 홍길동님~안녕하세요 홍길동님~안녕하세요 홍길동님~안녕하세요 홍길동님~ 안녕하세요 홍길동님~안녕하세요</div> <hr /> <div id="box4" class="box">상자</div> <div id="box5" class="box">상자</div> <div id="box6" class="box">상자</div> <hr /> 위의 내용******** <div id="box7">상자</div> 아래의 내용 </body> </html> | cs |
'WEB > CSS' 카테고리의 다른 글
| 박스모델 이용한 게시판 예제 (0) | 2016.01.22 |
|---|---|
| 수평 정렬 - 인라인 태그, 블럭 태그 (0) | 2016.01.22 |
| 의사 클래스 (0) | 2016.01.22 |
| 텍스트 관련 속성 - 글자색, 정렬, 꾸밈, 들여쓰기, 크기, 두께, 서체, 수치표현 (0) | 2016.01.22 |
| css 색상표현법 (0) | 2016.01.22 |