@media screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
/* ๊ธฐ๊ธฐ์ ๋์ด๊ฐ 320px~ 480px */
}
์ ๋ฒ์ ๋ชจ๋ํ, ๋ก๊ทธ์ธ ์ฒซ๋ฒ์งธ ์ฐฝ๊น์ง๋ง ๋ง๋ค์ด๋จ์๋๋ฐ ๋ชจ๋ฌ๋ก ๋์ธ ์ ์๊ฒ ์ฒ๋ฆฌํ๊ณ ์์ ํ๋ฉด์ ์ก์๋ค.
tipsโจ
- ์์์ ๋์ด๋ฅผ ์ฌ๋งํ๋ฉด ์ง์ ํ์ง ๋ง์...! padding์ ์ด์ฉํด์ ์์ contents์ ๋์ด์ ์ข ์๋๋๋ก ํ์. - - position์ ์ค ๋ ๊ฐ์ฅ ๋ฐ๊นฅ์ ์๋ ์์์ ์ฃผ์. ํนํ button>img, a>img ์ ๊ฒฝ์ฐ button์ด๋ a์ ์ค์ผํจ. ๊ธฐ๋ฅ์๋ ๋ฌธ์ ๊ฐ ์์ผ๋ focusing์ด ์๋ผ์ ์ ๊ทผ์ฑ์ ๋ฌธ์ ๊ฐ ์๊น. - - inline ์์์ position์ ์ฃผ๋ฉด display: block ์ด ๋๋ค. ๋ ๋ฒ ๋ช ์ํ ํ์ ์๋ค. - - modal dim ์ฒ๋ฆฌํ ๋๋ after๋ฅผ ์ด์ฉํด์ ๋ฐฐ๊ฒฝ ์ฃผ๊ณ , z-index๋ฅผ ์ค์ ๋ค์ ๊ฒ์ ํด๋ฆญํ์ง ๋ชปํ๊ฒ ํ์.
.modal-login::after{ display: block; content:""; position:fixed; top:0; right:0; left:0; bottom:0; background-color: black; opacity: .3; z-index: 10; }
- ๋์ด, ๋์ด ๋ชจ๋ฅผ ๋๋ ```transform: translate(-50%, -50%);``` ์ค์์ผ๋ก ๋ก๊ธธ ์ ์๋ค! - - ์ค๊ฐ์.. ์ ๋ฐ๋ผ๊ฐ๋ค๊ฐ ์ง์ง ์ ๋๋ก ๋ค ์คฌ๋๋ฐ ๊ผฌ์ฌ์ ๋ชจ๋ ์คํ์ผ์ด ๋ ์๊ฐ๊ณ ๊ทธ๋์... ๊ทธ๋ฅ ๋ ๋ฆฌ๊ณ ์ ์๋์ด ์ฃผ์ ํ์ผ์ ๋ฃ์๋ค...... ๋ฐฑ์ ์ ์ค์์ฑ์ ์์๋ค. - - ์๋ฏธ์๋ html ์์๋ ์ต๋ํ ๊ฐ์์์๋ก ๋ง๋ค์. -
/* ์ ๊ทผ์ฑ์ ์ํด ์์ด์ฝ ๊ฐ์ ๊ฐ์์์์ focus ๋์ ๋ outline ๋ง๋ค์ด์ฃผ์ */ .form-login .inp-hold:focus + .labl-hold::before { outline: 2px solid black; outline-offset: 5px; }
select, option style ์ ์ ์ฉ์์ผ๋ดค๋๋ฐ, ๋ธ๋ผ์ฐ์ ๋ณ๋ก ๋ค๋ฅด๊ฒ ๋์ค๋๋ฐ๋ค๊ฐ custom ๊ฐ๋ฅํ ์์ญ์ด ๋ค ๋ค๋ฅด๊ณ , vendor prefix ๋ ์ ์ฉํด์ผํด์, ul>li>button ์ผ๋ก ์ง์ ๊ตฌํํ๋.
1. PC์ฉ ์ฌ์ฉ๋ ์ด๋ฏธ์ง๋ด ์๋ฏธ์๋ ํ ์คํธ์ ๋์ฒดํ ์คํธ๋ฅผ ์ ๊ณตํ ๋
.ir_pm{ display:block; overflow:hidden; Font-size:1px; line-height:0; text-indent:-9999px; }
2. Mobile์ฉ ์ฌ์ฉ๋ ์ด๋ฏธ์ง๋ด ์๋ฏธ์๋ ํ ์คํธ์ ๋์ฒดํ ์คํธ๋ฅผ ์ ๊ณตํ ๋
.ir_pm{ display:block; overflow:hidden; font-size:1px; line-height:0; /* IE6,7์์ ์ง์์ด ์๋จ.....*/ color:transparent; }
3. ์คํฌ๋ฆฐ๋ฆฌ๋๊ฐ ์ฝ์ ํ์๋ ์์ง๋งย ๋งํฌ์ ๊ตฌ์กฐ์ ํ์ํ ๊ฒฝ์ฐ
.screen_out { overflow: hidden; position: absolute; /* width, height 0์ผ๋ก ๋ง๋ค๋ฉด ์คํฌ๋ฆฐ๋ฆฌ๋๊ฐ ์์ฝ์ */ width: 0; height: 0; line-height: 0; text-indent: -9999px; }
4. ์ค์ํ ์ด๋ฏธ์ง ๋์ฒดํ ์คํธ๋ก ์ด๋ฏธ์ง off ์ ์๋ ๋์ฒด ํ ์คํธ๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ ํ ๋
.ir_wa{ display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height:100% }
5. ์ด๋ก์ฐฝ์์ ํ์ฉํ๋ ๋ฐฉ๋ฒ
.blind { position: absolute; clip: rect(0 0 0 0); /* clip์ absolute๊ฐ ์์ด์ผ๋ง ์๋ํจ */ width: 1px; height: 1px; margin: -1px; overflow: hidden; }
์๋ฒ์์ ๋ด๋ ค๋ฐ๋ ์ด๋ฏธ์ง ์๋ฅผ ์ค์ด๊ธฐ ์ํด sprite ์ด๋ฏธ์ง๋ฅผ ์ด์ฉํด์ login modal์ SNS icon์ ๋ฐ๊ฟ๋ณด์๋ค. ์์ฃผ ๋ณ๊ฒฝ๋ ์ ์๋ ์ด๋ฏธ์ง์๋ ์์ฐ๋ ๊ฒ์ด ์ข๋ค!
background: url('์ด๋ฏธ์ง์ฃผ์') 0 -20px;
// ์ผ์ชฝ ๋์ด 0, 0 ์ด๋ฏ๋ก position์ ๋ฐ์ด์ ์ฌ์ฉํด์ผ ํ๋ค.
์ ํ... ์ด๋ฏธ์ง๊ฐ ์์์ง๊ฑฐ๋ ํ์ง์ด ๊ตฌ๋ ค์ง๋ค. ๊ฐ๋ก 2๋ฐฐ ์ธ๋ก 2๋ฐฐ์ ์ด๋ฏธ์ง๋ฅผ ์ค๋นํด์, 2๋ฐฐ ์ด๋ฏธ์ง์ size, position์ 1๋ฐฐ ์ด๋ฏธ์ง ์ฌ์ด์ฆ์ ๋๊ฐ์ด (width, height ์กฐ์ ) ๋ฃ์ผ๋ฉด ๋๋ค.
addEventListener ์ if-else ๊ตฌ๋ฌธ์ ์ถ๊ฐํด์ ์ฌ๋ฌ๊ฐ์ง ๋์์ ํ ์ ์๊ฒ ๋ง๋ค์๋ค.
style ์ ๋ฐ๊พธ๋ ๊ฒ์ ์ฌ๋งํ๋ฉด CSS์์ ํ์.
js๋ฅผ ์ต๋ํ ์ ๊ฒ ์ฐ์. ๋์ raw String ๋ณด๋ค๋ ๋ณ์๋ฅผ ์ ์ํด์ ์ฐ์.
element์ class๋ฅผ ์ถ๊ฐํด์ event ์ style ๋ณ๊ฒฝ
<h1 class="font">Click Me!</h1>
h1 { color: cornflowerblue; } .clicked { color: pink; } .font { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
๋ฐ์ js ์ฝ๋๋ ๋ชจ๋ ๊ฐ์ ๋์์ ํ๋ค.
// 1. ์ ์งํ๊ฒ style ์ด์ฉ -> style์ CSS์์ ๋ฐ๊พธ๋๊ฒ ์ข๋ค. // 2๋ฒ ์ด์ ์ฐ์ด๋ฉด ๋ณ์๋ก ๋ง๋ค์. const h1 = document.queryString("h1"); function handleTitleClick() { const currentColor = h1.style.color; let newColor; if (currentColor === "cornflowerblue") { newColor = "pink"; } else { newColor = "cormflowerblue"; } h1.style.color = newColor }
// 2. className ์ ๋ฐ๊ฟ์ค -> ์๋ ๊ฐ์ง๊ณ ์๋ class๊ฐ ๋ ์๊ฐ. const h1 = document.queryString("h1"); function handleTitleClick() { const clickedClass = "clicked" if (h1.className === clickedClass) { h1.className = ""; } else { h1.className = clickedClass; } }
// 3. classList ์ด์ฉ. -> ๊ตฟ const h1 = document.queryString("h1"); function handleTitleClick() { const clickedClass = "clicked" if (h1.classList.contain(clickedClass)) { h1.classList.remove(clickedClass); } else { h1.classList.add(clickedClass); } }
// 4. ๊ทธ์น๋ง ์ฐ๋ฆฌ์๊ฒ๋ ํ ๊ธ์ด ์๋ค!!! function handleTitleClick() { h1.classList.toggle("clicked"); }
fact - ๋ฌด์จ ์ผ์ด ์์๋์ง, ๋ญ ํ๋์ง
feeling - ๋ฌด์์ ๋๊ผ๋์ง,
finding - ์ด๋ค ์ธ์ฌ์ดํธ๊ฐ ์์๋์ง
future action - ์ก์ ํ๋์ด ์๋์ง
feedback - ์ ๋ด์ฉ์ ํตํด์ ์งํํ ์ก์ ์ ํ๋์ ๋ํด ํผ๋๋ฐฑ - 1120