๋ฐ์ํ ์น์ฌ์ดํธ ํฌํธํด๋ฆฌ์ค(App Official Landing Website)
๋ฐ์ํ ์น์ฌ์ดํธ ํฌํธํด๋ฆฌ์ค(App Official Landing) ์ ์ ๊ณผ์ ์ HTML+CSS+JQUERY ํผ๋ธ๋ฆฌ์ฑ์ผ๋ก ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ฒด ์ ์๊ณผ์ ์ ํตํด ํผ๋ธ๋ฆฌ์ฑ ์ค๊ธ ์ค๋ ฅ์ผ๋ก ๊ฐ๋ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋จ๋จํ ํ๊ณ ์ค์ ํผ๋ธ๋ฆฌ์ฑ์ ๋ ธํ์ฐ๋ฅผ ๊ฐ๊ฒ ๋ฉ๋๋ค. ํนํ, ์น์ฌ์ดํธ ์ ์ฒด ์ ์๊ณผ์ ์ ์ถฉ๋ถํ ์ค๋ช ๊ณผ ์ค์ ์์ ์ผ๋ก ๊ฒฝํํ๊ณ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์น์ฌ์ดํธ ์ ์์ ์์ ๊ฐ์ ๊ฐ๊ฒ ๋ฉ๋๋ค. ํ์๋ก ์ฌ์ฉํด์ผ ํ๋ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ์ผ๋ก Scroll Reveal Animation๊ณผ Slick ์ฌ๋ผ์ด๋ ์ฌ์ฉ๋ฒ์ ํ์ตํฉ๋๋ค. ๋ฐ์ํ ์ ์ ๋ฐฉ์์ ๊ธฐ์กด ๋ฐฉ์์ float์ position์ ์ด์ฉํ ๋ฐ์ํ ๋ ์ด์์ ์ ์ ๋ฐฉ์์ผ๋ก ์ ์ํฉ๋๋ค. ํ์ง๋ง ์ด๋ ํน์ ์์์์๋ Flex๋ฅผ ์ฌ์ฉํ๋ ๋ถ๋ถ๋ ์์ต๋๋ค.
์๊ฐ์ 483๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
๋ค๋ฅธ ์๊ฐ์๋ค์ด ์์ฃผ ๋ฌผ์ด๋ณด๋ ์ง๋ฌธ์ด ๊ถ๊ธํ์ ๊ฐ์?
- ํด๊ฒฐ
ํ๋์ฝ๋ฉ์ผ๋ก ์ด๋ฏธ์ง๋งต(image map) ๋ง๋ค๊ธฐ
ํ๋์ฝ๋ฉ์ผ๋ก ์ด๋ฏธ์ง๋งต(image map) ๋ง๋ค๊ธฐ<span style="color: rgb(36, 41, 47)
HTML/CSSjquery๋ฐ์ํ-์น์ด์ฌ๋น
ใป
7๋ฌ ์
1
79
2
- ๋ฏธํด๊ฒฐ
์ฌ๋ฆญ ์ฌ๋ผ์ด๋
์ ๊ฐ ์ฌ๋ฆญ ์ฌ๋ผ์ด๋ pc๋ฅผ ๋ชจ๋ฐ์ผ๋ก ๋ฐ๊พธ๋ ค๊ณ ํ๋๋ฐ์..์ ์ด์ฟผ๋ฆฌ์์ ๋ฐ๊ฟ ๋ฐฉ๋ฒ ์์๊น์???์๋ ๊ฐ์ด ์ถ๊ฐํ๋๋ฐ ์๋จน์ด์ ์ง๋ฌธํฉ๋๋ค ใ ใ /* product */ $('.sales-presentati
HTML/CSSjquery๋ฐ์ํ-์นSH
ใป
1
148
2
- ๋ฏธํด๊ฒฐ
position: fixed; ๊ฐ ์๋จนํ์..๋ญ๊ฐ ๋ฌธ์ ์ผ๊น์?
html <meta
HTML/CSSjquery๋ฐ์ํ-์น์์ฑ์ ์์
ใป
1
167
1
- ๋ฏธํด๊ฒฐ
๋ฐ์ํ fixed ์๋จนํ๋ ๋ฌธ์
pc๋ฒ์ ์ ๋ฌธ์ ๊ฐ ์ ํ ์๋๋ฐ๋ฐ์ํ์ด ๋๋ฉด header์ ์ค position fixed๊ฐ ์ด์ํด์ ธ์๊ทธ ์์ ์๋๋ ๊ฑด ์๋์์ ๋ฐ์ํ์์ ์๋๋ก ๋ด๋ฆด ๋ ๋ง fixed ๊ฐ ์๋๊ณ ์คํฌ๋กค์ ์๋ก ์ฌ๋ฆฌ๋ฉด ์๋์ด ๋๋๋ฐ ์ด๋ฌธ์ ๋ฅผ ์ด๋ป๊ฒ ํด๊ฒฐํด์ผ
HTML/CSSjquery๋ฐ์ํ-์นtkddnjs1018
ใป
1
264
2
- ๋ฏธํด๊ฒฐ
์ ์๋
์ ์๋ ํด๋น display: flex; ํ ๋ผ, ์ค์์ ๋ ฌํ๋ justify-content: center;/ align-items: center; ํ ๋ ํด๋น div ์height๋ฅผ auto; ๋๋ ์์์์ ์ผ๋ฉด ์ด๋ป๊ฒ๋๋์/? ๊ผญ์์ ์ด๋๋์ฃ
HTML/CSSjquery๋ฐ์ํ-์น์ฑ์
ใป
2
155
1
- ๋ฏธํด๊ฒฐ
.news-thum .date ์์น๊ฐ ์๋ง์์
<img src="https://cdn.inflearn.com/public/files/posts/62d6db1c-9dbf-4a22-aab2-01ea1dc9d521/์คํฌ๋ฆฐ์ท2024-03-14095037.png" alt="์คํฌ๋ฆฐ์ท 2024-03-14 095037.pn
HTML/CSSjquery๋ฐ์ํ-์น๊น์ฃผ์
ใป
1
245
2
- ๋ฏธํด๊ฒฐ
TypeIt - Welcome ๋ถ๋ถ์ด ์ ์ฉ์ด ์๋ฉ๋๋ค..
์๋ ํ์ธ์ ๊ฐ์ฌ๋,Header & Welcome ์น์ #4๊น์ง ์๊ฐ ์ค์ ๋ง์ฐ์ค ํ ๊น์ง๋ ๋ค ๋๋๋ฐ TypeIt - Welcome ๋ถ๋ถ๋ง ์ ์ฉ์ด ์๋ฉ๋๋ค.์ ์ด์ฟผ๋ฆฌ ์ฌ๋ฆญ ์ฌ๋ผ์ด๋๋ ๋ฌธ์ ์์ด ์ ๋๋๋ฐ ์ typeit.min.js ํ์ผ
HTML/CSSjquery๋ฐ์ํ-์นlexhan90
ใป
1
369
2
- ๋ฏธํด๊ฒฐ
Scroll Reveal Animation ์ ์ฉ์ด ์๋์
์๋ ์ฒ๋ผ css ์ ์ฉํ๊ณ html๋ ๊ฐ์๋ฐ๋ก ๋ฃ์ด์คฌ๋๋ฐ...์ ์ ๋๋ฉ์ด์ ์ด ์ ์ฉ๋์ง ์์๊น์.ltr { animation: ltr o.5s linear both; } .rtl {
HTML/CSSjquery๋ฐ์ํ-์นtaylorkimjw1
ใป
1
362
1
- ๋ฏธํด๊ฒฐ
์์ฑ ํ ๊ฐ ์น์ display:none ์ฃผ์ ์ ๋ฌธ์
๊ฐ ์น์ ๋ณ ๋ชจ๋ ์์ฑํ์์ต๋๋ค.Section Display์ ๊ฐ ์น์ ์ ํ๋์ฉ ํ์ด์ ๋ณผ ๋๋ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ํ์ง๋ง ๋ชจ๋ ์ฃผ์ ์ฒ๋ฆฌํ์ฌ ๋ณผ ๋ ๋ฌธ์ ๊ฐ ์์ต๋๋ค..faq ์น์ ์ accordian์ด ์๋ํ์ง ์์ต๋๋ค.<img
HTML/CSSjquery๋ฐ์ํ-์นtaylorkimjw1
ใป
1
384
3
- ํด๊ฒฐ
๋ธ๋ผ์ฐ์ ๋ฅผ ์ค์ผ ๋ ํ๋ฉด ๊นจ์ง
pc๋ฒ์ ์์ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ์ค์ผ ๋ ์ ๋ ๊ฒ ํ๋ฉด์ด ๊นจ์ง๋๋ฐ<
HTML/CSSjquery๋ฐ์ํ-์น๊ธธ ์ฐ
ใป
1
632
2
- ๋ฏธํด๊ฒฐ
welcome-heading ๋ถ๋ถ์ด ์ ์ ๋ ๊ฒ ์์น๋๋์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.
<img src="
HTML/CSSjquery๋ฐ์ํ-์น๊น์ง์
ใป
1
341
1
- ๋ฏธํด๊ฒฐ
์ ์ด์ฟผ๋ฆฌ ํญ๋ฉ๋ด ํด๋ฆญ ์ง๋ฌธ
<img src="https://cdn.inflearn.com/public/files/posts/a85aea44-b1cf-40e7-9941-b91a010593f8/cd0188ca-db97-4195-9e2e-3bcaa0b561fa.png" alt="cd0188ca-
HTML/CSSjquery๋ฐ์ํ-์น๊ฐ์๋น
ใป
1
236
1
- ๋ฏธํด๊ฒฐ
์ง๋ฌธ์์ต๋๋ค
์ฌ์ง๊ณผ ๊ฐ์ด award-l
HTML/CSSjquery๋ฐ์ํ-์นํฉ์ฌ์ค
ใป
1
549
1
- ๋ฏธํด๊ฒฐ
์ง๋ฌธ์์ต๋๋ค.
์ ์๋ ๊ฐ์์์ ํ ๋ง๋ฅผ ๋ณ๊ฒฝ ํ ์์ ์ค์ ๋๋ค. ์ฌ๋ฆญ์ฌ๋ผ์ด๋๋ฅผ ์ ์ฉ ํ์๋๋ฐ ๋ง์ง๋ง ์ฌ์ง์ ์์น๊ฐ ๋ด๋ ค๊ฐ์ต๋๋ค. ์ฌ์ง์ ๋ณ๊ฒฝํ์ฌ ์์ ์ ํด๋ด๋ ๊ฐ์ ํ์์ด ๋ฐ์ํฉ๋๋ค.<img src="https://cdn.inflearn.com/public/files/posts/3
html/cssjquery๋ฐ์ํ-์นHTML/CSS๋ฐ์ํ-์นํฉ์ฌ์ค
ใป
2
646
2
- ๋ฏธํด๊ฒฐ
์ฌ๋ฆญ์ฌ๋ผ์ด๋๊ฐ ์ ์๋๋์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค
ํ์ฌ ์ ์๋ ๊ฐ์์์ ํ ๋ง๋ฅผ ๋ณ๊ฒฝํด์ ์์ ํ๊ณ ์์ต๋๋ค. <
html/cssjqueryHTML/CSS๋ฐ์ํ-์น๋ฐ์ํ-์นํฉ์ฌ์ค
ใป
1
622
1
- ๋ฏธํด๊ฒฐ
slick slider์ .ceo-content์์ญ ๊ฒน์นจ
section.welc
jqueryHTML/CSS๋ฐ์ํ-์น๊น์งํ
ใป
1
720
1
- ๋ฏธํด๊ฒฐ
span .badge ๋ถ๋ถ ์ฐธ๊ณ ํ์ค๋ถ ํ์ธ์
๊ฐ์ฌ๋์ด ์์๋๊ฐ ๋๋คํ์ฌ padding ์ํ๊ฐ๋ฅผ ์ฃผ์ จ๋๋ฐ ๊ฟ์ฉ ์ํ์ฃ ์ด๊ฑด ์ฒ์ body์ ์ฃผ์๋ line-height๊ฐ ๋๋ฌธ์ ๋๋ค.ํด๋น span์ ์ฐํด๋ฆญ ๊ฒ์ฌํด์ ๋ณด์๋ฉด padding๊ฐ์ ์์ต๋๋ค.๊ณ ์น์ค๋ ค๋ฉด line-heig
jqueryHTML/CSS๋ฐ์ํ-์น๋ญ๋ง๊ณ ํฅ
ใป
2
333
1
- ๋ฏธํด๊ฒฐ
ํ๋ ์ค๋ฅผ ์์ฃผ๊ณ ๊ทธ๋ฅ ํจ๋ฉ์ ์ค๋ ๋์ง ์๋์
โ ์ง๋ฌธ ๋จ๊ธฐ<img src="https://cdn.inflearn.com/public/files/posts/eb0dee46-9157-48e1-9761-f9d9aa71c9ac/20221209153202.png" alt="20221209153202.png" titl
HTML/CSSjquery๋ฐ์ํ-์น๋ญ๋ง๊ณ ํฅ
ใป
1
331
1
- ๋ฏธํด๊ฒฐ
์ฐฝ์ ์ค์ด๋ฉด ์์น๊ฐ ์ด๋๋๋ ๋ฐฑ๊ทธ๋ผ์ด๋ ์ด๋ฏธ์ง
์๋ ํ์ธ์ ๊ฐ์ฌ๋<img src="https://cdn.inflearn.com/public/files/posts/1505f759-ddad-43fe-a0a9-145c6635c67b/20221208133512.png" alt="20221208133512.
๋ฐ์ํ-์นHTML/CSSjquery๋ญ๋ง๊ณ ํฅ
ใป
1
532
1
- ๋ฏธํด๊ฒฐ
ํฌ๋กฌ์ฐฝ์ ์ค์ด๋ค๋ฉด ์ด๋ฏธ์ง๊ฐ ์์์ง
<img src="https://cdn.inflearn.com/public/files/posts/0facb256-b1d2-460e-88cf-7e8b9310d8bb/20221205174135.png" alt="20221205174135.png" title="2022
HTML/CSSjquery๋ฐ์ํ-์น๋ญ๋ง๊ณ ํฅ
ใป
1
743
1






