๋ถํธ์คํธ๋ฉ 5(Bootstrap 5) - ๊ธฐ์ด๋ถํฐ ์น ํ๋ก์ ํธ ๋ง๋ค๊ธฐ
๋ถํธ์คํธ๋ฉ5 (Bootstrap5)์ ํด๋์ค, ์ปดํฌ๋ํธ ๋ฑ ๊ฐ๋ ์ ์ดํดํ๊ณ ์ด๋ฅผ ๋ฐํ์ผ๋ก ์์ฉ, ๋ณํํ๊ณ ์ค์ต์ผ๋ก 3๊ฐ์ ํ๋ก์ ํธ๋ฅผ ์ ์ํด๋ด ๋๋ค.
์๊ฐ์ 525๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ๋ฏธํด๊ฒฐ
services-col mx-2 my-3
๋ฒ์ ์ ๋ฌธ์ ์ธ๊ฐ ์ถ์ด์ ๊ฐ์ฌ๋ ์์ ์๋ฃ ๋ค์ด๋ฐ์์ CSS๋ง, JS๋ง, HTML๋ง ํด๋ดค์ผ๋ ์์ธ์ ์ฐพ์ง๋ชปํ์ฌ ๊ธ ๋จ๊น๋๋ค. mx-2๊ฐ ๋จนํ์ง
HTML/CSSjavascriptbootstrap์น-๋์์ธslothmaru
ใป
6๋ฌ ์
0
42
2
- ๋ฏธํด๊ฒฐ
๋จ์ถํค ์ง๋ฌธ
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ
HTML/CSSjavascriptbootstrap์น-๋์์ธslothmaru
ใป
6๋ฌ ์
0
43
1
- ๋ฏธํด๊ฒฐ
๋ถํธ์คํธ๋ฉ + *.css ํจ๊ป ์ฌ์ฉํ๋ ์ด์ ์ ๋ถ๋ฆฌ ๊ธฐ์ค์ด ๊ถ๊ธํฉ๋๋ค.
์๋ ํ์ธ์. ํ์ฌ ๊ฐ์ ์ค ํ๋ก์ ํธ 1 ๋จ๊ณ๋ฅผ ์งํ์ค์ ๊ถ๊ธ์ ์ด ์๊ฒจ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.index.html ํ์ผ ๋์์ธ์ ๋ถํธ์คํธ๋ฉ ๋ง์ผ๋ก ์์ ํ์ง ์๊ณ ์์ css ๋ฅผ ํจ๊ป ์ด์ฉํ์๋๋ฐ์.๋ถ๋ฅ ์์น์ด ๋ฐ๋ก ์์ผ์ ๊ฐ
HTML/CSSjavascriptbootstrap์น-๋์์ธ์์ง๊ฐ๊ทธ
ใป
0
247
2
- ๋ฏธํด๊ฒฐ
ํ๋ก์ ํธ3์ ํดํ์์
ํ๋ก์ ํธ3์ ํดํ๋ถ๋ถmain.js์ bsComponent.jsํ์ผ๋ก ๋๋๋ ์ type="module"์ ๋ฃ๊ฒ๋๋ฉด</p
HTML/CSSjavascriptbootstrap์น-๋์์ธMJ JI
ใป
1
319
2
- ๋ฏธํด๊ฒฐ
ํ๋ก์ ํธ1 ๋ฒ์ Navigation ๊ฐ์๋ถ์์ ์ง๋ฌธ์ ๋๋ค.
slick.min.js ์์ JQuery is not defined ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.<img src="https://cdn.inflearn.com/public/files/posts/8f63e930-33b3-461a-a192-f15709acaf80/
HTML/CSSjavascriptbootstrap์น-๋์์ธxenit
ใป
0
339
1
- ๋ฏธํด๊ฒฐ
๊ฒ์ํ์ ์ถ๊ฐํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์์๊น์?
์ข์ ๊ฐ์ ๊ฐ์ฌ ๋๋ฆฝ๋๋ค.ํํ์ด์ง ๊ธฐ๋ฅ์ ์ด์ ์ดํด๊ฐ ๋์์ต๋๋ค.์ ๋ ๊ฒ์ํ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ณ ์ถ์๋ฐ์.๋ฌด๋ฃ๋ก ์ ๊ณต๋๋ ๊ฒ์ํ์ด๋ ์ถ์ฒํด ์ฃผ์ค ์ ์๋ ๊ฒ์ํ์ด ์์๊น์?์๋ ๋ค์ด๋ฒ ๋ชจ๋์ ์๋ ๋ฌด๋ฃ๊ฒ์ํ์ ์ฐ๋ํ ์ ์์
HTML/CSSjavascriptbootstrap์น-๋์์ธ๋๋์์ธ์
ใป
0
703
1
- ๋ฏธํด๊ฒฐ
ํ๋ก์ ํธ 2 ์ด๋ฏธ์ง ๊นจ์ง ํ์
๊ฐ์ฌ๋์ด ์ฌ๋ ค์ฃผ์
html/cssHTML/CSS์น ๋์์ธjavascript์น-๋์์ธbootstrap์ง๋ฃจํ ์ค๋ฆฌ
ใป
0
1,165
1
- ๋ฏธํด๊ฒฐ
ํ๋ก์ ํธ 1- Service Section ์์ app.js์์ syntaxError๊ฐ ๋ฉ๋๋ค.
์ดํด๋ฆฝ์ค๋ก ๊ณต๋ถํ๊ณ ์๋ ํ์์ ๋๋ค.app.js์ const slickSlide=jQuery('#slick-slide') ์ด ๋ถ๋ถ์ด syntaxerror ์๋ฌ๊ฐ ๋ฉ๋๋ค.์ ์๋ ์ฝ๋๋ก ๋ณต๋ถ์ ํด๋ ์๋ฌ๊ฐ ๋์.Identifier
HTML/CSS์น ๋์์ธjavascriptbootstrapํด๋ณด์
ใป
0
277
1
- ๋ฏธํด๊ฒฐ
์์์ position:absolute;๋ฅผ ์ฐ์ง ์๊ณ , ๋ฐ๋ก top ์ค์ ์ด ๊ฐ๋ฅํ๊ฐ์?
ํ๋ก์ ํธ 3-Post meta section 18:38 ๋ด์ฉ์ ๋ํ์ฌ ๊ถ๊ธํ ๊ฒ์ด ์์ต๋๋ค. ๋ถ๋ชจ๊ฐ position: relative์ด๊ณ ์์์ ๋ถ๋ชจ ์์์ ์์น๋ฅผ ์ก์ ๋์ position: absolute๋ฅผ ์ฐ๊ณ top, bottom, left, right๋ก
HTML/CSSbootstrap์น ๋์์ธjavascript์กฐ์ฑํฌ
ใป
0
330
2
- ๋ฏธํด๊ฒฐ
cdn.js๋ฅผ ์ค์ ํ๋ก์ ํธ์ ์จ๋ ๋ฌธ์ ๊ฐ๋์ง ์๋์!?
cdn์ ๋ํ ๊ฐ๋ ์ด ๋ถ์กฑํ์ฌ ๊ณต๋ถํ๋ค๊ฐ cdn.js๋ก ์ด๊ธฐํ๋ฅผ ํ์๋๋ฐ ์ค๋ฌด์์ ๋ฌธ์ ๊ฐ ๋๋์ง ์ฌ๋ฌด๊ฐ ๊ถ๊ธํฉ๋๋ค.(์ฅ๊ธฐ๊ฐ ์ฌ์ฉ์ ํด๋น ์๋น์ค ๋ณ๋์ฌํญ์ด๋ ๊ทธ๋ฐ๋ฌธ์ ๋ค์ด ์๋์ง์ ๋ํ)
bootstrap์น ๋์์ธjavascriptHTML/CSSํจ์น
ใป
0
514
1
- ๋ฏธํด๊ฒฐ
carousel ๊ตฌํ์์ ์ฌ์ฉ๋ ์์ด๋๊ฐ ์ค๋ณต ์ฌ์ฉ ๊ฐ๋ฅํ๊ฐ์?
carousel ๊ตฌ์ฑ๋ถ๋ถ์ ๊ดํ์ฌ ์ง๋ฌธ๋๋ฆฝ๋๋ค. ์ธ ๊ฐ์ ํด๋์ค .carousel-item ์์ #outer-slide, #inner-slide๊ฐ ํ๋์ฉ ์์ด๋๊ฐ ๋ค์ด ์์ต๋๋ค. ์ฆ ๊ฐ์ ์์ด๋๊ฐ 3๋ฒ์ฉ ์ค๋ณต ์ฌ์ฉ๋ ๊ฒ์ ๋๋ค. ํด๋์ค๋ ์ค๋ณตํด์ ์ฌ์ฉ๊ฐ๋ฅํ ์ค ์๊ณ
bootstrapHTML/CSSjavascript์น ๋์์ธ์กฐ์ฑํฌ
ใป
0
352
1
- ๋ฏธํด๊ฒฐ
kakao map์ด mobile์์๋ ๊ฐ๋ฅํ๊ฒ ํ๋ ค๋ฉด ์ด๋ป๊ฒ ํ ๊น์?
project -2๋ฅผ ์์ฑํ๊ณ ๋ณด๋ mobile์์ kakao map์ด ์๋ํ์ง ์์์ ์๊ฒ ๋์์ต๋๋ค. web๊ณผ mobile์์ ๋ค ์๋ํ๋๋ก ํ๋ ค๋ฉด ์ด๋ป๊ฒ ํ ๊น์?
์น ๋์์ธjavascriptbootstrapHTML/CSS์กฐ์ฑํฌ
ใป
0
289
1
- ๋ฏธํด๊ฒฐ
-webkit- ์ ๋์ด๊ฐ ์๋ถ์ต๋๋ค.
ํ๋ก์ ํธ2 Menu -1 ๊ฐ์์์scss์์ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด css์ -webkit-์ ๋์ด๊ฐ์๋์ผ๋ก ๋ถ๋๋ฐ ์ ๊ฐํ ๋ webkit ์ ๋์ด๊ฐ ์๋ถ์ต๋๋ค...์ด๊ฑฐ ์ด๋ป๊ฒ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ด ์์๊น์?
javascript์น ๋์์ธbootstrapHTML/CSSgombeer
ใป
0
388
1
- ๋ฏธํด๊ฒฐ
๋ธ๋ ์ดํฌ ํฌ์ธํธ ๊ด๋ จ ๋ฌธ์
์๋ ํ์ธ์ ๊ฐ์ฌ๋ 1 <
HTML/CSSjavascript์น ๋์์ธbootstrapjinkim1011
ใป
0
246
1
- ๋ฏธํด๊ฒฐ
a:hover {color }
์ง๋ฌธ๊ธ์ ์์ฑํ๋ค๊ฐ ์์ธ์ ์ฐพ์์ ๋ฌธ์ ํด๊ฒฐํ์ต๋๋ค๋ง, ์ถํ ๋ค๋ฅธ ๋ถ๊ป ๋์์ด ๋ ๊น ๋ด ๊ฐ๋ตํ๊ฒ ์ฌ๋ฆฝ๋๋ค.๋ฌธ์ #intro .intro-first-card .overlay
HTML/CSSjavascript์น ๋์์ธbootstrapkod378
ใป
2
415
4
- ๋ฏธํด๊ฒฐ
Post Content -2 ์ง๋ฌธ
์ ์ผ ๋ง์ง๋ง ๋ถ๋ถ ํ ๋ ๊ทธ๋จ๊ณผ ์ด๋ฉ์ผ ์์ด์ฝ ์ฌ์ด ์ ์ ์ ์๊ธฐ๋ ๊ฑด๊ฐ์ ๋ค๋ฅธ ์์ด์ฝ์ผ๋ก ๋ฐ๊ฟ๋ ์๊ณ me ์ค์ ๊ณต๊ฐ์ ๋์ด๋ด๋ ๊ณ์ ์๋๋ฐ ์์ ๋ ๋ฐฉ๋ฒ ์๊ณ ์ถ์ต๋๋ค.
javascriptbootstrap์น ๋์์ธHTML/CSSspya
ใป
0
197
1
- ๋ฏธํด๊ฒฐ
์๋ ์ ์๋ ์ด๊ฒ ๋ญก๋๊น ํ๋ก์ ํธ3 Blog CTA Modal ํํธ
์ ๋ฏธ๋ฆฌ ๋ง๋ค์ด๋จ์ต๋๋ค.๋ถ์ฌ๋ฃ๊ธฐ๋ <p style="text-align
HTML/CSSbootstrap์น ๋์์ธjavascriptspya
ใป
0
303
2
- ๋ฏธํด๊ฒฐ
hover
#intro .intro-first-card .overlay a { transition: color 0.4s ease; } #intro .intro-first-card .overlay a:hover { color: #fafa6f; }์ด๋ถ
javascriptbootstrapHTML/CSS์น ๋์์ธdduckmane
ใป
0
309
1
- ๋ฏธํด๊ฒฐ
box ๊ณต๋ถ์ค ์ง๋ฌธ์์ต๋๋ค
span ์์ border-top ์ด๋ผ๊ณ text๋ฅผ ๋ฃ์์๋ฟ์ธ๋ฐ ์ ์๋๋ก ๋ด๋ ค
HTML/CSSbootstrapjavascript์น ๋์์ธljinh0717
ใป
0
304
3
- ๋ฏธํด๊ฒฐ
๋ญ๊ฐ ์๋ชป ๋์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.
Gallery section fadeInUp์๋ฐ์ค์ด ์์ต๋๋ค. ํฐ์์ BEM-cla
javascript์น ๋์์ธHTML/CSSbootstrapbogilsum
ใป
0
282
2






