๋ชฉ๋ก2022/02 (81)
whatisthis?
z-index - CSS: Cascading Style Sheets | MDN CSS z-index ์์ฑ์ ์์น ์ง์ ์์์, ๊ทธ ์์ ๋๋ ํ์ ํ๋ ์ค ์์ดํ ์ Z์ถ ์์๋ฅผ ์ง์ ํฉ๋๋ค. ๋ ํฐ z-index ๊ฐ์ ๊ฐ์ง ์์๊ฐ ์์ ๊ฐ์ ์์ ์๋ฅผ ๋ฎ์ต๋๋ค. developer.mozilla.org /* ํค์๋ ๊ฐ */ z-index: auto; /* ๊ฐ */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* ์์ ๊ฐ์ผ๋ก ์ฐ์ ์์๋ฅผ ๋ฎ์ถ ์ ์์ */ /* ์ ์ญ ๊ฐ */ z-index: inherit; z-index: initial; z-index: unset; ์์ง๋ฐฉํฅ์ผ๋ก ๋ถ ๋จ๊ฒ๋๋ฉด, z-index๋ผ๋ ๋ ๋ฒจ์ด ์๊น. ๋ง์ฝ ํฌ์ง์ ์ด ๊ฒน์น๋ค๋ฉด ๋์ค์ ์ค๋ ์์..
๋ณดํธ๋์ด ์๋ ๊ธ์ ๋๋ค.
๋ณดํธ๋์ด ์๋ ๊ธ์ ๋๋ค.
๋ณดํธ๋์ด ์๋ ๊ธ์ ๋๋ค.
๋ณดํธ๋์ด ์๋ ๊ธ์ ๋๋ค.
์ ์ด์ฟผ๋ฆฌ(jQuery) write less, do more ์ด๋ผ๋ ๋ชจํ ๋ก ๋ง๋ค์ด์ง ์คํ์์ค ๊ธฐ๋ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ. ์ฝ๊ฒ element๋ฅผ ์ฐพ๊ณ ์กฐ์ํ ์ ์๊ณ , ๋ธ๋ผ์ฐ์ ์ ํธํ์ฑ์ด ๋ฐ์ด๋๋ค. ๋ํ ๋ฉ์๋ ์ฒด์ด๋ ๋ฑ ์งง๊ณ , ์ ์ง๊ด๋ฆฌ๊ฐ ์ฉ์ดํ ์ฝ๋๋ฅผ ์ง์ํ๋ค. ์ฅ์ IE8,9๋ฅผ ์ง์ํ๋ค. ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ํธํ ๊ฐ๋ฅ. ์ฝ๋๊ฐ ๋ณด๊ธฐ ์ข๋ค. (๋์์ธ์ ์ํด) ํ๋ฌ๊ทธ์ธ์ ์ง์ํ๋ค. (๋ค์ํ ๊ธฐ๋ฅ ์ถ๊ฐ ๊ฐ๋ฅ) ์ ๋๋ฉ์ด์ , AJAX๋ ๊ฐ๋จํ ์ฌ์ฉ ๊ฐ๋ฅ. ๋จ์ ๋ฌด๊ฒ๋ค. ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ณด๋ค 10๋ฐฐ~100๋ฐฐ์ ๋ ๋๋ฆฌ๋ค. ๋ชจ๋ํ๊ฐ ์๋์ด์๋ค. ์> $(document).ready(function(){ alert("Hello World!"); $("#blackBox").hide(); }); window.onload..
์คํ ์ปจํ ์คํธ(Execution Context) javaScript. (18) ์คํ ์ปจํ ์คํธ ์คํ ์ปจํ ์คํธ (Execution Context) ์คํ ์ปจํ ์คํธ(Execution Context)๋ scope, hoisting, this, function, closure ๋ฑ์ ๋์์๋ฆฌ๋ฅผ ๋ด๊ณ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํต์ฌ์๋ฆฌ์ด๋ค. var name = 'zero'; // ์ ์ญ๋ณ์.. mywebproject.tistory.com - ์ง๋๋ฒ์ ์ ๋ก๋ํ๋ ์คํ ์ปจํ ์คํธ ํฌ์คํ ์ var์ ๊ธฐ์ค์ผ๋ก ํ ์ค๋ช ์ด์๋ค. ์ ์ญ ์ปจํ ์คํธ ํ๋ ์์ฑ ํ, ํจ์ ํธ์ถ ์๋ง๋ค ์ปจํ ์คํธ๊ฐ ์๊น. ์ปจํ ์คํธ ์์ฑ ์ ์ปจํ ์คํธ ์์ ๋ณ์๊ฐ์ฒด(argument, variable) , ์ค์ฝํ์ฒด์ธ, this๊ฐ ์์ฑ๋จ. ์ปจํ ์คํธ ์์ฑ ํ ํจ์๊ฐ ์คํ๋๋๋ฐ..
์์น์ ์ผ๋ก, ์๋ฐ์คํฌ๋ฆฝํธ๋ก CSS๋ฅผ ์กฐ์ํ๋๊ฒ์ ์ง์ํ๋ ๊ฒ์ด ๋ง๋ค. ๊ทธ๋ฌ๋, CSS๋ง์ผ๋ก๋ ์ฒ๋ฆฌํ ์ ์์ ๋, (์ - ๋ฆฌ์กํธ๊ฐ์ ํ๋ ์์ํฌ๋ฅผ ์ฐ๊ฑฐ๋, ์คํฌ๋กค ๋ฌธ์ ํด๊ฒฐ์) ์ด์ฉ ์ ์์ด js๋ก CSS๋ฅผ ์กฐ์ํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ฐ์ํ๋ค. - ํ๊ทธ์ CSS๋ฅผ ๋ณ๊ฒฝ document.querySelector('์ ํ์').style.display = 'inline-block'; ์ฌ๊ธฐ์ ์ฃผ์ํ ์ ์ -๊ฐ ๋ค์ด๊ฐ ์์ฑ(์>background-color)์ -๋ฅผ ๋นผ๊ณ ๋ค์ ๋ฌธ์๋ฅผ ๋๋ฌธ์๋ก ๋ฐ๊ฟ์ค๋ค. (์๋ฐ์คํฌ๋ฆฝํธ๋ ์บ๋ฉ์ผ์ด์ค ์ด๋ฏ๋ก) +) ์ฒ์๋ถํฐ -๊ฐ ๋ถ์ CSS์์ฑ (์> -webkit) ๋ํ -๋ฅผ ์ ๊ฑฐํ๊ณ w๋ฅผ ๋๋ฌธ์๋ก ๋ฐ๊ฟ. - ์๋ฐ์คํฌ๋ฆฝํธ์์๋ '-'๊ฐ ๋นผ๊ธฐ ์ฐ์ฐ์๋ก ์ธ์๋จ. - ํ๊ทธ์ css ์์ฑ์ ์ฝ์ด..
1. ๋ค์ ๋์ค๋ CSS๊ฐ ์ฐ์ ์์๊ฐ ๋๋ค. 2. ์ฐ์ ์์๊ฐ ๊ฐ๋ค๋ฉด ๊ฐ์๊ฐ ๋ง์ ๊ฒ์ด ๋จผ์ ์คํ. (๋ถ๋ชจ-์์ ๊ด๊ณ๊ฐ ๋ง์ ๊ฒฝ์ฐ) !important ∨ inline style attribute ∨ id ∨ class, ๋ค๋ฅธ ์์ฑ(attribute), ๊ฐ์ํด๋์ค(:) ∨ tag element, ๊ฐ์์์(::) !important ์ฐ์ ์์๋ฅผ ๋ฌด์ํ๊ณ ๊ผญ ์ ์ฉ์ํฌ ์์ฑ์ ์์ฑ ๊ฐ(value) ๋ค์ !important ํค์๋๋ฅผ ๋ถ์ธ๋ค. .content{ color: black !important } - ์ฐ์ ์์ ๋ฟ๋ง ์๋๋ผ ๋์์ด๋์ ๊ฐ๋ฐ์๊ฐ ์ํต์ '์ค์ํ ์์ฑ์'์ ๋ํ๋. +) !important์ inline style attribute๋ ๋ณดํต์ ์ฌ์ฉ์ ์ ํํ๋ค. ref. CSS ์ ์ฉ ..
์ ๋ ฌ (align) ํ ์คํธ๋ ํ๊ทธ๋ฅผ ์ผ์ชฝ / ๊ฐ์ด๋ฐ / ์ค๋ฅธ์ชฝ์ ๋ฐฐ์นํ๋ ์์ . - ๋ณดํต ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด๋ ์ค๋ฅธ์ชฝ ์ ๋ ฌ ๋ฑ ํน์ ํํ๋ฅผ ๋ง์ด ์ฌ์ฉํจ. ๋ถ๋ชจ ํ๊ทธ์ text-align์ ์ฌ์ฉํ๋ฉด? > ์์ ํ๊ทธ๋ค์ด ์ ๋ ฌ๋๋ค. #parent { text-align: center; } ๊ฐ๋ก ์ ๋ ฌ์ ์ฝ์ง๋ง, ์ธ๋ก๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํ๋ ๊ฒ์ด ์ด๋ ต๋ค. ๋ณดํต์ vertical-align: middle ์์ฑ์ ์๋ํ์ง๋ง, vertical-align์ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ๊ธฐ์ค์ผ๋ก ์์ง ์ ๋ ฌ์ด ๋๋ ๊ฒ์ด๋ผ์์์ ๋ค๋ฅธ ํ๊ทธ๊ฐ ์์ด์ผ๋ง ๊ทธ ํ๊ทธ์ ๋ง์ถฐ์ ์ธ๋ก ์ ๋ ฌ์ด ๋๋ค. @css display: flex; align-items: center; ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ flex๋ฅผ ์ด์ฉํ์ฌ align-items๋ฅผ center๋ก ์ค์ ํ๋ ๊ฒ์ด๋ค..