CSS 고수님들! 도와주세요ㅠㅠ!!! (수정)

Question

데이터 연동을 통해서 동적인 화면 디자인을 구성하는 html/css/js 개발을 하고 있습니다.배경 이미지가 있고, 그 위에 아이콘 이미지를 올리고 있는데요~이 페이지가 각각 다른 해상도의 화면에서 보여져야 해서배경 이미지에 다음과 같은 속성을 넣어서 브라우저 크기를 변경해도 화면에 꽉 차게 잘 보여지도록 했습니다..bg { position:absolute; width:100%; height:100%; max-width:1920px; max-height:960px; }그런데 이 배경 이미지 위에 올리는 아이콘의 위치와 크기가 문제인데..예를 들어 아래와 같이 속성을 주면 1920x960일 때는 잘 맞지만 화면이 더 작아질 때는 위치와 크기가 맞지 않습니다. ㅠㅠ.icon { positon:absolute; left:100px; top:100px; }%방식으로 해도 완벽히 맞출 수가 없더군요ㅠㅠ아래와 같이 속성을 주었더니 위치는 화면 크기 변화에 따라서 잘 잡히네요! 다만 크기가 문제입니다. ㅠㅠ.icon{ position: absolute; left: 50%; top: 6%; transform: translate(-50%, -6%); max-width: 220px; max-height: 78px;}아이콘의 크기를 화면 크기 변경에 따라 동적으로 처리하는 좋은 방법이 있을까요..?1920x960 인 경우 '3호선' 아이콘 잘 맞음640x320 인 경우 '3호선' 아이콘 위치는 맞지만 크기가 줄지 않음

codezzzz · Answer

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate 이걸로도 해보신걸까요?

호키도키 · Answer

문제는 배경의 비율 (ratio)입니다. 화면에 따라 배경의 비율이 계속 변경되는데, 아이콘이 이 비율에 따른 움직임을 계산하지 못하기 때문입니다. 보통 배경은 object-fit : cover와 같은 속성으로 사용하여 다른 요소들에 걸림돌이 되지 않는 것이 타당한데, 이를 한번 다른 분들에게 말씀드리는 것은 어떨까요 ? 정 안되겠으면, 1920 : 920 비율을 calc로 계산해서, left와 right를 조정하는 방법이 있을것 같습니다.

devvv0303 · Answer

저두 초보긴한뎅미디어 쿼리 한 번 사용해보세요 ㅇㅅㅇ그리고 % 단위 말구 vw 단위나 vh 단위도 한 번 사용해보심이..

doru · Answer

직접 구현은 안해봤고 대충 머릿속에서 생각나는데로 답변드리자면배경화면 크기 단위는 100%말고 width는 100vw, height는 100vh로 주시고(좀 더 확실한 단위. max는 굳이 필요없을듯) background-size:contain; 없으면 추가해주시고(원하는 구현방향에 따라 cover도)아이콘 위치는 알아두셔야 할게 %를 써도 위치, 크기가 잘 안맞을수 밖에 없는 이유가 left: 100px이면 아이콘을 담고 있는 position: relative가 포함된 부모의 왼쪽면에서 아이콘의 왼쪽면까지 100px이에요. 위치가 정확하게 맞으려면 아이콘의 정중앙과 부모의 왼쪽면까지의 거리가 100px이어야겠죠..때문에 아이콘의 부피단위도 거리에 포함시켜서 계산해야합니다. calc를 쓰면 간단한 수학계산을 포함해서 값을 넣을 수 있습니다.아이콘 사이즈가 width:50px이면left: calc(100px - 25px) 이런식으로요. 아니면 calc를 안쓰고 transform: translateX(-50%)를 넣으면 아이콘의 width값의 -50%만큼 위치가 옮겨집니다.(양수일수록 우측으로, 음수일수록 좌측으로 옮겨짐)position: absolute;와 transfrom: translate();를 써서 위치를 잡는건 실무에서도 자주 쓰이는 방법입니다.

1년했어요 · Answer

.icon {        position: absolute;        top: 0%;        left: 50%;        transform: translate(-50%, 50px);        background-color: aqua;        width: 20%;        aspect-ratio: 4 / 1;    }대충 이런식으로 넣으시면 될듯합니다.width값은 부모요소인 .bg에 맞게 %로 조절하시고,이미지 자체의 비율은 aspect-ratio: 4 / 1;를 적절하게 원하시는 비율로 조절하시면 될듯하네요.

MungGaeDev · Answer

아이콘의 크기를 화면 크기 변경에 따라 동적으로 처리하는 좋은 방법vh, vw 혹은 %로 값을 넣어서 처리하면 동적으로 크기를 조절할 수 있습니다.다만 원본 비율에서 틀어지게 될 수 있는데, 정책적으로 정해서 해당 경우를 맞춰줘야 합니다.글자가 써있는 경우 보통 vw로 크기를 조정하고 높이는 기본 비율에 맞춰 따라가게 합니다.또한 최소, 최대 크리를 지정해 지나친 변형은 막습니다.

CSS 고수님들! 도와주세요ㅠㅠ!!! (수정)

6개의 답변

#css3 목록