CSS 속성 - 배치1

relative는 사용안하고 Absolute 를 자주 사용

position이란?

요소의 위치 지정 기준

1, static : 기준 없음

2, relative : 요소 자신을 기준

3, absolute : 위치 상 부모 요소를 기준

4, fixed : 뷰포트(브라우저)를 기준

이게 무슨 말일까..? 하나씩 봐보도록 하자

요소의 각 방향별 거리 지정

top, bottom, right, left
px등의 단위로 지정한다

1, html코드

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./arrangement.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

이렇게 container div태그 안에 item이라는 클래스 명을 가진 div태그를 자식 요소로 생성했습니다!

2, CSS

.container{
    width: 300px;
    background-color: royalblue;
}
.container .item{
    border: 4px dashed red;
    background-color: orange;

}
.container .item:nth-child(1){
    width: 100px;
    height: 100px;

}
.container .item:nth-child(2){
    width: 140px;
    height: 70px;

}
.container .item:nth-child(3){
    width: 70px;
    height: 120px;

}

CSS 코드는 이렇게 작성을 했습니다