Position과 좌표 레이아웃

🎈Tip. body 태그에 기본적으로 maring이 있기 때문에 꽉찬 화면으로 표현하고 싶다면 body에 margin을 0으로 만들자.

• 좌표 속성

.box {
  top : 20px;
  left : 30%;
}

top, left, bottom, right 라는 속성을 사용하면

요소의 상하좌우 위치를 변경할 수 있습니다.

하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다.

position 속성은 좌표속성을 적용할 기준점이 여기에요~! 라고 지정해주는 역할입니다.

 position : static; /* 기준이 없음 (좌표적용 불가) */
 position : relative; /* 기준이 내 원래 위치 */
 position : absolute; /* 기준이 내 부모 */
 position : fixed; /* 기준이 브라우저 창 (viewport) */

.main-title {
    color: white;
    font-size: 40px;
    margin-top: 150px;
    margin-left: 38%;

}
.main-content{
    color: white;
    font-size: 18px;
    text-align: center;
}

.main-button {
    padding: 15px;
    font-size: 20px;
    background: white;
    border : none;
    border-radius: 5px;
    position: relative;
    top: 50px;
    left: 420px;
}

여기서 원하는 기준을 선택하시면 됩니다. 그럼 이제 좌표속성으로 좌표 값을 줄 수 있습니다.

position : absolute는 부모 박스를 기준으로 찰싹 달라붙은 뒤에 좌표값을 적용하게 되는데,

정확히 말하면 부모가 아니라 부모 중에 position : relative를 가지고 있는 부모가 기준입니다.

position 부여 하면

1. 좌표이동 가능

2. 공중에 뜸

.main-background{
    position: relative;
}


.main-button {
    position: absolute;
    padding: 15px;
    font-size: 20px;
    background: white;
    border : none;
    border-radius: 5px;
    left: 0;
    right: 0;
    margin: auto;
    width: 120px;

}

✨ 과제. 구매하기 버튼 아래에 배경과 겹쳐지는 텍스트 박스 만들기