[Front-end๐ฆ] #9 Media Query (+ z-index, CSS stacking order)
1. Coding Convention
NHN, Google์ HTML, CSS Convention ์ ์ดํด๋ณด๋ ์๊ฐ์ ๊ฐ์ก๋ค. ์ดํด๋ณด๋ ์ค class๋ฅผ ๋งจ ๋ค์ ์ฃผ๋ ๊ฒ์ด ์ ์ง๋ณด์์ ์ฉ์ดํ๋ค๋ ๋ด์ฉ๋ ๋์๋๋ฐ, SVG ํ์ผ ์ด์ด๋ณผ ๋ ๋ง์ด ๋๊ผ๋ค
์ถ๊ฐ๋ก ๋๊ธฐ์ ์ ๊ฒฝ์ฐ๋ ํฌ๋กค๋ง์ ๋ง๊ธฐ ์ํด CSS ๋๋ ํ๋ฅผ ํ๊ธฐ ๋๋ฌธ์ convention์ ๊ณต๊ฐํ๋ ๊ณณ์ด ์๋๋ฉด ์ด๋ค ๊ท์น์ ์ฌ์ฉํ๋์ง ์ ์ ์๋ค. ํฌ๋กค๋ง์ ์ ๋ฌด ์๋ํ๋ฅผ ์ํด ํ๋๋ฐ, ์๋น์ค์ ๋ถํ๊ฐ ๊ฐ๊ธฐ ๋๋ฌธ์ ๋๊ธฐ์ ์์๋ API server๋ฅผ ์ ๊ณตํ๊ธฐ๋ ํ๋ค๊ณ ํ๋ค.
2. Animation
2-1. ์นด๋ ๋ค์ง๊ธฐ
์ด์ ํผ์์ ์ฐพ์์ ์ดํดํ๋๋ฐ๋ perspective: 400px;
์ ๋ถ๋ชจ์ backface-visibilty: hidden;
์ ์นด๋ ์ ๋ท๋ฉด์ ๋ค ์ค์ผ ํ๋ค๋๊ฒ ํท๊ฐ๋ ค์ ์ข ํค๋งธ๋ค. ํ์ง๋ง ์ด์ ๋ ์๋ฒฝํ๊ฒ ์ดํดํ๋ค. #6-2 ์ ์นด๋ ๋ค์ง๊ธฐ๋ ์ ๋ฆฌํด ๋์๋ค.
2-2. hover ์๋ฒฝ ์ ๋ฆฌ
065.html์ 20๊ฐ์ ๋ฒํผ ์ฌ์ค div ์ ๋ง๋ค์ด์ ์ค์ตํด ๋ณด์๋๋ฐ ๊ทธ ์ค ์ ๊ธฐํ ํจ๊ณผ์ด๋ฉด์ ์ดํด๊ฐ ์๊ฐ๋ ๋ด์ฉ์ ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค. ์๋ ์ฝ๋๋ font-size ๊ฐ์ ์์ด๋ ๋๋ ๊ฒ๋ค์ ๋บ ์ฝ๋์ด๋ค.
div { position: relative; width: 200px; height: 50px; background: cornflowerblue; color: white; border: 2px solid black; border-radius: 15px; transition: all 2s; overflow: hidden; } div::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: greenyellow; transition: all 5s; transform: rotateX(90deg); } div:hover::before { transform: rotateX(0); z-index: -1; } div::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: greenyellow; transition: all 5s; transform: rotateY(90deg); } div:hover::after{ background-color: blue; transform: rotateY(0); z-index: -1; } div:hover { color: tomato; z-index: 1; }
์ด๋ฐ ์ฝ๋์ธ๋ฐ, ํ๋์ ๋ฐฐ๊ฒฝ์ div์ ๊ฐ์ ์์(::before, ::after)๋ก ์์์ ๋ง๋ค์ด์ x์ถ ๋ฐฉํฅ, y์ถ ๋ฐฉํฅ์ผ๋ก 90๋ ๋๋ ค์ ์๋ณด์ด๊ฒ ์ฒ๋ฆฌํด๋ ๋ค, hover์ผ ๋ 90๋๋ฅผ ๋ค์ ๋๋ ค์ ๋ง์น ๊ฐ์ด๋ฐ์๋ถํฐ ์ญ์๋ก ๋ํ๋๋ ํจ๊ณผ๋ฅผ ์ค ๊ฒ์ด๋ค. ์ด๋ฐ ํจ๊ณผ๋ฅผ ์ค์ ์ฌ๋ฌ๊ฐ์ง ๋ฒํผ์ ๋ง๋ค์ด ๋ณด์๋ค.
2-3. z-index
์์ ์ฝ๋์ ๊ด๋ จํด์ ๋ค๋ฅธ ์๊ฐ์๋ถ์ ์ง๋ฌธ์ ๋ณด๊ณ ๋์ ๊ฐ์ด ๊ถ๊ธํด์ก๋๋ฐ,
- ์ด ์ฝ๋์์ hover ์ํ์ผ ๋ div:hover์ z-index๊ฐ 1์ด๋ผ ๊ธ์จ color๋ ์ ์ฉ์ด ๋๋๋ฐ, div์ ์ค์ ํ background-color: cornflowerblue; ๋ ์ด๋๋ก ๊ฐ๊ฑด์ง, (hover ๋ฐฐ๊ฒฝ์ด ๊ฐ์๊ธฐ ํฌ๋ช ์ผ๋ฆฌ๋ ์์ผ๋๊น...)
- ์ div:hover::before, div:hover::after / div:hover์ z-index๋ฅผ -1 / 1 ๋ก ์ฃผ๋ฉด ๊ธ์จ๊ฐ ๋ณด์ด๊ณ auto or 0 / 1 ๋ก ์ฃผ๋ฉด ๊ธ์จ๊ฐ ์๋ณด์ด๋?
์ด๊ฑด ์ฐพ์๋ณด๊ณ ์ง์ ๋ง๋ค์ด์ ์์๋ณด๋ฉด์ ์ ๋ฆฌํด๋ดค๋ค.
+๋ง๋ค์ด์ฃผ์ ์ด๋ฏธ์ง!
- CSS Stacking Order : normal, z-index ๋ฑ์ด ์ด๋ค๊ฒ ์์ ์์ด๋์ง
- parent, child z-index : ๋ถ๋ชจ ์์ ๊ด๊ณ์ผ๋ z-index๊ฐ ์ด๋ป๊ฒ ์๋ํ๋์ง
- DOM-tree div ์์ ์ด text๋ div์ ์์์ด๋ค!!!!
- opacity๊ฐ stacking order์ ์ํฅ์ ๋ฏธ์น๋ค : ์ด๊ฑด... ๋์ค์ ์ฝ๋ฉํ ๋ ๋๋ฆฌ๋ ๊ฑฐ๊ฐ๋ค.....
- transform, opacity ๊ฐ ์ค์ ๋๋ฉด ์๋ก์ด stacking order๊ฐ ์๊ธด๋ค
์์ ์๋ฆฌ๋จผํธ๋ค์ z-index ์์ฑ ๊ฐ์ ์ค๋ก์ง ๋ถ๋ชจ ์์์๋ง ์๋ฏธ๋ฅผ ๊ฐ์ง. (๋ถ๋ชจ์ ์์์ด ๊ฐ์ flow์ ์์ ๋) ๋ถ๋ชจ ๋ด์ text๋ ์์์ด๊ณ , text์ z-index default ๊ฐ์ 0์ด๋ฏ๋ก, ์๋์ ์ ๋ฆฌํ ๊ฒ๊ณผ ๊ฐ์ด ๋๋ค. ๋ถ๋ชจ๊ฐ position์ด ์๋ normal flow ๋ผ๋ฉด z-index ๊ฐ -1 ์ธ child3์ parent1 ๋ฐ์ผ๋ก ๋ด๋ ค๊ฐ๋ค.
+) z-index ๋ position์ด ์์ด์ผ ์ค ์ ์๋ค.
3. Media Query
#6-2์ ์ ๋ฆฌํ๋ค. ๋ฏธ๋์ด ์ฟผ๋ฆฌ๊ฐ ๋ค๋ฅธ ๋ด์ฉ์ธ ์ค ์์๋๋ฐ, ์ธํ๋ฐ์์ ๋ค์ @media
์ ๋ํ ๋ด์ฉ์ด์๋ค. ๊ฐ๋จํ๊ฒ ๋ค๋ฃฌ ๋ค ๋ฐ๋ก ์ค์ต์ผ๋ก ๋ค์ด๊ฐ๋ค.
1. 1๋ง ์๊ฐ์ ๋ฒ์น ์นํ์ด์ง ์ ์ - Media Query
media query๋ฅผ ์ฌ์ฉํด์ 1๋ง ์๊ฐ์ ๋ฒ์น ์นํ์ด์ง๋ฅผ ์ ์ํ๋ ๊ณผ์ ๋ฅผ ๋ฐ์๋ค. ํ์ด์ง ๊ตฌ์กฐ ์์ฒด๋ ๋จ์ํ๋๋ฐ...
์ด๋ฐ ์ค๋ฐ๊ฟ์ ์ฐ๋ฆฌ๋ ์ด์์ ์ธ ์ฝ๋ ์ง๋๋ฒ์ ๋ฐฐ์ฐ๋ ๊ฒ์ด๋ brํ๊ทธ๋ pํ๊ทธ๋ฅผ ๋๋๋ ๊ฒ๋... span๋.. ์ฐ์ง ์๋๊ฑธ ๊ถ์ฅํ๋ค๊ณ ํ์ จ๋ค. ๊ทธ๋ฐ๋ฐ, ์น์ฌ์ดํธ๋ฅผ ๋ค ๋ค์ ธ๋ด๋ brํ๊ทธ๋ก ๋๋ด๋ค...... ๊ทธ๊ฑธ ๋ณด๋ ๋ ์ด์ ๊ณ ๋ฏผํด๋ ๋ต์ด ๋์ค์ง ์์์ ์ผ๋จ์ ๋๊ฐ์ด ๋ณด์ด๊ฒ๋ผ๋ ๋ง๋ค์ ํ๊ณ pํ๊ทธ ๋๋ ์ ์คํ์ผ๊น์ง ๋ค ์ ์ฉํ๋ค.
๊ทธ๋์ media query๋ ์ ๋๋ก ์ ์ฉ๋ ๋ชปํ๋ค. ๋, background-image ๋ก ๋ฃ์๋๋ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ํฌ๊ธฐ๊ฐ ๋ณํ์ง ์๋ ๋ฌธ์ ๊ฐ ์๋๋ฐ... background-size๋ก๋ ํด๊ฒฐํ์ง ๋ชปํ๋ค........ ์ด๊ฒ๋ ํด๊ฒฐ์ด ํ์ํ๋ค. ๋ด์ผ ์์ ๋ฃ๊ณ #10 ์ ์ ๋ฆฌํด์ ์ฌ๋ฆด ์์ ์ด๋ค.
+) background-image ์ ๊ฒฝ์ฐ ํฌ๊ธฐ์ ๋ง์ถฐ ๋ฃ๋ ๊ฒฝ์ฐ๊ฐ ๋๋ค์์ด๊ณ , ๋ด๊ฐ ์ฌ์ฉํ ๊ฒ ์ฒ๋ผ width: 100%๋ก ๋ถ๋๋ฝ๊ฒ ์ค์ด๋ค๊ฒ ๋์ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ ๋๋ฌผ๋ค๊ณ ํ๋ค. ๊ทธ์น๋ง height์ vw ๋จ์๋ฅผ ์จ์ ์ค์ด๋ค๊ฒ ๊ณ ์น ์ ์์๋ค.
4. ๋๋์
- ๋ชจ๋ฐ์ผ์ ์ฐ์ ์ ์ผ๋ก ์ค๊ณํ๋ค๋๊ฒ ์ถฉ๊ฒฉ์ ์ด์๋ค. ์ง๊ธ๊น์ง ๊ฒฝํ์ PC ํ๋ฉด๋ง ์ค๊ณํด์ ๋ชจ๋ฐ์ผ์์ ํ๋ํด์ ๋ณด๋๊ฒ ๋ชจ๋ฐ์ผ์๋ง ๋์์ด ๋์ด์์ด์ ํฐ ํ๋ฉด์ผ๋ก ๋ชป๋ณด๋๊ฒ ๋ ๋ถํธํด์ ๋น์ฐํ PC ํ๋ฉด ๋จผ์ ์ค๊ณํ๋ ์ค ์์๋ค..
- ์ค๋ 2๋ฒ์ ์๋ z-index๋ฅผ ์ดํดํ๋ ๊ฒ์ ์ง์ฐฉํด์ ๋ค๋ฅธ ๊ฒ๋ค์ ๋๋ด์ง ๋ชปํ๋ค. ์ง์ฐฉ์ ๋ฒ๋ฆฌ๊ณ ๋ค์ ๊ฒ์ผ๋ก ๋์ด๊ฐ ์ ์๊ฒ ๋์ด์ผ๊ฒ ๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([Front-end๐ฆ] #9 Media Query (+ z-index, CSS stacking order)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ddosang/Front-end-9์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค