배치
배치의 기본
- 모든 배치는 부모가 결정하는 것이다. → 배치라는 건 부모로부터 상대적 위치이기 때문이다. (부모 없이 위치 결정이 불가)
- 배치 되는 자식은 “인라인(inline)” 속성이여야한다 → 인라인 속성이 아니면 배치가 전혀 먹지 않는다 (inline-block 도 가능)
text-align은 inline 속성을 가진 모두를 이동 시킨다고 생각하면 된다.
그래서 text와 div가 같이 있어도 움직인 건 div 박스(inline-block)가 움직였다고 알면 된다.
또한 열고 닫는 태그가 없는 경우!
class 설정을 못해 부모 자식을 만들 수 없다.
이때는 div를 사용한다!
배치 연습 코드
- 배치 코드
<!DOCTYPE html> <html lang="en"> <head> <style> .box1 { background-color: aliceblue; border: 1px solid black; height: 300px; width: 300px; display: inline-block; text-align: center; } .inner1 { display: inline-block; background-color: red; width: 200px; height: 100px; } </style> </head> <body> <div class="box1"> <div class="inner1">HelloWorld</div> </div> </body> </html>
출력 결과
Share article
