본문 바로가기
카테고리 없음

DAY7-HTML,CSS div, ul, li태그 사용해 박스 모델 만들기

by Krystal 2023. 8. 27.

1. div 사용

<div class="box">
   <div></div>
   <div></div>
   <div class="last"></div>
</div>

2. ul, li 사용

<ul>
   <li><li>
   <li></li>
   <li class="last"></li>
</ul>
 

3. css

-초기화 시킨 후 시작 box, .div, ul, li {margin:0px; padding:0px;} => , 꼭 찍어야함
-부모박스 width, height, border,background, margin:auto(박스 가운데 정렬)
-자식박스 width, height, background, margin-rigt(오른쪽 여백), float:left(박스 왼쪽부터 정렬)
-last 자식박스 margin-rihgt: 0px=> 마지막 박스 밀려서 아래쪽으로 배치되기 떄문에
 
 ***응용

=>section, inner, wrap, left/center/right 순으로 부모 박스랑 자식 박스 관계 생각하면서 tag입력, 부모박스의 너비(높이, 여백)랑 자식박스들의 너비(높이, 여백)의 합이 일치해야 함, 어떤 박스가 float:left가 되는건지 잘 생각하면서 css입력!

반응형