배치
배치의 기본
- 모든 배치는 부모가 결정하는 것이다. → 배치라는 건 부모로부터 상대적 위치이기 때문이다. (부모 없이 위치 결정이 불가)
- 배치 되는 자식은 “인라인(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