๐ฉ๐ป๐ปSTUDY/CSS (24) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ [CSS] Flexible Box 'flex๋ฅผ ํด๋ณด์!' ๋ผ๊ณ ์๊ฐ๋งํ์๋๋ฐ ๋๋์ด ์ฌ๋ฆฐ๋ค๐ ์ด๋ก ์ ์ข ๋ฐฐ์๋ณด๋ ํท๊ฐ๋ฆฌ๋๊ฒ ๋ง๋ค.. ์ด๋ก ํ์ ์์ฉ์ ๊ผญ ํด๋ณด๊ณ ์ดํด๋ฅผ ํ์โ ๋ธ๋ผ์ฐ์ ํธํ Can I use flexible Box ? Flexible Box๋ฅผ ์ฐ๋ ์ด์ ๋๋ถ๋ถ ์ฌ์ดํธ๋ ๋ ์ด์์์ด ์์ง ๊ตฌ์ฑ์ด๋ฉฐ '์-์๋'๋ก ์คํฌ๋กค ํ์ฌ ์ฌ์ฉํ๋ค. ๋ ์ด์์์ ๊ตฌ์ฑํ ๋ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ์์๋ค์ด ๊ธฐ๋ณธ์ ์ผ๋ก ๋ธ๋ก(block) ๊ฐ๋ ์ผ๋ก ํ์(display)๋๋ฉฐ ์ด๋ ๋ทฐ(view)์ ์์ง(์์์ ์๋)์ผ๋ก ์์ด๊ธฐ ๋๋ฌธ์ ์์ง ๊ตฌ์ฑ์ ์๋์ ์ผ๋ก ์ฝ๋ค. ํ์ง๋ง, ์ํ๊ตฌ์กฐ๋ฅผ ๋ง๋๋ ์์ฑ์ด ๋ช ํํ์ง ์์ ์ด๋ float , inline-block ์ ํตํด ๋ง๋ ๋ค. ๊ทธ๋ฌ๋ ์ด๋ฌํ ๋ฐฉ๋ฒ๋ค์ ๋ค์ํ ๋ฌธ์ก(clear, white space ๋ฑ, ํด๊ฒฐ ๊ฐ๋ฅํ.. [CSS] CSS๋ฐฉ๋ฒ๋ก (BEM/OOCSS/SMACSS) CSS ๋ฐฉ๋ฒ๋ก (BEM/OOCSS/SMACSS) CSS ์ค๊ณ์ ์ค์์ฑ ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ์ ์ํด ์ฝ๊ฒ ์ ์ง๋ณด์ ํ๊ธฐ ์ํด ํ์ฅ์ ๊ฐ๋ฅํ๊ฒ ํ๊ธฐ ์ํด ํด๋์ค๋ช ์ผ๋ก๋ ๋ฌด์จ ์๋ฏธ์ธ์ง ์์ธก ๊ฐ๋ฅํ๋๋ก ํ๊ธฐ ์ํด BEM (Block Element Modifier) Block, Element, Modifier ๋ก ๋๋์ด ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ์น ๊ฐ๋ฐ ์ ๊ทผ๋ฒ ์ค ํ๋. ์ ์ ์ธํฐํ์ด์ค๋ฅผ ๋ ๋ฆฝ๋ ์ฌ๋ฌ ๊ฐ์ ๋ธ๋ก์ผ๋ก ๋ถ๋ฆฌํ์๋ ๊ฒ์ด ๋ชฉํ ๋ณต์กํ UI๋ฅผ ๊ฐ์ง ํ์ด์ง์ ์ธํฐํ์ด์ค ๊ฐ๋ฐ ํ๊ฒฝ์ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ํ๋ฉฐ, ์ฝ๋์ ์ฌํ์ฉ์ ๋์ผ ์ ์๋ค. ํด๋์ค๋ช ์ด ์ฉ๋, ํํ๋ฅผ ์๋ฏธํ๋ฏ๋ก ์ง๊ด์ ์ด๋ ๊ธธ๊ณ ๋ณต์กํด์ง๋ ๊ฒ์ด ๋จ์ . 1) Block ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ. (์ฝ๋์ ๊ตฌ์กฐ์ ๋ฉ์ด๋ฆฌ) ํด๋์ค๋ช ์ ํ๋์ ๋จ์ด ์ฌ์ฉ, ๊ธธ์ด์ง ๊ฒฝ์ฐ ๋จ์ผ ํ์ด.. [CSS] padding position ์์ญ [CSS] padding position ์์ญ ์กฐ๊ฑด parent ์์์ padding์ ์ฃผ๊ณ relative ํด์ค๋ค. child๋ absolute ์ผ ๋, ์์น๋ฅผ ์ด๋ป๊ฒ ์ก์์ค๊น? .parent { width: 200px; height: 200px; border: 1px solid #000; position: relative; padding: 20px; box-sizing: border-box; } .child { position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: red; } parent์ padding์ ๋ฌด์ํ๊ณ child๋ top: 0; left: 0; ๋ฐฉํฅ์ ์๊ฒ ๋๋ค. ๋ฐฉ๋ฒ .wrap { width: 200px;.. [CSS] height: 100% VS height: auto [CSS] height: 100% / height: auto; height: 100%; ๋ถ๋ชจ ์ปจํ ์ด๋์ ๋์ด๋ฅผ 100% ๋ก ์ค์ ํ๋ค. (๋ถ๋ชจ๋์ด ์ํฅ) #innerDiv ๋ height: 50px height: auto; ๋์ด๋ ์์์ ๋์ด์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค. (์์๋์ด ์ํฅ) #innerDiv๋ height: 10px Reference https://stackoverflow.com/questions/15943009/difference-between-css-height-100-vs-height-auto [CSS] opacity / visibility / display ์ฐจ์ด์ [CSS] opacity / visibility / display ์ฐจ์ด์ ์์๋ฅผ ํ์ํ ์ ์์ผ๋ ๊ณต๊ฐ์ ์ฐจ์งํ๊ณ ํด๋ฆญ์ ํจ์ ๋ฐ๋ผ ๋ค๋ฅด๋ค. property occupies space(๊ณต๊ฐ ์ฐจ์ง) consumes clicks(ํด๋ฆญ ์ด๋ฒคํธ) opacity: 0 O O visibility: hidden O X display: none X X ํด๋ฆญ์ด๋ฒคํธ๋ ondbclick, onmousedown, onmousemove ๋ฑ๊ณผ ๊ฐ์ ๋ค๋ฅธ ํฌ์ธํฐ ์ด๋ฒคํธ๋ ์ฌ์ฉํ๋ค. ๋ณธ์ง์ ์ผ๋ก visiblity: hidden์ opacity: 0์ pointer-events: none์ ์กฐํฉ์ฒ๋ผ ๋์ํ๋ค. ์ถ์ฒ :: visibility:hidden vs display:none vs opacity:0 display,visibility.. [CSS] ๋ฐ์ํ ์ด๋ฏธ์ง ๋ฃ๊ธฐ [CSS] responsiveFullScreen ์ด๋ฏธ์ง ๋ฃ๊ธฐ img VS background-image script์์ด HTML / CSS ๋ง ์ฌ์ฉ!! #1. background-image * { margin: 0; padding: 0; } html, body { height: 100%; } .bg { background-image: url("https://www.w3schools.com/howto/img_girl.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; height: 100%; } #2. img 2-1) [์์ 1] html, body { margin: 0; height: 100%; }.. [CSS] @media query [CSS] @media query ๋ฏธ๋์ด ์ฟผ๋ฆฌ, @media query ์ดํดํ๊ธฐ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ๋จ๋ง๊ธฐ ์ ํ(์ถ๋ ฅ๋ฌผ vs ํ๋ฉด)๊ณผ, ์ด๋ค ํน์ฑ์ด๋ ์์น(ํ๋ฉด ํด์๋, *๋ทฐํฌํธ ๋๋น ๋ฑ)์ ๋ฐ๋ผ ์น์ฌ์ดํธ๋ ์ฑ์ ์คํ์ผ์ ์์ ํ ๋ ์ ์ฉํ๋ค. *๋ทฐํฌํธ(viewport) :: ํ์ฌ ํ๋ฉด์ ๋ณด์ฌ์ง๊ณ ์๋ ๋ค๊ฐํ(๋ณดํต ์ง์ฌ๊ฐํ)์ ์์ญ. ์น๋ธ๋ผ์ฐ์ ์์๋ ํ์ฌ ์ฐฝ์์ ๋ฌธ์๋ฅผ ๋ณผ ์ ์๋ ๋ถ๋ถ(์ ์ฒดํ๋ฉด์ด๋ผ๋ฉด ํ๋ฉด์ ์ฒด)์ ๋งํ๋ค. ๋ทฐํฌํธ ์ค์์๋ ์ง๊ธ ๋ณผ ์ ์๋ ๋ถ๋ถ์ ์๊ฐ์ ๋ทฐํฌํธ(visual viewport)๋ผ๊ณ ๋ถ๋ฅธ๋ค. ์ค๋งํธํฐ์์ ์ฌ์ฉ์๊ฐ ํ๋ฉด์ ํ๋ํ์ ๋์ ๊ฐ์ ํน์ ์ํฉ์์ ๋ ์ด์์ ๋ทฐํฌํธ์ ํฌ๊ธฐ๋ ๋ณํ์ง ์์ง๋ง ์๊ฐ์ ๋ทฐํฌํธ๋ ๋ ์์์ง๋ค. 1. ๋ฏธ๋์ด์ฟผ๋ฆฌ ์ฌ์ฉ๋ฒ 1-1) CSS ์ฝ๋ ๋ด๋ถ์์ ๋ถ๊ธฐํ๋ ๋ฐฉ.. [CSS] transition, transition-delay, transform, calc vendor prefix [CSS] transition, transition-delay, transform, calc vendor prefix #1. transition / transition-delay vendor prefix transition ์ IE10๋ถํฐ ์ง์ํ๋ค. vendor prefixes -webkit-transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; -moz-transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; -o-transition : [.. ์ด์ 1 2 3 ๋ค์