TIL - 21.06.30 ๐จโ๐ป - CSS
TIL - 21.06.30 ๐จโ๐ป
CSS ์ ํ์
tag[attribute]
CSS ์ ํ์๋ก ์ฌ์ฉํ ์ ์๋ ๊ฒ ์ค์ ์ด๋ค ํ๊ทธ๊ฐ ์ด๋ค ์์ฑ ๋๋ ์์ฑ ๊ฐ์ ๊ฐ์ง๊ณ ์์๋ ํน์ ํ๋ ๋ฐฉ๋ฒ์ด๋ค.
input[placeholder='userID'] { display: none; }
<input type='text' placeholder='userID' /> <!-- ์ด๊ฒ๋ง ์ถ๋ ฅ๋์ง ์๋๋ค. --> <input type='text' placeholder='type content' />
์ ์ฝ๋์์ input[placeholder='userID']
๋์ input[placeholder]
๊ฐ ๋ค์ด๊ฐ๋ค๋ฉด ๋ ๋ค ์ถ๋ ฅ๋์ง ์์์ ๊ฒ์ด๋ค.
tag:nth-child() vs tag:nth-of-type()
:nth-child()
๊ตฌ์กฐ ์ ํ์๋ ํ์ ์๋ฆฌ๋จผํธ ์ค ๊ฐ์ฅ ์ฒซ๋ฒ์งธ ์๋ฆฌ๋จผํธ๋ฅผ ์ ํํ๋ ์ ํ์์ด๋ค.
์ฃผ์ํด์ผํ ์ ์ ๋ชจ๋ ๊ตฌ์กฐ ์ ํ์๋ ํ๊ทธ๊ฐ ๋ค๋ฅด๋๋ผ๋ ํ์ ์๋ฆฌ๋จผํธ๋ผ๋ฉด ์๊ดํ์ง ์๊ณ ์ธ์ ํด๋นํ๋ ์๋ฆฌ๋จผํธ๋ฅผ ๋ฐํํ๋ค๋ ์ ์ด๋ค.
์ด์ ๋ฐํด :nth-of-type()
ํํ ๊ตฌ์กฐ ์ ํ์ ๊ฐ์ ๊ฒฝ์ฐ์๋ ๋๊ฐ์ ํ๊ทธ๋ฅผ ๊ฐ์ง ํ์ ์๋ฆฌ๋จผํธ์ค์์ ์ฒซ๋ฒ์งธ ์๋ฆฌ๋จผํธ๋ฅผ ๋ฐํํ๋ค.
div:nth-child(3) { color: red; } div:nth-of-type(3) { color: blue; }
<body> <div>Division 1</div> <span>Span 1</span> <div>Division 2</div> <!--๊ธ์์์ด ๋นจ๊ฐ์์ผ๋ก ๋ณํ๋ค.--> <span>Span 2</span> <div>Division 3</div> <!--๊ธ์์์ด ํ๋์์ผ๋ก ๋ณํ๋ค.--> </body>
๋ค๋ง ์ด ๊ตฌ์กฐ ์ ํ์์ ํํ ๊ตฌ์กฐ ์ ํ์๋ฅผ ์ฌ์ฉํ ๋ ์ฃผ์ํ ์ ์ด ์๋ค.
์๋ฅผ ๋ค์ด div:first-child
๋ฅผ ํ์๋ ๊ทธ div
์๋ฆฌ๋จผํธ์ ํ์ ์๋ฆฌ๋จผํธ๊ฐ ์๋ค๋ฉด ๋ชจ๋ ํ์ ์๋ฆฌ๋จผํธ์ div:first-child
๋ก ์ค์ ํ ์คํ์ผ์ด ์ ์ฉ๋๋ค.
div:first-child { color: red; }
<body> <div> <div>Check 1 <!--๊ธ์์์ด ๋นจ๊ฐ์์ผ๋ก ๋ณํ๋ค.--> <p>Content 1</p> <!--๊ธ์์์ด ๋นจ๊ฐ์์ผ๋ก ๋ณํ๋ค.--> <div>Content 2</div> <!--๊ธ์์์ด ๋นจ๊ฐ์์ผ๋ก ๋ณํ๋ค.--> </div> </div> <div>Division 2</div> <div>Division 3</div> </body>
๋ถ์ ์ ํ์, :not()
์ธ์ ์๋ฆฌ์ ์์ฑ, ์์ฑ๊ณผ ๊ฐ, class, ID, ๊ตฌ์กฐ ์ ํ์ ๋ฑ๋ฑ์ ๋ฃ์ด ํด๋น ์์ฑ์ ๊ฐ์ง ์๋ฆฌ๋จผํธ๋ ์ ์ธํ๊ณ ์ ํํ ์ ์๊ฒ ๋์์ฃผ๋ ์ ํ์์ด๋ค.
li:not(:nth-child(2n)) { background-color: red; }
<ul> <li>list 1</li> <!--๋ฐฐ๊ฒฝ์์ด ๋นจ๊ฐ์์ผ๋ก ๋ณํ๋ค.--> <li>list 2</li> <li>list 3</li> <!--๋ฐฐ๊ฒฝ์์ด ๋นจ๊ฐ์์ผ๋ก ๋ณํ๋ค.--> <li>list 4</li> </ul>
์ด์ฒ๋ผ ๋ถ์ ์ ํ์์ ์ฐ์ฐ์์ ๊ตฌ์กฐ ์ ํ์๋ ๋ค์ด๊ฐ ์ ์์ผ๋ฉฐ ์ฌ์ฉ๋ฒ์ ๋ฌด๊ถ๋ฌด์งํ๋ค.
CSS ๋ ์ด์์
๋ ์ด์์์ ๊ตฌ์ฑํ ๋, HTML ๊ตฌ์ฑ์ ํฌ๊ฒ ์์ง๋ถํ ๊ณผ ์ํ๋ถํ ๋ก ๋ถ๋ฅ ํ ์ ์๋ค.
์์ง๋ถํ ์ ํ๋ฉด์ ์์ง์ผ๋ก ๊ตฌ๋ถํ์ฌ ์ปจํ ์ธ ๋ฅผ ๊ฐ๋ก๋ก ๋ฐฐ์นํ๋ ๊ฒ์ด๊ณ , (ํ, row)
์ํ๋ถํ ์ ๋ถํ ๋ ์์๋ฅผ ์ํ์ผ๋ก ๊ตฌ๋ถํ์ฌ ๋ด๋ถ ์ปจํ ์ธ ๋ฅผ ์ธ๋ก๋ก ๋ฐฐ์นํ๋ค. (์ด, column)
์์ง๋ถํ ? ์์ง์ผ๋ก ๋ถํ ํ๋๋ฐ ์ ํ์ด๊ณ ์ ๊ฐ๋ก๋ฐฐ์น์ผ? ๋ผ๊ณ ์๊ฐํ ์ ์๋๋ฐ, ๋ด๊ฐ ๊ทธ๋ฌ๋ค
์ฝ๊ฒ ์๊ฐํด์ ์ ์ฌ๊ฐํ์ด ์๋ค๊ณ ๊ฐ์ ํ์.
์ด ์ ์ฌ๊ฐํ์ ์์ง์ผ๋ก ๋๋ฒ ์๋ฅด๋ฉด(์์ง๋ถํ ) ์ ์ฌ๊ฐํ์ ๊ฒฐ๊ตญ ๊ฐ๋ก๋ก ์ธ๊ฐ์ ์ง์ฌ๊ฐํ์ด ๋์ฌ ๊ฒ ์ด๋ค.
์ญ์ ์ด ์ ์ฌ๊ฐํ์ ์ํ์ผ๋ก ๋๋ฒ ์๋ฅด๋ฉด(์ํ๋ถํ ) ์ ์ฌ๊ฐํ์ ์ธ๋ก๋ก ์ธ๊ฐ์ ์ง์ฌ๊ฐํ์ด ๋์ฌ ๊ฒ ์ด๋ค.
์ด๋๋ ์ดํด๊ฐ ์ด๋ ต๋ค๋ฉด ๊ทธ๋ฅ ๋จธ๋ฆฌ์ ๋ฐ์.
์์ง๋ถํ - ํ - row
์ํ๋ถํ - ์ด - column
Flexbox
Flexbox๋ ๋ชจ๋ ์น์ ์ํ ๋น๊ต์ ์ต์ ์ ๋ ์ด์์ ๋ฐฉ์์ด๋ฉฐ, ์น์ด ๋ด๊ณ ์๋ ์ปจํ
์ธ ์์์ ์ฌ์ด์ฆ๊ฐ ๋ถ๋ช
ํํ๋๋ผ๋ ์ ๋์ ์ผ๋ก ์กฐ์ ํด ์ ์ฐํ๊ฒ ๋ ์ด์์์ ๊ตฌ์ฑํ ์ ์๋ค.
๊ฒ๋ค๊ฐ ๋น๊ต์ ๊ฐํธํ ๋ฐฉ์์ผ๋ก ๋ ์ด์์์ ๊ตฌ์ฑํ ์ ์๋ค๋ ์ฅ์ ๋ ๊ฐ์ง๊ณ ์๋ค.
Flexbox๋ ๋ถ๋ชจ์์์ ์์์์๊ฐ ์ข ์์ด ๋์ด ์๋๊ฒ ํฐ ํน์ง์ธ๋ฐ, ๋ ์ด์์์ ๋ฐฐ์นํ ๋ ๋ฐฐ์น๊ฐ ๋ ์์์ ์ ํํด ์ค์ ํ๋๊ฒ ์๋ ๋ถ๋ชจ๋ฅผ ์ ํํด ์ค์ ํ๊ณ ์์ ๊ฐ์ ํฌ๊ธฐ ์กฐ์ ๋ง์ ์์๋ฅผ ์ ํํด ์ค์ ํ๊ฒ ๋๋ค.
#outer { display: flex; flex-direction: row; /* ํ์ ํ๊ฒ ์ง๋ง flex-direction ์์ฑ์ ๊ธฐ๋ณธ ๊ฐ์ด row์ด๊ธฐ์ ์์จ๋ ๋๋ค. */ } .box { box-sizing: border-box; height: 25px; width: 25px; margin: 0.2rem; background-color: lightblue; }
<ul id='outer'> <li class='box'>box</li> <li class='box'>box</li> <li class='box'>box</li> <li class='box'>box</li> </ul>
์๋๋ผ๋ฉด ์ธ๋ก๋ก ํ๋์ฉ ์์ ๋ฐ์ค๊ฐ display: flex
๋ฅผ ์ ์ฉํ๊ณ ๋๋ ๊ฐ๋ก๋ก ์ ๋ ฌ๋ ๊ฒ์ ๋ณผ ์ ์์ ๊ฒ์ด๋ค.
๋ค๋ง flex
๋ ๋ถ๋ชจ์ ์ ์ฉํ๋ค ํ๋๋ผ๋ ์์์ ์์, ์ฆ ์์์ ์ ์ธํ ํ์๊น์ง๋ ์ ์ฉ๋์ง ์์ผ๋ ์์์ ์์์ ๊ฐ๋ก ์ ๋ ฌ ์์ผ์ผํ ๋๋ ์์์๊ฒ display: flex
์์ฑ์ ๋ถ์ฌํ๋ค.
flex-diretion
flex-direction
์์ฑ ๊ฐ์ ๊ฒฝ์ฐ๋ ๋ถ๋ชจ์ ์ ์ฉ์ํค๋ ์์ฑ์ผ๋ก, ์์์ ๊ฐ๋ก๋ก ์ค์ธ์ธ์ง ์ธ๋ก๋ก ์ค์ธ์ธ์ง ์ ํ๋ ์์ฑ์ด๋ค.
row
๋ ๊ธฐ๋ณธ ๊ฐ์ผ๋ก flexbox์์ flex-direction
์์ฑ์ ๋ถ์ฌํ์ง ์์ผ๋ฉด ์์๋ค์ ๊ฐ๋ก๋ก ์ ๋ ฌ๋๋ค.
column
๋ ์ธ๋ก ์ ๋ ฌ์ผ๋ก ์์์๊ฒ ๋ถ์ฌํ๋ flex ์์ฑ์ผ๋ก ๋ ์ด์์์ ์ก๊ณ ์ถ์๋ ์ฌ์ฉํ๋ค.
์ฌ๊ธฐ์ ์๋กญ๊ฒ ๋ฑ์ฅํ๋ flexbox์ ๊ฐ๋
์ด axis
(์ถ)์ด๋ค.
axis
๋ main axis(๊ธฐ์ค์ถ)
๊ณผ cross axis(๊ต์ฐจ์ถ)
์ผ๋ก ๋๋๋๋ฐ flex-direction
์์ฑ์ด ์ง์ ํ๋ ๊ฒ์ด ๋ฐ๋ก ์ด axis
์ด๋ค.
flex-directon: row;
์์ฑ ๊ฐ์ ์ฌ์ฉํ๊ฒ ๋๋ฉด ๊ธฐ์ค์ถ์ด row(ํ)๋ฐฉํฅ, ๊ต์ฐจ์ถ์ด column(์ด)๋ฐฉํฅ์ผ๋ก ๋ฐ๋๊ณ ์ปจํ
์ธ (์์์์)๋ ๊ธฐ์ค์ถ์ ๋ฐ๋ผ ์ ๋ ฌ ๋๋ ๊ฒ์ด๋ค.
์ด์ ๋ฐ๋๋ก flex-direction: column;
์์ฑ ๊ฐ์ ์ฌ์ฉํ๊ฒ ๋๋ฉด ๊ธฐ์ค์ถ์ด column(์ด)๋ฐฉํฅ, ๊ต์ฐจ์ถ์ด row(ํ)๋ฐฉํฅ์ด ๋๋ ๊ฒ์ด๊ณ ๊ธฐ์ค์ถ์ธ ์ด๋ฐฉํฅ(์ธ๋ก)์ ๋ฐ๋ผ ์ปจํ
์ธ ๊ฐ ์ ๋ ฌ๋๋ ์๋ฆฌ์ธ ๊ฒ.
์ด ์ถ์๋ ์์์ ๊ณผ ๋์ ๋ ์กด์ฌํ๋๋ฐ,
ํต์์ ์ผ๋ก ๋ถ๋ชจ์์์ ์ข์ธก์ด ์์์ , ์ฐ์ธก์ด ๋์ ์ด๊ฑฐ๋ ์๊ฐ ์์์ ์๋๊ฐ ๋์ ์ด๋ค.
๋ค๋ง row
์ column
์์ reverse-
๋ฅผ ๋ถ์ด๋ฉด ์ด ์์์ ๊ณผ ๋์ ์ด ๋ฐ์ ๋๊ณ ์์์์์ ์ ๋ ฌ ์ญ์ ์ญ์์ผ๋ก ์ ๋ ฌ๋๋ค.
ํ์ ํ๊ฒ ์ง๋ง ์ด ์ถ ๋ฐฉํฅ์ ๋ฐ๋ผ ์์์ ์ ๋ ฌ์ํค๋ ์์ฑ๋ ์กด์ฌํ๋ค.
flex
์์ ์๊ฐํ๋ display: flex;
, flex-direction: column;
๋ฑ์ ์์ฑ์ ๋ถ๋ชจ์ ๋ถ์ฌํ๋ ์์ฑ์ด์์ง๋ง ์ด flex
์์ฑ์ ์์์๊ฒ ๋ถ์ฌํ๋ ์์ฑ์ด๋ค.
๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค.
flex: grow shrink basis;
grow
๋ ์์ดํ
๋ค์ basis๋ฅผ ์ ์ธํ ์ฌ๋ฐฑ ๋ถ๋ธ์ grow์ ์ง์ ๋ ์ซ์์ ๋น์จ๋ก ๋๋์ด ๊ฐ์ง๋ค.
์ฆ, ์ผ๋ง๋ ๋๋ฆด ๊ฒ์ธ๊ฐ๋ฅผ ์ ์ํ๋ค.
shrink
๋ ์ฝ๊ฒ grow์ ๋ฐ๋์ธ๋ฐ, basis ๊ฐ์์ ์ผ๋ง๋ ์ค์ผ ๊ฒ์ธ์ง๋ฅผ ์ ์ํ๊ณ ,
basis
๋ ์์์์์ ๊ธฐ๋ณธ ํฌ๊ธฐ๋ผ๊ณ ํ ์ ์๋ค.
์ฐจ๋ก๋๋ก ์ดํด๋ณด์.
flex-grow
๋ถ๋ชจ ๋ฐ ์์์ด n๊ฐ ์์๋ ๊ฐ ์์์ด ๊ฐ์ง grow ๊ฐ์ ์ดํฉ์ด n์ด๋ผ๋ฉด grow ์์ฑ์ 1๋ก ์ง์ ํ๋ ๊ฒ์ ๊ฐ๋ก(๊ธฐ์ค์ถ row์ผ๋) ๋๋ ์ธ๋ก(๊ธฐ์ค์ถ column์ผ๋)๋ฅผ 1/n์ผ๋ก ์ง์ ํ๋ค๋ ๋ป์ด ๋๋ค.
#outer { display: flex; flex-direction: row; } .box { box-sizing: border-box; height: 25px; margin: 0.2rem; background-color: lightblue; flex: 1 0 0; } .box:nth-child(2n) { flex: 2 0 0; }
<ul id='outer'> <li class='box'>1</li> <li class='box'>2</li> <li class='box'>3</li> <li class='box'>4</li> </ul>
์ด๋ฐ ์ฝ๋๊ฐ ์์๋ 2๋ฒ๊ณผ 4๋ฒ ๋ฐ์ค์ ๊ฐ๋ก ๊ธธ์ด๋ 1๋ฒ๊ณผ 3๋ฒ ๋ฐ์ค์ ๊ฐ๋ก ๊ธธ์ด์ ๋๋ฐฐ๊ฐ ๋๋ค๋ ๋ป์ด๋ค.
flex-shrink
shrink
๋ grow์ ๋ฐ๋๋ก ์ผ๋ง๋ ์ค์ด๋ค์ง ์ ํ๋ ์์ฑ์ผ๋ก ์ค์ ํ ๋น์จ๋งํผ ๋ฐ์ค๊ฐ ์ค์ด๋ ๋ค.
๊ณ ๋ก grow
์ shrink
๋ฅผ ๊ฐ์ด ์ฐ๋ ๊ฒ์ ๊ถ์ฅ๋์ง ์์ผ๋ฉฐ, ๋น์จ๋ก ๋ ์ด์์์ ์ ํ ๊ฒฝ์ฐ์๋ flex-grow
์์ฑ์ ์ด์ฉํ๊ฑฐ๋ flex: grow 1 auto;
๋ฅผ ์ด์ฉํด grow ์์ฑ ๋ง์ ๋ณ๊ฒฝํ๋ ํธ์ด ์ข์๋ฐ,
์ด๋ shrink
๋ basis
์์ฑ์ ๋ฐ๋ฅธ ๋น์จ์ด๊ธฐ์ ๊ฒฐ๊ณผ ๊ฐ ์์ธก์ด ์ด๋ ต๊ธฐ ๋๋ฌธ์ด๋ค.
flex
์ ๊ธฐ๋ณธ ๊ฐ์ด flex: 0 1 auto;
์ด๋ฏ๋ก grow ๊ฐ์ ์์ ํ ๋ shrink ๊ฐ์ด 1๋ก ์์ด๋ ๋ฌด๋ฐฉํ๋ค.
flex-basis
basis
์์ฑ์ grow
์์ฑ์ด๋ shrink
์์ฑ์ผ๋ก ์ง์ง๊ณ ๋ณถ๊ธฐ ์ ๊ธฐ๋ณธ ์์์์์ ๋ฐ์ค ํฌ๊ธฐ์ด๋ค.
flex-grow
์์ฑ ๊ฐ์ 0
์ผ๋ก ์ง์ ํ์๋ basis
๊ฐ์ ์ง์ ํ๋ฉด basis
๊ฐ์ ํฌ๊ธฐ๋ก ์ ์ง๋๋ค.
์์์์์ width
์์ฑ์ด ์ฌ์ฉ๋ ๋๊ฐ ์๋๋ฐ ์ด๋๋ basis
์์ฑ์ด ๋จผ์ ์ ์ฉ๋๋ค.
์์ ๋ด ์ปจํ
์ธ ๋์ด ๋๋ฌด ๋ง์ ์ปจํ
์ธ ๊ฐ ๋์น ๋ width
๋ก ์ง์ ํ๋ค๋ฉด ํฌ๊ธฐ๊ฐ ๋ณํ ์ ์์ผ๋ ๊ทธ๋๋ width-max
๋ฅผ ์ด์ฉํ๋ ํธ์ด ์ข๋ค. ๋ฌผ๋ก ์ด๋๋ flex-basis
์์ฑ์ด ๋ถ์ฌ๋์ง ์์์ผ ํ๋ค!
Flexbox์ ์ปจํ ์ธ ์ ๋ ฌ
์ฌ๊ธฐ์ ๋๋์ด ์์ ํ์๋ ์ถ ๋ฐฉํฅ์ ๋ฐ๋ฅธ ์ปจํ
์ธ ์ ๋ ฌ ๋ฐฉ๋ฒ์ด ๋์จ๋ค.
๋ฐ๋ก justify-content
์์ฑ๊ณผ align-items
์์ฑ์ด๋ค.
justify-content
justify-content
์์ฑ ๊ฐ์ ๊ฒฝ์ฐ์๋ main axis
(๊ธฐ์ค์ถ)์ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌ์ํค๋ ์์ฑ์ด๋ค.
์์ฃผ ์ฌ์ฉํ๋ ๊ฐ์ผ๋ก๋
flex-start
: ๋ํดํธ ๊ฐ์ผ๋ก ๊ธฐ์ค์ถ์ ์์์ ๋ถํฐ ์์๋ค์ ๋ฑ ๋ถ์ฌ ์ ๋ ฌ์ํจ๋ค.
flex-end
: ๊ธฐ์ค์ถ์ ๋์ ๋ถํฐ ์์๋ค์ ๋ฑ ๋ถ์ฌ ์ ๋ ฌ์ํจ๋ค.
center
: ๊ธฐ์ค์ถ์ ์์์ ๊ณผ ๋์ ์ฌ์ด ์ค๊ฐ์ ์์๋ค์ ๋ฑ ๋ถ์ฌ ์ ๋ ฌ์ํจ๋ค.
space-between
: ์์์ ๋ถํฐ ๋์ ๊น์ง ์ ๋ ฌ์ํค๋, ์์๋ค ์ฌ์ด ๋ชจ๋ ๊ฐ๊ฒฉ์ ๋๊ฐ์ด ๋๋ค.
space-around
: ์์์ ๋ถํฐ ๋์ ๊น์ง ์ ๋ ฌ์ํค๋, ์์๋ค์ด ๋๊ฐ์ margin ๊ฐ์ ๊ฐ์ง๊ฒ ์ ๋ ฌ์ํจ๋ค.
๋ฑ์ด ์๋ค.
align-items
align-items
์์ฑ ๊ฐ์ ๊ฒฝ์ฐ์๋ cross axis
(๊ต์ฐจ์ถ)์ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌ์ํค๋ ์์ฑ์ด๋ค.
์์ฃผ ์ฌ์ฉํ๋ ๊ฐ์ผ๋ก๋
stretch
: ๋ํดํธ ๊ฐ์ผ๋ก ๊ต์ฐจ์ถ์ ์์์ ๋ถํฐ ๋์ ๊น์ง ์์์ height๋ฅผ ๋๋ฆฐ๋ค.
flex-start
: ๊ต์ฐจ์ถ์ ์์์ ์ ์์๋ค์ ๋ฑ ๋ถ์ฌ ์ ๋ ฌ์ํจ๋ค.
flex-end
: ๊ต์ฐจ์ถ์ ๋์ ์ ์์๋ค์ ๋ฑ ๋ถ์ฌ ์ ๋ ฌ์ํจ๋ค.
center
: ๊ต์ฐจ์ถ์ ์์์ ๊ณผ ๋์ ์ฌ์ด์ ์์๋ค์ ๋ฑ ๋ถ์ฌ ์ ๋ ฌ์ํจ๋ค.
baseline
: ์์์ ๋ฌธ์์ด ์ปจํ
์ธ ๋ฐ์ค์ ๋ง์ถฐ ์ ๋ ฌ์ํจ๋ค.
๋ฑ์ด ์๋ค.
GOOD ๐
CSS์ HTML์ ์ด์ฉํด ๋ ์ด์์ ์ง๋๋ฐ ๋ณด๋ค ๋ฅ์ํด์ก๋ค.
flexbox์ ์ฌ์ฉ๋ฒ์ ์ตํ๋ค.์๋ จํด์ผํจ
BAD ๐ฅ
CSS์ ๋๋ฌด ์ํํ์๋ค๋๊ฑธ ๋๊ผ๋ค.
๊ทธ๋์ ๊ทธ๊ฑธ ์ง์คํด์ ๋ณธ๋ค๊ณ ์ค๋ ๋ค๋ฅธ ๊ณต๋ถ๋ฅผ ํ๋๋ ๋ชปํ๋ค.
๋ฐฐ์ด์ thisArg ๋ณด๊ธด ํ๋๋ฐ ์ ๋ฆฌ๋ฅผ ๋ชปํ๋ค.
TO DO ๐ฅ
- ๊ฐ์ฒด ๊ณต๋ถ
- ๋ฐฐ์ด ๊ณต๋ถ
- Node.js
- ๊ณ ์ฐจํจ์
- React
- DOM
- ๋ด์ผ ์์นจ์ ์ค์ฝํ์ ํด๋ก์ ๋ฏธ๋ฆฌ ์ฝ์ด๋ณด๊ธฐ
Retrospect ๐ง
์ ์ค๋์ ๋๋ฌด ํผ๊ณคํ ํ๋ฃจ์๋ค.
CSS์ ๋๋ฌด ๋ฏธํกํ ๋๋จธ์ง ๊ณต๋ถํ ๊ฒ ๋๋ฌด ๋ง์๋ค.
๊ทธ๋๋ ์ ๋ถํฐ ์๊ฐํ๋ flexbox ์ด์ฉ๋ฒ์ ์ตํ์ ๊ธฐ๋ถ์ด ์ข๋ค.
float ๋ฐฉ์์ ์ฌ์ฉํด๋ดค์๋๋ฐ ๊ทธ ๋ฐฉ์๋ณด๋ค ์ด๊ฒ ๋ ์ง๊ด์ ์ด๋ฉฐ ์ฌ์ด ๊ฒ ๊ฐ๋ค.
์ด์ ๋ ๋ธ๋ก๊น ํ๊ณ ๋ญ ๋ด์งํ๋ค๊ณ ๋ฆ๊ฒ ์ค๋ค๊ฐ ์์นจ ์ด๋ ๋ชป๊ฐ๋๋ฐ ์ค๋์ ๋ฐ๋ก ๊ธฐ์ ํ๊ณ ์์นจ์ด๋ ๊ผญ ๊ฐ์ผ์ง
Reference ๐
ํ๋กํผ ํ
ํฌ๋, flexbox - https://heropy.blog/
https://www.w3schools.com/
https://developer.mozilla.org/
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(TIL - 21.06.30 ๐จโ๐ป - CSS), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@planethoon/TIL-21.06.30์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค