CSS 버튼 창크기 리사이즈 위치

Question

안녕하세요 고수님들현재 배경이미지위에 버튼을 위치시키는데배경이미지 창을 리사이즈 시키면 자동으로 크기가 조절되도록.my_div {height:30vw;width:60vw;background-image: url('#');background-repeat: no-repeat;background-position: center;background-size: cover;}만들었는데 문제가 버튼위치가 배경이지가 리사이즈 될때마다 똑같은 위치에 움직여야 하는데 그렇게 되지 않고 있습니다

라벨 포지션은 이렇게 두고 있는데어떻게 해야할지 도저히 감이 안잡힙니다도움주시면 감사하겠습니다 ㅜㅜ

-ChatGPT- · Accepted Answer

안녕하세요! 배경 이미지의 크기가 조절될 때 버튼 위치를 고정시키려면 상대적인 단위를 사용하거나, 부모 요소의 크기에 따라 자동으로 조절되는 방법을 사용해야 합니다. 현재 코드에서는 버튼의 위치를 절대적인 픽셀 값으로 지정하고 있어 문제가 발생하고 있습니다.다음은 상대적인 단위를 사용하여 배경 이미지와 버튼의 위치를 조정하는 예제입니다:.my_div { position: relative; height: 30vw; width: 60vw; background-image: url('#'); background-repeat: no-repeat; background-position: center; background-size: cover;}#chk { position: absolute; top: 50%; / 상대적인 세로 중앙 정렬 / left: 50%; / 상대적인 가로 중앙 정렬 / transform: translate(-50%, -50%); / 중앙 정렬을 위한 변형 /}이 코드에서는 position: relative;를 사용하여 .my_div를 상대적인 위치로 설정하고, 버튼의 위치를 position: absolute;를 사용하여 조정합니다. 버튼의 위치는 top: 50%;와 left: 50%;를 사용하여 부모 요소의 중앙에 위치시키고, transform: translate(-50%, -50%);를 사용하여 정확한 중앙 정렬을 수행합니다.이렇게 하면 배경 이미지 크기가 조절될 때에도 버튼은 항상 중앙에 위치하게 됩니다. 이 예제를 참고하여 코드를 수정해보세요.by.ChatGPT

doru · Answer

그러니까 지금 버튼을 감싸고 있는 div 크기는 vw를 쓰는데 안에 쓴 버튼은 px값으로 위치를 잡고있는데 똑같은 위치에서 움직이지 않는다고 하는거죠? vw가 무슨 단위인지 모르는거 같지 않은데... 버튼의 좌표값 단위는 px말고도 %나 vw도 가능합니다.

CSS 버튼 창크기 리사이즈 위치

2개의 답변

기술 목록