๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
CSS๐Ÿ”ง/css ํ’€ํŽ˜์ด์ง€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

ํ’€ํŽ˜์ด์ง€ ์ ์šฉ fullpage / ์ •๋ฆฌ

by hyojinny 2022. 12. 20.

ํ’€ํŽ˜์ด์ง€๋Š” ์„œ๋ธŒ ์ ์šฉx

์„ธ๋กœ๋‹จ์œ„๋กœ ํ•œ ์„น์…˜์”ฉ ์ ์šฉ

์ค‘์š” - fullPage 2.9.7(๋ฌด๋ฃŒ๋ฒ„์ „) ์—ฐ๊ฒฐ
- <div id="fullpage">๊ฐ€ ์„น์…˜์ปจํ…Œ์ด๋„ˆ์ด๋ฏ€๋กœ #container์‚ญ์ œ
- footer๊ฐ€ <div id="fullpage"> ์•ˆ์ชฝ ์•„๋ž˜์— ์žˆ์–ด์•ผํ•จ
- footer๋Š” ๋†’์ด 100% ์•„๋‹ˆ๋ฏ€๋กœ .fp-auto-height ๋ถ™์—ฌ์คŒ
์ œ์ด์ฟผ๋ฆฌ ์„ค์ • $('#fullpage').fullpage({
    // 1201๋ฏธ๋งŒ(ํƒ€๋ธ”๋ ›, ๋ชจ๋ฐ”์ผ)์ผ๋•Œ ์Šคํฌ๋กค ํ™œ์„ฑํ™”
    responsiveWidth: 1201,
    // ๋ทฐํฌํŠธ๋†’์ด 700๋ฏธ๋งŒ์ผ๋•Œ ์Šคํฌ๋กค ํ™œ์„ฑํ™”
    responsiveHeight: 700,
  });
๋ถ„๊ธฐ์  ์„ค์ • /* PC, ๋†’์ด 750์ดํ•˜์—์„œ ์ตœ์†Œํฌ๊ธฐ์ง€์ •ํ•˜์—ฌ ์ค„์–ด๋“ค์ง€์•Š๊ฒŒ */
@media (min-width: 1201px) and (max-height: 750px) {
  #fullpage .section:not(#footer) {
      min-height: 750px;
  }
}
๋™์˜์ƒ์ด์Šˆ video , ifram ์œผ๋กœ ์—ฐ๊ฒฐํ•œ ์˜์ƒ์ด ์Šฌ๋ผ์ด๋“œ ๋˜๋ฉด ์ž๋™์œผ๋กœ ๋ฉˆ์ถค
์‚ฌ์šฉ์ž๊ฐ€ ํด๋ฆญํ•˜์—ฌ ์žฌ์ƒํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ๊ดœ์ฐฎ์œผ๋‚˜
loop ์ธ ๊ฒฝ์šฐ ๋ฌธ์ œ๊ฐ€๋จ 

 


์‚ฌ์ดํŠธ๋ณ„ ํ’€ํŽ˜์ด์ง€ ํ™•์ธ๋ฐฉ๋ฒ•

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ถ™์ด๋ฉด html ์—์„œ ๋ฐ”๋กœ ํ™•์ธ๊ฐ€๋Šฅ

 


ํ’€ํŽ˜์ด์ง€ ๋ฒ„์ „ ํ™•์ธํ•˜๊ธฐ 

์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์ฐพ๊ธฐ

 

 

open new tap ์œผ๋กœ ๋ณด๋ฉด ๋ฌด๋ฃŒ๋ฒ„์ „ ํ’€ํŽ˜์ด์ง€ 2.๋Œ€๋ฅผ ์‚ฌ์šฉํ•จ์„ ํ™•์ธํ• ์ˆ˜ ์žˆ๋‹ค 

 

 

๋Œ“๊ธ€