OKKY - 부트스트랩 프론트앤드 도와주세요.. 정말 초보입니다..

cornarong

2021-09-27 22:32:19 작성 ∙ 2021-09-27 22:33:40 수정됨

337

부트스트랩 프론트앤드 도와주세요.. 정말 초보입니다..

안녕하세요.

부트스트랩 4.5 샘플페이지를 사용하고 있으며 현재 아래 그림과 같은 부분을 개발하고있습니다.

해당 부분 소스입니다.

                <div class="col-md-6">
                    <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                        <div class="col p-4 d-flex flex-column position-static">
                            <strong class="d-inline-block mb-2 text-primary">World</strong>
                            <h3 class="mb-0">Featured post</h3>
                            <div class="mb-1 text-muted">Nov 12</div>
                            <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                            <a href="#" class="stretched-link">Continue reading</a>
                        </div>
                        <div class="col-auto d-none d-lg-block">
                            <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
                        </div>
                    </div>
                </div>

여기 회색바탕에 "Thumbnail" 써있는 곳에 상품 이미지를 넣어주고 싶습니다.

처음부터 사용하려 찜해 두었던 샘플페이지 입니다..

이것저것 레이아웃도 나름 변경해 가면서 만들어 놓았습니다.

서버 개발은 어느정도 마무리 되어서 화면에 데이터 뿌리면서 보고싶은데..

아에 사용을 못하고 있습니다..ㅠㅠ

지금 두시간동안 쩔쩔 매고 있습니다.. 이런저런 태그 이미지 넣어보고 클래스도 하나 씩 지워가면서 파악하려고 하는데 시간이 너무 소요되서 죄송스럽지만 글을 올리게 되었습니다..

+ 사진이 업로드가 안되어서 다시 수정해서 올렸습니다.

답변 4
a785312468
429

2021-09-28 10:37:52 작성 ∙ 2021-09-28 10:38:26 수정됨

