이런 라운드박스는 보통 어떤식으로 코딩하세요?
내길
전 보통 상단 중간(1px정도 잘라서 반복 ;;) 아래 이렇게 잘라서 작업했어요
가장 기본적인 방법인데 코드도 깔끔하고 편하고 ㅡㅡ;;
가로 세로 다 늘어날 수도 있다고 해서 다르게 해본적도 있지만
코드도 복잡해 보이고...
가로로 늘어난 적이 없어서 결국 이미지 3개 잘라서 했었는데요
물론 상황에 따라서 틀려지겠지만
보통 어떻해 작업하시나요?
이번에7년 경력되는 프리랜서분 소스를 봤는데
그분도 저처럼 하더라고요 ;;;
이것때문에 만들때 마다 고민이에요
이렇게 할까 저렇게 할까 ;;;
-
큰깃 2025-03-22
저도 배울땐 보통 라운드 박스는 가로나, 세로 어느 한쪽이 거의 고정이기 때문에
늘어나는 쪽으로 이미지를 늘려서 쓰고있어요^^ -
갤쓰리 2025-03-22
유동적인 이미지에서 center로 정렬은 한계가있죠
얼마나 늘어날지 모르니; -
두빛나래 2025-03-22
상단 top ,중간은 center ,하단은 bottom 뭐 이런식으로 하면 가능합니다.
전제는 역시 그라데이션이 없으면 입니다 ㅎㅎ -
도란도란 2025-03-22
제 생각에.... 세로만 유동 적이어도 이미지 두개 필요 하지 않을까요??
위의 라운드와 아래 라운드....
이미지 하나로,,,,,,,음-
아무리 머리 굴려봐도 이미지 하나로는......
제 머리가 부족 하네요.....;; -
미련곰팅이 2025-03-22
이미지 한개로 세로 유동표현이 가능한가여, 신기하네여 헐...
-
날놓아줘 2025-03-22
세로 유동이고 저정도면 색상이랑 디자인이면 이미지 하나로도 충분하답니다.
(그라데이션이 없으니, 가로세로 유동이면 또 틀려지지만) -
앨런 2025-03-22
네귀퉁이 둥근부분만 이미지컷팅하고, 단면선은 border 로 입힌다는건가여?!
저 그거 시도해밨는데 익스6이 깨져서 포기했는데 나중에 시간되시면 코드공유 가능할가여..ㅠ -
신당 2025-03-22
가변적이냐 아니냐에 따라 달라지지 않을까요.
저는 디자이너와 상의해서 박스 타입의 기능과 형태를 정의해서 좀 제한적으로 쓰게 만든 다음에..
가변적이지 않은 bg의 경우 그냥 통으로 bg로 넣고,
가로폭 고정일 경우 높이만 통으로 bg로 쓴 후 bottom만 따로 태그를 넣어서 표현하거나..
혹은 가로새로 모두 가변적일 경우 라운딩 부분 잘라서 원형으로 넣어서 네 귀퉁이를 표헌하고 귀퉁이가 포함된 엘리먼트에 보더와 bg를 넣어서 코딩합니다. -
겨슬 2025-03-22
쪽지 확인해주세요^^;
-
날샘 2025-03-22
psd 쭉 미리보기해보고 같은 디자인인데 가로랑 세로가 가변적인 라운드면
왼쪽위, 오른쪽 위, 왼쪽아래, 오른쪽 아래등.. 4개로 잘라내는데 왼쪽이든 오른쪽이든,
한곳은 좀 무쟈게 길게 잘라서(포토샵작업 필요), 부모나 라운드 안의 자식 css 에서 가로길이만 입력하면
알아서 늘어나게 되는 기법을 사용하죠~
그렇지않다면야 보통은 2~3단으로 합니다. 한 태그에 백그라운드이미지는 1개만 가능하니,
너무 조각내면 태그의 중첩이 심해지므로.. 가로길이만