CSS레이아웃3 7.레이아웃 - 박스 겹치기 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849샘플.boxA{boder:solid 8px green; background-color:gold; color:pink}.box1{ height: 200px; border:4px solid green; text-align: center; position:relative}.box2{ height: 100px; border:4px solid blue; position:absolute; top:150px;left:60px } BOX1 BOX2 Colored by Color Scriptercs - 박스 1과 2를 div태그로 감싸 그룹화 한다. 박스 A의 p.. 2016. 11. 2. 3.레이아웃 - 박스너비 지정 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081샘플.boxA:after {content: ""; display: block; clear: both}.box1 { float: left; width: 33.3333% ; height: 200px; border:4px dotted green; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .bo.. 2016. 11. 2. 1.레이아웃 - 박스정렬 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849샘플.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;} BOX1 BOX2 BOX3 BOX4 Colored by Color Scriptercs 두번째와 세번째 박.. 2016. 11. 1. 이전 1 다음