안녕하세요.
svg태그에 대해서 찾아보니
Scalable Vector Graphics
확장 가능한 벡터 그래픽이라고 하네여.
그래서 svg형식의 파일을 넣어줬습니다.
<g xmlns="http://www.w3.org/2000/svg"><path d="m296 369h-80c-8.28 0-15 6.72-15 15v73c0 30.33 24.67 55 55 55s55-24.67 55-55v-73c0-8.28-6.72-15-15-15z" fill="#ffe3c1"/><path d="m311 384v73c0 30.33-24.67 55-55 55v-143h40c8.28 0 15 6.72 15 15z" fill="#f1d0a4"/><path d="m384 185c-8.28 0-15 6.72-15 15 0 4.54-1.77 8.81-4.98 12.02s-7.48 4.98-12.02 4.98c-9.37 0-17-7.63-17-17v-8c0-12.56-4.89-24.36-13.76-33.24-8.88-8.87-20.68-13.76-33.24-13.76-11.98 0-23.28 4.45-32 12.57-.42.39-.83.78-1.24 1.19-8.87 8.88-13.76 20.68-13.76 33.24 0 4.54-1.77 8.81-4.98 12.02s-7.48 4.98-12.02 4.98-8.81-1.77-12.02-4.98-4.98-7.48-4.98-12.02c0-25.92-21.08-47-47-47h-32c-8.28 0-15 6.72-15 15v162.43c0 5.35 2.85 10.29 7.47 12.98 4.63 2.68 10.33 2.7 14.97.04l21.13-12.07c7.45-4.26 16.49-4.51 24.17-.67l8.62 4.31c17.1 8.55 37.09 7.79 53.45-2.05 3.99-2.39 8.55-3.65 13.19-3.65s9.2 1.26 13.17 3.64c8.63 5.19 18.53 7.93 28.6 7.93 8.6 0 17.2-2.03 24.86-5.87l8.63-4.31c7.68-3.84 16.72-3.59 24.16.66l21.14 12.08c2.3 1.32 4.87 1.98 7.44 1.98 2.6 0 5.2-.67 7.53-2.02 4.62-2.69 7.47-7.63 7.47-12.98v-122.43c0-8.28-6.72-15-15-15z" fill="#e37b4c"/><path d="m399 200v122.43c0 5.35-2.85 10.29-7.47 12.98-2.33 1.35-4.93 2.02-7.53 2.02-2.57 0-5.14-.66-7.44-1.98l-21.14-12.08c-7.44-4.25-16.48-4.5-24.16-.66l-8.63 4.31c-7.66 3.84-16.26 5.87-24.86 5.87-10.07 0-19.97-2.74-28.6-7.93-3.97-2.38-8.53-3.64-13.17-3.64v-163.75c8.72-8.12 20.02-12.57 32-12.57 12.56 0 24.36 4.89 33.24 13.76 8.87 8.88 13.76 20.68 13.76 33.24v8c0 9.37 7.63 17 17 17 4.54 0 8.81-1.77 12.02-4.98s4.98-7.48 4.98-12.02c0-8.28 6.72-15 15-15s15 6.72 15 15z" fill="#dd435b"/><path d="m370.31 294.89c-16.18-9.23-35.79-9.77-52.45-1.45l-8.65 4.32c-3.53 1.77-7.48 2.7-11.44 2.7-4.63 0-9.18-1.26-13.18-3.66-8.64-5.17-18.53-7.91-28.59-7.91s-19.95 2.74-28.62 7.92c-7.53 4.53-16.73 4.88-24.61.94l-8.63-4.31c-16.66-8.32-36.27-7.78-52.45 1.46l-28.69 17.16v41.94c0 24.81 20.19 45 45 45h196c24.81 0 45-20.19 45-45v-43.14z" fill="#89cdf2"/><path d="m399 310.86v43.14c0 24.81-20.19 45-45 45h-98v-110.11c10.06 0 19.95 2.74 28.59 7.91 4 2.4 8.55 3.66 13.18 3.66 3.96 0 7.91-.93 11.44-2.7l8.65-4.32c16.66-8.32 36.27-7.78 52.45 1.45z" fill="#60a7da"/><path d="m357.11 41.88c-26.86-26.85-62.51-41.71-100.44-41.88h-.67c-78.72.02-143 65.73-143 144.51v30.49h47c9.47 0 16.96 7.74 17 17.21.05 12.48 4.94 24.2 13.76 33.03 9.8 9.79 23.16 14.73 37.17 13.6 9.69-.78 18.96-4.61 26.37-10.9.58-.49 1.15-1 1.7-1.52 9.66-8.99 15-21.29 15-34.42 0-5.69 2.77-10.95 7.68-14.24 1.8-1.21 3.85-2.04 5.99-2.45 6.2-1.17 12.25.98 16.26 5.65 2.72 3.16 4.07 7.27 4.07 11.44v6.82c0 25.62 20.95 47.55 46.58 47.78 12.94.11 25.12-4.97 34.15-14.26 8.67-8.93 13.27-21.06 13.27-33.52v-56.22c0-38.19-14.87-74.1-41.89-101.12z" fill="#dd435b"/><path d="m399 143v56.22c0 12.46-4.6 24.59-13.27 33.52-9.03 9.29-21.21 14.37-34.15 14.26-25.63-.23-46.58-22.16-46.58-47.78v-6.82c0-4.17-1.35-8.28-4.07-11.44-4.01-4.67-10.06-6.82-16.26-5.65-2.14.41-4.19 1.24-5.99 2.45-4.91 3.29-7.68 8.55-7.68 14.24 0 13.13-5.34 25.43-15 34.42v-226.42h.67c37.93.17 73.58 15.03 100.44 41.88 27.02 27.02 41.89 62.93 41.89 101.12z" fill="#b2024f"/></g>
svg태그 자식으로 넣었습니다.

1
cornarong
85

2021-09-28 20:43:00

a785312468
안녕하세요 답변 감사드립니다!!
혹시 그럼 저 부분에 이미지를 넣기 위해서는 svg 형식의 파일만 가능한건가요?
jpg, png같은 이미지 파일은 적용이 안되는 건가요??
제가 가지고 있는 이미지 파일들은 svg 형식이 하나도 없습니다..

0
a785312468
429

2021-09-29 09:04:18

저도 잘은 모르지만 svg파일으로 하는것 같습니다.
확대 축소가 용의하고 용량이 적은 아이콘이나 이모티콘같은 느낌으로 많이 쓰는것 같습니다.

1
cornarong
85

2021-10-01 16:32:20

a785312468
답변 감사합니다.
화면 공부도 많이 필요한 것 같습니다ㅎㅎ
많이 도움되었습니다!!

0
로그인을 하시면 답변을 등록할 수 있습니다.

Q&A

부트스트랩 프론트앤드 도와주세요.. 정말 초보입니다..

답변 4

로그인을 하시면 답변을 등록할 수 있습니다.