TIL - 21.06.30 ๐Ÿ‘จโ€๐Ÿ’ป - CSS

24255 ๋‹จ์–ด FlexboxCSSTILCSS

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/

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