초급 모듈에서 구매하기 버튼 만드는 것과 관련해서 질문드립니다.
.main-background {
width: 100%;
height: 700px;
background-image: url(../img/shoes.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 1px;
position: relative;
}
main-background css는 이렇게 했습니다.
.main_button {
padding: 15px;
font-size: 20px;
border-radius: 4px;
background: white;
position: absolute;
border: none;
margin: auto;
left: 0;
right: 0;
width: 150px;
}
이건 main 버튼 css입니다.
궁금한게 브라우저 화면을 변동시킬 때 main-content 안에 있는 내용들이 압축이 되지 않습니까? 그러다보면 구매하기 버튼이 점점 아래로 밀립니다. 그래서 처음에 main-background의 높이를 작게 설정했을 때는 화면을 아주 작게 하면 구매하기 버튼이 아예 안 보이게 되더라고요. 그래서 main-background의 높이를 크게 했더니 문제가 해소가 되긴 했습니다. 그런데 main-background의 높이를 조절하다보니 다른 레이아웃도 아래로 조금 밀려서 처음 만들었던 화면이랑 좀 다르네요.
이렇게 해결하는게 맞는 것인지 아니면 다른 방법이 있는 것인지 궁금합니다!
