๐๐ฆ HTMLoween ๐ฆ๐ - ํผ๋ฅผ ๋๊ฒ ๋ง๋๋ HTML, JS ๋ฐ CSS! ๐ฑ
26036 ๋จ์ด webdevcssjavascripthtml
๋๋ ๋น์ ์ด ์ผ์ค์คํ ์ฆ๊ฑฐ์ด ํ๋ฃจ๋ฅผ ๋ณด๋ด๊ณ ์ด ๋์ฐํ ์ฝ๋๊ฐ ๋น์ ์ ๋๋ฌด ์ค๋ ๊ดด๋กญํ์ง ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค!
๋ด์ฉ๋ฌผ
CSScooby doo !
HTML ๊ณตํฌ
1๋ ์ ํ ๋ฒ ํ ๋ก์์์๋ง ๋ณผ ์ ์๋ค๊ณ ๋งํ ์ ์์ผ๋ฉด ์ข๊ฒ ์ง๋ง, ์ด ๊ณตํฌ๋ ์ผ ๋ ๋ด๋ด ๋์ฌ๋ฆฌ๊ณ ์์ต๋๋ค!
18์ธ ๋ฏธ๋ง์ ์ฌ์ฉ์์๊ฒ ์ ํฉํ์ง ์์ผ๋ฉฐ R๋ฑ๊ธ(์ฐ๋ ๊ธฐ์ฉ!)
๋ถ๋ช ํ 7 ๋ ๋ฒจ ์ด์์ ์ง์ฅ์ด ์์ต๋๋ค
<img src="../../../../../../../../../../../../../../../../../../../../../../../../assets/logo.bmp" />
์ ๋ง ๊ฐ์ ๋ถ๋ฐฐ๊ธฐ
<center>-------------------------------------------</center>
*๊ณ ์ ์ ์ธ* ๊ณตํฌ!
<p class="hover:bg-light-blue-200
hover:text-light-blue-800
group
flex
items-center
rounded-md
bg-light-blue-100
text-light-blue-600
text-sm
font-medium
px-4
py-2">
Hi
</p>
์ฃ์กํฉ๋๋ค. ์ ์์ ์ธ ๋ฐ๊ตด ์์ ์ ํด์ผ ํ์ต๋๋ค!
์ค๋ ๋ฐค ์ฐ๋ฆฌ๋ ์ง์ฅ์์ (๋๋ฌผ์ ์ํ์์) ๋ง์ฐฌ์ ํฉ๋๋ค!
<table id="body">
<tr id="wrapper">
<td id="main">
<table id="row-wrapper">
<tr id="body_row">
<td id="body_left">
<table id="nav">
<tr href="home.html" onclick="nav()">Home</tr>
<tr href="about.html" onclick="nav()">About</tr>
<tr href="contact.html" onclick="nav()">Contact</tr>
</table>
</td>
<td id="body_main"></td>
<td id="body_aside"></td>
</tr>
</table>
</td>
</tr>
</table>
์๋ฐํฌ๋ฆฝํธ
์ค, ๋น์ ์ HTML์ด ๋์๋ค๊ณ ์๊ฐํ์ต๋๋ค. ์ด ์ํนํ JavaScript๋ฅผ ๋ณผ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ์ญ์์ค!
์ฌ์ฅ์ด ์ฝํ ์ฌ๋๋ค์ ์ง๊ธ ์ธ๋ฉดํด์ผ ํฉ๋๋ค.
์ ์ ์๋ค
const allowed = {
'1': true,
'2': true,
'3': true,
'4': true,
'5': true,
'6': true,
'7': true,
'8': true,
'9': true,
'0': true,
'a': true,
'b': true,
'c': true,
'e': true,
'f': true,
'h': true,
'i': true,
'j': true,
'k': true,
'l': true,
'm': true,
'n': true,
'p': true,
'q': true,
'r': true,
's': true,
't': true,
'u': true,
'v': true,
'w': true,
'x': true,
'y': true,
'z': true
}
var isValidInput = function(key){
return allowed[key];
}
๊ทธ๋ฆฌ๊ณ ์ง๋ฆฌ๊ฐ ๋ํฌ๋ฅผ ์์ ์ผ ํ๋ฆฌ๋ผ!
var helpers = {};
helpers.returnTrue = function() {
return true;
}
๋์๋๋ฆด๊น์, ์๋๋ฉด ๊ทธ๋ฅ ๋๋ฌ๋ณด๊ณ ๊ณ์ญ๋๊น?
var u = "Browser";
if (this.isIPad) {
u = "iPad"
} else {
if (this.isDDGIgnore) {
u = "Ignore"
} else {
if (/seamonkey/.test(x)) {
u = "SeaMonkey"
} else {
if (/iceape/.test(x)) {
u = "Iceape"
} else {
if (/palemoon/.test(x)) {
u = "PaleMoon"
} else {
if (this.isFirefox) {
u = "Firefox"
} else {
if (this.isAndroid) {
u = "Android"
} else {
if (/xbox/.test(x)) {
u = "xBox"
} else {
if (/midori/.test(x)) {
u = "Midori"
} else {
if (/opr/.test(x)) {
u = "Opera"
} else {
if (/maxthon/.test(x)) {
u = "Maxthon"
} else {
if (this.isYandex) {
u = "Yandex"
} else {
if (/vivaldi/.test(x)) {
u = "Vivaldi"
} else {
if (this.isChrome) {
u = "Chrome"
} else {
if (/fennec/.test(x)) {
u = "Fennec"
} else {
if (/epiphany/.test(x)) {
u = "Epiphany"
} else {
if (/uzbl/.test(x)) {
u = "Uzbl"
} else {
if (this.isEdge) {
u = "Edge"
} else {
if (this.isIE && navigator.platform === "Win64"
&& !k() && Modernizr.touch
&& document.documentElement.clientWidth == screen.width) {
u = "IEMetro"
} else {
if (this.isIE) {
u = "IE"
} else {
if (this.isOpera) {
u = "Opera"
} else {
if (this.isIPhone) {
u = "iPhone"
} else {
if (/arora/.test(x)) {
u = "Arora"
} else {
if (this.isSafari) {
u = "Safari"
} else {
if (this.isKonqueror) {
u = "Konqueror"
} else {
if (this.isBlackberry) {
u = "Blackberry"
} else {
if (/phantomjs/.test(x)) {
u = "PhantomJS"
} else {
if (this.isIDevice) {
u = "iOS"
}}}}}}}}}}}}}}}}}}}}}}}}}}}}
์ค์ฟ ๋น ๋!
์ฌ๋๋ค์ด CSS์ "C"๊ฐ "Cascading"์ ์๋ฏธํ๋ค๋ ๊ฒ์ ์ดํดํ๋ค๋ฉด ์๋ง๋ ๊ทธ๋ ๊ฒ ํํธ์๋ CSS๋ฅผ ๋ค๋ฃฐ ํ์๊ฐ ์์์ ๊ฒ์ ๋๋ค.
ํ์ง๋ง ์ ๋ ์ค๋ ์ธ์์ ๊ณ ์น๋ฌ ์จ ๊ฒ์ด ์๋๋๋ค. ๋์ ์ ์์ฃผ ๋์ฐํ CSS ์์ด๋์ด์ ๊ฒฝํํฉ์๋ค!
์ฌ์ ํ ํธ์ง์!
์, ์ด๊ฒ์ด...์ค์ ๋ก ์ ์ฉํ ๊น์? ๊ทธ๋๋ ๋๋ฌด ์๋ชป๋ ๋๋์ ๋๋ค!
๋ผ์ด๋ธ CSS ํธ์ง๊ธฐ...์์ํ CSS์ธ๊ฐ์?
์ค์ง ํ ๋ก์์๋ง!
์ค์!
์ด๊ฒ์ ๋ชจ๋ ํ์ด์ง์ ์ถ๊ฐํ๊ณ ๊ณ ํต์ ์ธ๊ณ๋ฅผ ์ค๋นํ์ญ์์ค!
*:hover{
zoom:99%;
}
๋น์ ์ ์์ํ๋ ํธ๋ฐ ์กฐ๊ฐ!
๋ด๊ฐ ๋น์ ์๊ฒ ํ์ ์์ฒ๋ฅผ ์คฌ์์ง๋ ๋ชจ๋ฅด๊ธฐ ๋๋ฌธ์, ์ฌ๊ธฐ ์ ์น๊ตฌ๋ค๊ณผ ์ ๊ฐ ์ด์ ฏ๋ฐค์ ์กฐ๊ฐํ ํธ๋ฐ์ด ์์ต๋๋ค.
ํธ๋ฐ ๋ช๊ฐ
๊ตฌ๋์ค์ ์ธ๋๋ฐ์ด ์๋ฆฌ
๊ฐ๋์ธ์ฆ ์ค๋ธ ๊ฐค๋ญ์์ ๋ก์ผ
์ฐ๋ฆฌ๋...๋ฒ ๋์ด๋ค!
ํดํผ ํ ๋ก์!
์๊ฒฌ์ ํ ๋ก์ ์ฌ์ง์ ๊ณต์ ํ์ญ์์ค!
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐๐ฆ HTMLoween ๐ฆ๐ - ํผ๋ฅผ ๋๊ฒ ๋ง๋๋ HTML, JS ๋ฐ CSS! ๐ฑ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/inhuofficial/its-htmloween-scary-html-js-and-css-2ncjํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค