Develop Study ๐ป/์ ๋ณด๊ธ (13) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ [javascript] ํ์ฌ url parameter ๊ฐ์ ธ์ค๊ธฐ / ๋งจ ๋ค์๊ฒ / ์์๊ฑฐ / ์ผ๋ถ๋ถ ๊ฐ์ ธ์ค๊ธฐ ํ์ฌ url ๊ฐ์ ธ์ค๊ธฐ var url = document.location.href; console.log(url); url ์ผ๋ถ๋ถ ๊ฐ์ ธ์ค๊ธฐ var para = document.location.href.split("?").reverse()[0]; // ๋งจ ๋ค ํ๋ผ๋ฏธํฐ ๊ฐ์ ธ์ค๊ธฐ console.log(para); //์ผ๋ถ๋ถ ๊ฐ์ ธ์ค๊ธฐ (https://test1/test2/test3 ์ผ๋) var para = document.location.href.split("/").reverse()[1]; console.log(para); // test2 css ์ด๋ฏธ์ง ๋ฅ๊ธ๊ฒ / ํ๋กํ ์ฌ์ง / ๋๊ทธ๋๊ฒ / ์๋ชจ์ / border-radius ๊ฐ๋ก ์ธ๋ก ๊ธธ์ด ๋ฌ๋ผ๋ ์๊ด ์์ body css profile-user-img์ border-radius : ๋ฅ๊ธ๊ฒ ๊น๋ ์ ๋ overflow : ๊น๊ณ ๋์น๋ ๋ถ๋ถ์ hidden์ผ๋ก ์๋ณด์ด๊ฒ ํ๊ธฐ ์๋ก์ฝค ๋จ border-radius ์์น๋ฅผ ์ด์ฉํด์ ๋ชจ์๋ฆฌ ๋ฅ๊ธ๊ฒ๋ฅผ ์กฐ์ ํ ์ ์์ 30% ์ ๋ ํ ๊ฒ javascript๋ก ๋ณด์๋ค ์๋ณด์๋ค ๋ง๋ค๊ธฐ / display์์ฑ / ์๋ฐ์คํฌ๋ฆฝํธ aํ๊ทธ๋ฅผ ์ด๋ ๊ฒ๋ ์ธ ์ ์๊ตฌ๋ญ...๐ฏ๐คญ ์ฒ์๋ถํฐ ์๋ณด์๋ค๊ฐ ๋๋ฅด๋ฉด ๋ณด์ด๊ฒ ํ๊ณ ์ถ์๋ฐ ์ง๊ธ์ ์ฒ์๋ถํฐ ๋ฐ๋ก ๋ณด์ ๋ค๋ฅธ ํจ์๋ ๊ทธ๋๋ก ์ด๊ณ ์ฒ์๋ถํฐ style ๋ฐ๋ก ๋ฃ์ด์ ๊ทธ๋ฅ ์ฒ์๋ถํฐ none๋ก ์จ๊ฒจ์ค a๋งํฌ ํ๊ณ ๋๋ฅผ๋ ๋ง๋ค href="javascript:doDisplay();" ์ด๊ฑฐ๋ก ํธ์ถ ๋ณด์๋ค ์๋ณด์๋ค ํ๊ณ ์ถ์ div์ id์ style์ง์ test test test test test ์คํฌ๋ฆฝํธ ์์ฑ / ์ด๋์์น์ ๊ฐ๋ค ๋ถ์ฌ๋ ์๊ด ์๋๋ฏ ๋งํฌ๋ฅผ ๋๋ฅผ๋๋ง๋ค ์คํฌ๋ฆฝํธ ์์ doDisplay()ํจ์๊ฐ ํธ์ถ๋๊ณ id๊ฐ toDisplay์ ์์ ์ ๋ณด๋ฅผ con์ ๋ด์์ con.style.display์ ์ํ์ ๋ฐ๋ผ ๋ณด์๋ค ์๋ณด์๋ค๋ก ๋ง๋ค๊ธฐ none์ด๋ฉด -> block์ผ๋ก block์ด๋ฉด -> none๋ก ๋ฐฐ์.. ์ง๋/๋ฒ ์ค/๋ฉ๋ก ๋ ธ๋ ๊ณ ์ ๋ฒํธ (songid)์ป๋ ๋ฒ / ์ํด๋ฆญ ์ค๋ฐ๋ฆฌ์คํธ ๋ง๋ค๊ธฐ ๋ฉ๋ก ๋ง๊ณ ๋ ์ง๋,๋ฒ ์ค songid์ฐพ๋๋ฒ ๋ฌผ์ด๋ณด์๋ ๋ถ ๊ณ์ ์ ์ฌ๋ฆฝ๋๋ค ๋ ธ๋์ ํ ํ ์ฐํด๋ฆญ --> ๊ฒ์ฌ ๊ฒ์ฌ๋ก ์ฐ์ด๋ณด๋ฉด ๋์ต๋๋ค songid ์ฐพ์์ค๋ฉด ๋จ. ๋ฒ ์ค, ๋ฉ๋ก ๋ ๊ฐ์ ๋ฐฉ์์ผ๋ก ์ป์ ์ ์์ต๋๋น https://binggamel.tistory.com/64 ๋ฉ๋ก /์ง๋/๋ฒ ์ค - ์ํด๋ฆญ ์ค๋ฐ๋ฆฌ์คํธ ๋ง๋๋ ๋ฒ / ํ๋ ์ด๋ฆฌ์คํธ /์ฌ์๋ชฉ๋ก/ ๋งํฌ / ์ํด๋ฆญ/๋ ธ๋ ๊ณ ์๋ฅ๋๋๊ณ ์ด๊ฑฐ ์์ฉํ ํ๋ก์ ํธ ๋ง๋ค์ด์ผ์ง (์ทจ๋ฏธ์ํ์ ์ง์ฌ์ธ ํธ) ๊ตฌ๊ธ๋งํ ๋ ์๊ฐ๋ณด๋ค ์ ๋ณด๊ฐ ์ ์ด ๊ธฐ์ต์ ๋จ๊ฒจ๋๊ฒธ ํฌ์คํ ํจ + ๋ฐ๋ผํ ์ ์๋๋ก ์ฝ๊ฒ ์ค๋ช ๋์ด ์์ต๋๋น. ํ๋ ๊ธ์๋ถ๋ถ binggamel.tistory.com ๋ฉ๋ก /์ง๋/๋ฒ ์ค/๋ฐ์ด๋ธ - ์ํด๋ฆญ ์ค๋ฐ๋ฆฌ์คํธ ๋ง๋๋ ๋ฒ / ํ๋ ์ด๋ฆฌ์คํธ /์ฌ์๋ชฉ๋ก/ ๋งํฌ / ์ํด๋ฆญ/๋ ธ๋ ๊ณ ์ ๋ฒํธ/์์์ด๊ณต/๋จ์ถ ๋งํฌ ๋ณต๊ตฌ/pc ๋ฉ๋ก ๊ตฌ๊ธ๋งํ ๋ ์๊ฐ๋ณด๋ค ์ ๋ณด๊ฐ ์ ์ด ๊ธฐ์ต์ ๋จ๊ฒจ๋๊ฒธ ํฌ์คํ ํจ + ๋ฐ๋ผํ ์ ์๋๋ก ์ฝ๊ฒ ์ค๋ช ๋์ด ์์ต๋๋น. + ์ง๋ฌธ ๋จ๊ฒจ์ฃผ์๋ฉด ์๋ ์ ์์ ์ต๋ํ ๋ตํด๋๋ฆฌ๊ฒ ์ต๋๋ค! + '00์ฌ์ดํธ ์ํด๋ฆญ ๋งํฌ๋ฅผ ๋ณธ์ ์๋๋ฐ ์ด๋ป๊ฒ ๋ง๋๋์?' ๐์์์ด๊ณตํ ๊ธ์ด๋ ๋ณด์ ๊ทธ url์ ๋ค๊ณ ์ ์ฃผ์ฌ ๊ฐ์ฌํ๊ฒ ์ต๋๋ค. ์ ๋ ์์ด๊ณ ๋๋ฉด์ ๋งํฌ ๋ชจ์๋ ๊ฑฐ์์๐ ํ๋ ๊ธ์๋ถ๋ถ์ ๋ฐ๊พธ๋ฉด ๋ฉ๋๋ค. ์ฐ๊ฒฐ๊ธฐํธ ์กฐ์ฌ! pc์์ &๊ฐ html ํน์ ๋ฌธ์์ด๊ธฐ ๋๋ฌธ์ &๋ก ํด์๋์ ์๋๋๋ฏ ๐ญ + 'ํ๋ก'๋ ๊ณ์ ์ฐพ๊ณ ์์ผ๋ ์ฌ์๋ชฉ๋ก ๋งํฌ๋ณด๋ค ๋ ธ๋ ๋ฆฌ์คํธ(์ฌ์๋ชฉ๋ก) ์ด๋ฏธ์ง๋ก ํ๋ก์์ '๋ด ๋ฆฌ์คํธ -> ์บก์ฒ ์ด๋ฏธ์ง๋ก ๋ง๋ค๊ธฐ -> ๋ฅผ ํตํด ์ฌ์๋ชฉ๋ก์ ์ํ๋ ๋ ธ๋ ๋ฆฌ์คํธ๋ฅผ ๋ฃ์ ์ ์์ต๋๋ค. + ํ์ฌ ๋ฉ๋ก ์ค๋ณต๊ณก์ด ์๋๋ก์ด๋์์๋ ๋ถ๊ฐ๋ฅํ ๊ฒ ์ผ๋ก ๋ณด์ ๋.. ์ด์ 1 2 ๋ค์