수다닷컴

라운드 박스는 보통 어떻게 코딩하시나요?

양자리 2025.03.22 댓글 8

라운드 박스를 만들 때 보통 위, 가운데, 아래로 나눠서 작업해요.
기본적인 방법이라 코드도 깔끔하고 편하더라고요.
가로와 세로가 모두 늘어나는 경우엔 다른 방식도 써봤는데 코드가 복잡해 보여서요.
결국 이미지 세 조각으로 작업하는 경우가 많았는데, 보통 어떻게 하시는지 궁금합니다.
만들 때마다 방법을 고민하게 되네요.

댓글 8

  • 세련 2025.03.22

    저도 배울 때는 라운드 박스에서 가로나 세로 한쪽은 거의 고정이라, 늘어나는 방향으로 이미지를 늘려서 썼어요.

  • 예그리나 2025.03.22

    유동적인 이미지에서 가운데 정렬은 한계가 있어요.
    얼마나 늘어날지 모르니까요.

  • 겨울 2025.03.22

    위쪽은 top, 가운데는 center, 아래쪽은 bottom으로 나누면 가능해요.
    그라데이션이 없다는 조건에서요 ㅎㅎ

  • 앵초 2025.03.22

    세로만 늘어나도 위쪽과 아래쪽 라운드 때문에 이미지가 두 개 필요하지 않을까요?
    이미지 하나로 되는 방법은 잘 모르겠네요.

  • god 2025.03.22

    이미지 한 장으로 세로 늘림이 되나요? 신기하네요.

  • 여름 2025.03.22

    세로로 늘어나는 형태고 색상과 디자인이 단순하면 이미지 한 장으로도 충분해요.
    그라데이션이 있거나 가로세로 모두 늘어나면 달라지고요.

  • 세이 2025.03.22

    가변적인지에 따라 다를 것 같아요.
    디자이너와 박스의 형태와 기능을 정해두고 제한적으로 사용해요.
    크기가 고정된 배경은 통으로 넣고, 가로폭이 고정이면 높이만 배경으로 처리한 뒤 아래쪽을 따로 표현하기도 합니다.
    가로세로 모두 가변적이면 모서리를 잘라 각 귀퉁이를 표현하고, 나머지는 테두리와 배경으로 코딩해요.

  • 월향 2025.03.22

    PSD를 미리 살펴보고 가로와 세로가 모두 늘어나는 디자인이면 모서리 네 곳을 잘라요.
    한쪽 이미지를 길게 만들어 부모나 자식 요소의 CSS에서 가로 길이를 조절하면 늘어나게 할 수 있어요.
    그게 아니라면 보통 두세 단으로 나눕니다.
    태그 하나에 배경 이미지는 하나만 쓸 수 있어서 너무 많이 나누면 태그가 중첩되거든요.