์๋ฒ๋?์ ์ ๊ฐ ๋ฐ์ดํฐ๋ฌ๋ผ๊ณ ์์ฒญ์ ํ๋ฉด ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด์ฃผ๋ ๊ฐ๋จํ ํ๋ก๊ทธ๋จ ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ ๋๋ 1. ์ด๋ค ๋ฐ์ดํฐ์ธ์ง url๋ก ์ ๊ธฐ์ฌํด์ผํ๊ณ 2. ์ด๋ค ๋ฐฉ๋ฒ์ผ๋ก ์์ฒญํ ์ง ๊ฒฐ์ ํด์ผ (GET/POST ๋ฑ)๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด์ผํจ (GET์์ฒญ์ ์๋ฒ์ ์๋ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ณ ์ถ์ ๋ ์ฃผ๋ก ์ฌ์ฉ, POST์์ฒญ์ ์๋ฒ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๊ณ ์ถ์ ๋ ์ฌ์ฉ) AJAX๋?์๋ฒ์ GET, POST ์์ฒญ์ ํ ๋ ์๋ก๊ณ ์นจ ์์ด ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๊ฒ ๋์์ฃผ๋ ๊ฐ๋จํ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฅ์ AJAX $.get('https://codingapple1.github.io/hello.txt') .done(function(data){ console.log(data) }) .fail(function(error){ console.log('์คํจํจ')..
์ ์ฒด ๊ธ
๐ฉ๐ป java, mysql, android, php, javascript๋ฅผ ๋ค๋ฃน๋๋ค์ ๋ฒ ๊ฒ์๋ฌผ์์ ์ผ์ผ์ด html ์ ์์ ํ ์ ์๋ค๊ณ ํ๋ค. ์ด๋ฒ์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก html ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ๋ค. ์์ค๋ก html ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋๊ฐ์ง๊ฐ ์๋ค. 1. document.createElement() - document.createElement() ์ฐ๋ฉด html ์๋ฃ๋ฅผ ํ๋ ์์ฑํด์ค๋๋ค. - ๊ทธ๊ฑธ ๋ง๋๋ก ์กฐ์ํ ๋ค์ appendChild() ์จ์ ์๋ฌด๋ฐ๋ ๋ฃ์ผ๋ฉด html์ด ์์ฑ๋จ 2. ๋ฌธ์์๋ฃ๋ก html์ ๋ง๋ ๋ค์, insertAdjacentHTML() ์์ ๋ฃ๊ธฐ ์ด๊ฒ ์ข๋ ํธ๋ฆฌํจ. ๋ฒ์ธํธ์ผ๋ก ์ ์ด์ฟผ๋ฆฌ ๋ฒ์ ๋ ์์ด ์ ์ด์ฟผ๋ฆฌ๊ฐ ์ ์ผ ์ฌ์ด๋ฏ? ์ํ์ ํ ๋ชจ์ ์
์ธ ๋ฐ์ง 95 100 ์ด๊ฑด html์ด๊ณ , ์ด ์์๋ค๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ก element๋ฅผ ์์ฑ, ์ญ์ , ๋ณ๊ฒฝ ๋ฑ์ ํด๋ณด๊ฒ ๋ค. //์๋ฐ์คํฌ๋ฆฝ..
์๋๋ ์
์ธ ์ ๋ชจ์๊ฐ ์๋๋ฐ, ๊ทธ์ค ์
์ธ ๋ฅผ ์ ํํ๋ฉด ์ฌ์ด์ฆ ์ต์
์ด ๋์ค๋๋ก ๋ง๋ค๊ฑฐ์. ๋ถํธ์คํธ๋ฉ์ ๊ธฐ๋ณธ ์ค์น๋ 0. ๋จผ์ html, css๋ฅผ ๋ง๋ค์ด๋๋ค 1. ์
์ธ ๋ฅผ ์ ํํ๋ฉด ์ฌ์ด์ฆ ์ต์
์ด ๋จ๋๋ก ๋ง๋ ๋ค (๋ฐ๋๋ก, ๋ฏธ๋ฆฌ form-hide ํด๋์ค๋ฅผ ๋ถ์ฐฉํด๋๋ค, ํด๋ฆญํ๋ฉด ๋ผ๋ฒ๋ฆฌ๋ ํ์์ผ๋ก ๋ง๋ค๊ธฐ) ์ํ์ ํ ๋ชจ์ ์
์ธ 95 100 ํ์ง๋ง, ์ด๋ฐ์์ผ๋ก ๋ฏธ๋ฆฌ html, css๋ฅผ ๋ง๋ค์ด๋์ผ๋ฉด ํ์ฅ์ฑ์ด ๋ถ์กฑํ๋ค. ์ค์ ์ผํ๋ชฐ์์๋ ์ฌ๊ณ ๊ฐ ์ฌ์ด์ฆ๋ณ, ์ํ๋ณ ๋ค๋ฅด๊ฒ ๋ค์ด์ค๋๋ฐ, ๋ ๋ง๋ค html ์ฝ๋๋ฅผ ์์ ํ๋ ๊ฒ์ ๋ถ๊ฐ๋ฅ. ๋ฐ๋ผ์, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ์ฌ html ์ฝ๋๋ฅผ ๋ง๋ค์ด๋ณด๊ฒ ๋ค~~ ๋ค์๊ฒ์๋ฌผ ํด๋ฆญํด์ฃผ์์ฌ
0. ๋ถํธ์คํธ๋ฉํ์ ๊ฐ์ ธ์จ๋ค. 1. ๋ฐ์ดํฐ์ ํด๋นํ๋ ํค๊ฐ์ (๊ฐ๊ฒฉ,์ํ๋ช
๋ฑ)์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์กฐ์ํด์ค 2. ๋ฐฐ์ด์์ ๊ฐ์ฒด๊ฐ ์๋ ๊ฒฝ์ฐ์๋, ๋ฐฐ์ด์์์ ๊ทธ ๊ฐ์ฒด์ ์์๋ฅผ ๋จผ์ ์ฐพ๊ณ , ํค๋ฅผ ์ฐพ๋๋ค products[i]['title'] Card title ๊ฐ๊ฒฉ : 70000 ์ฃผ๋ฌธํ๊ธฐ Card title ๊ฐ๊ฒฉ : 70000 ์ฃผ๋ฌธํ๊ธฐ Card title ๊ฐ๊ฒฉ : 70000 ์ฃผ๋ฌธํ๊ธฐ
์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ด๋? ์ด๋ฒคํธ ์ ํ ๋ผ๊ณ ๋ ํ๋ฉฐ, ํ์ํ๊ทธ๋ฅผ ๋๋ฅด๋ฉด ์์ํ๊ทธ๊น์ง ์ด๋ฒคํธ๊ฐ ์ ํ๋๋ ํ์ ๋ง์น, ๊ฒน์น ์ข
์ด์ ๊ฐ์ฅ ๊ฐ์ด๋ฐ๋ฅผ ๋๋ฅธ๊ฒ์ฒ๋ผ 1. ์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ ํญ์ ์ผ์ด๋จ 2. ์ด๋ฒคํธ ๊ด๋ จ ๊ธฐ๋ฅ๋ค์ ์ฌ์ฉํด์ ํด๊ฒฐํ ์ ์์ ๋ค์ํ ์ด๋ฒคํธํจ์๋ค document.querySelector('.black-bg').addEventListener('click', function(e){ e.target; //์ค์ ํด๋ฆญํ ์์ ์๋ ค์ค (์ด๋ฒคํธ ๋ฐ์ํ ๊ณณ) e.currentTarget; //์ง๊ธ ์ด๋ฒคํธ๋ฆฌ์ค๋๊ฐ ๋ฌ๋ฆฐ ๊ณณ ์๋ ค์ค (์ฐธ๊ณ ๋ก this๋ผ๊ณ ์จ๋ ๋๊ฐ์) e.preventDefault(); //์คํํ๋ฉด ์ด๋ฒคํธ ๊ธฐ๋ณธ ๋์์ ๋ง์์ค e.stopPropagation(); //์คํํ๋ฉด ๋ด ์์์์๋ก์ ์ด๋ฒคํธ ๋ฒ๋ธ๋ง..
ํค๋ ์์ ์คํฌ๋ฆฝํธ๋ก ๋ถํธ์คํธ๋ฉ ๊น์์ฃผ๊ณ , ์ ๋นํ๊ฒ ํญ๊ธฐ๋ฅ ํ์ ๋ง๋ค์ด์ฃผ์๋ค ์ํ๋ ๊ฒ์ ํญ๋ฒํผ์ ๋๋ ์๋ ๊ทธ์ ํด๋นํ๋ ์ฝํ
์ธ div๊ฐ ๋ฑ์ฅํ๋๊ฒ Products Information Shipping ์ํ์ค๋ช
์
๋๋ค. Product ์คํ์ค๋ช
์
๋๋ค. Information ๋ฐฐ์ก์ ๋ณด์
๋๋ค. Shipping ์ฐจ๊ณก์ฐจ๊ณก ํ๊ธ๋ก ์ด๋ค ์ฝ๋๋ก ๋ฒ์ญํด์ค๋ค //0๋ฒ์งธ tab-button๋ถํฐ ๊ธฐ๋ฅ๊ฐ๋ฐ ํด๋ณด์ /*๋ฒํผ 0 ๋๋ฅด๋ฉด (์ฝ๋๋ฅผ ํ์คํ์ค ์ฝ์ผ๋๊น ์ ๊ฑฐ๋จผ์ ํ๊ณ ์ถ๊ฐํด์ฃผ๋ ์ผ์ค~) - ๋ชจ๋ ๋ฒํผ์ ๋ถ์ orange ํด๋์ค๋ช
์ ๊ฑฐ - ๋ฒํผ 0์ orange ํด๋์ค๋ช
์ถ๊ฐ - ๋ชจ๋ div์ ๋ถ์ show ํด๋์ค๋ช
์ ๊ฑฐ - div0์ show ํด๋์ค๋ช
์ถ๊ฐ */ $('.tab-button').eq(0).on('click',fu..
//์คํฌ๋กค๋ฐ 100px ์ด์ ๋ด๋ฆฌ๋ฉด ๋ก๊ณ ํฐํธ์ฌ์ด์ฆ ์ค์ด๊ธฐ, ๋จ 100px ๋ฏธ๋ง์ด๋ฉด ๋ค์ ํค์ฐ๊ธฐ window.addEventListener('scroll',function(){ if(window.scrollY > 100){ $('.navbar-brand').css('font-size','15px'); }else{ $('.navbar-brand').css('font-size','25px'); } }); ์์๋ฐ์ค์ ์คํฌ๋กค์ ๋ค ๋ด๋ ธ์๋, ์๋ฆผ์ ๋์ฐ๋ ค๋ฉด? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque place..
์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ ๋ง๋๋ ์์๋ ๋ค์๊ณผ ๊ฐ๋ค. 1. ๋จผ์ html ๊ณผ css๋ก ์ด๋ฏธ์ง๋ฅผ ๋ง๋ค์ด์ค๋ค. 2. ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฒํผ์ ๋๋ฅด๋ฉด ํ๋ฉด์ด ์ฎ๊ฒจ์ง๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ค ์ฐธ๊ณ ๋ก, ์๋ ๊ธฐ๋ฅ์ ํ๋ฉด์ด ํ๋ฌ๋์น ๋ ์๋์ผ๋ก ์๊ธฐ๋ ์คํฌ๋กค์ ์์ ์ค๋ค -html 1 2 3 -javascript css ์์ ํด๋์ค๋ฅผ ํ๋ถ์ฐฉํ๋ ๋ฐฉ์์ผ๋ก ํ๋ฉด์ ์ด๋์ํฌ์๋ ์์ง๋ง, ์ด๋์ํค๋ ๊ฐ ( 'translateX(-100vw)' => ๊ตต์๊ธ์จ)์ ํญ์ ๋ณํ์ํค๋ ค๊ณ ํ๊ธฐ ๋๋ฌธ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด๋ณด๊ฒ ๋ค 100vw๋ ํ์ฌ๋ธ๋ผ์ฐ์ ํ๋ฉด์ด ๊ฝ์ฐฌ ํญ์ด๋ค. ๋ฐ๋ผ์ -100vw ๋ฉด ํ์ฌ ํ๋ฉด ํญ๋งํผ ์ผ์ชฝ์ผ๋ก ์ด๋ํ๋ค๋ ์๋ฏธ์ด๋ค //1๋ฒ ๋ฒํผ ํด๋ฆญ์ 1๋ฒ์ฌ์ง์ด ๋ณด์ด๋ transform ๊ธฐ๋ฅ์ ์ถ๊ฐํด์ฃผ์ธ์ $(".slide-1").on('cli..