반응형
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>샘플</title> <style> .box1{border:4px solid green; line-height: 200px;} .box2{border:4px solid green; line-height: 200px;} .box3{border:4px solid green; line-height: 200px;} .box4{border:4px solid green; line-height: 200px;} .boxA{border:4px solid RED; line-height: 200px;} </style> </head> <body> <div class="box1" > BOX1 </div> <div class="boxA"> <div class="box2"> BOX2 </div> <div class="box3"> BOX3 </div> </div> <div class="box4"> BOX4 </div> </body> </html> | cs |
두번째와 세번째 박스를 그룹화 했다.
레이아웃
박스가로정렬
new2 copy.html반응형
'매일코딩 > HTML&CSS3' 카테고리의 다른 글
| 5.레이아웃 - 박스너비 고정하기 (0) | 2016.11.02 |
|---|---|
| 4.레이아웃 - 칼럼 탈락 현상 (0) | 2016.11.02 |
| 3.레이아웃 - 박스너비 지정 (0) | 2016.11.02 |
| 3.레이아웃 - 가로 정렬할 박스의 개수 변경 (0) | 2016.11.01 |
| 2.레이아웃 - 박스가로정렬 (0) | 2016.11.01 |
댓글