html/css 버튼 위치 고정(초보)

Question

버튼을 만들었는데 핸드폰 기종마다 위치가 달라집니다 사용할 수 있는 코드는 다 사용해본 것 같은데 어떻게 해야 할까요?

doru · Accepted Answer

일단 html 마크업이랑 css짜신걸 좀 보여주셔야 뭔가 알려드릴수 있을거같은데요....................그래도.. 저라면 그냥 저 이벤트 이미지를 div에 넣고 일정 사이즈 정해놓고 그안에서 버튼은position:absolute로 위치 잡을거같네요. 단위는 px도 되긴하지만 화면에서 잘려나가는게 싫다면 vw로 하면 될거같구요.

haanaaaaaa · Answer

Document

사진의 경우는 따로 포토샵으로 제작한 사진을 업로드 한 것이고 버튼만 따로 제작했습니다! 저도 제 업무가 아니고 완전 처음 해보는거라서ㅜㅜㅜㅜㅜ

yamyam · Answer

top:%가 상위요소에서의 %라 전체크기나 상위요소의 크기가 달라지면 위치도 달라질겁니다

doru · Answer

Document

일단 이런식으로 이미지를 div에 넣어주시고요.. css로 div의 백그라운드로 집어넣어도 상관없습니다. css의 경우 상단에 따로 작성했는데 저게 끝이 아니라 버튼사이즈와 버튼 위치는 본인이 직접 계산해서 넣으셔야합니다. vw단위는 현재 보는 페이지가 열려있는 브라우저 화면 가로(=모바일에선 기기화면 가로)와 정비례하는 단위입니다. 100vw면 상위요소의 크기가 몇이던간에 스마트폰 가로를 꽉채웁니다. 50vw면 딱 반이겠죠?img 가로를 css로 100vw를 잡아두면 어느기기서든간에 무조껀 꽉채울겁니다. 작은 기기면 그만큼 작아지구요. 버튼들의 크기도 그에 맞게 vw단위로 잡아주시면 됩니다. 위치도요.

html/css 버튼 위치 고정(초보)

4개의 답변

#button 목록