CSS๊ณต๋ถ€#2

SOOBINยท2021๋…„ 6์›” 22์ผ
0

๐ŸŽฅ์ƒํ™œ์ฝ”๋”ฉ CSS

๋ ˆ์ด์•„์›ƒ

inline vs block level

html์˜ ํƒœ๊ทธ๋Š” ํƒœ๊ทธ์˜ ์„ฑ๊ฒฉ์— ๋”ฐ๋ผ ํ™”๋ฉด์ „์ฒด๋ฅผ ์“ฐ๋Š” ํƒœ๊ทธ ์ž์‹ ์˜ ํฌ๊ธฐ๋งŒํผ ์“ฐ๋Š” ํƒœ๊ทธ๋กœ ๋‚˜๋‰œ๋‹ค.

-inlineblock level
์ ์šฉ์ž์‹ ์˜ ํฌ๊ธฐํ™”๋ฉด์ „์ฒด
exa ํƒœ๊ทธh1 ํƒœ๊ทธ
์†์„ฑ ๋ฐ”๊พธ๋Š” ๋ฒ•a{display:block;}h1{display:inline}

box model

์›นํŽ˜์ด์ง€์— ํ‘œํ˜„๋  ๋•Œ ์—ฌ๋ฐฑ, ์œ„์น˜, ํฌ๊ธฐ ์ด๋Ÿฐ ๊ฒƒ๋“ค์„ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.









  • ํ…Œ๋‘๋ฆฌ ์ƒ์„ฑ
    -border: 10px solid red;
    -border: 10px dotted blue;

box-sizing

element์˜ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

  • ๊ธฐ๋ณธ๊ฐ’์€ box-sizing:content-box
  • ๋ชจ๋“  elment๊ฐ€ width๊ฐ’์ด ๋‹ฌ๋ผ์ ธ๋„ ํฌ๊ธฐ๋Š” ๊ฐ™์„ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” box-sizing:border-box

๋ณดํ†ต *{box-sizing:border-box;}์„ ์ค€๋‹ค.

๋งˆ์ง„๊ฒน์นจ

margin์ด ๊ฒน์น˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ๋‹ค.

  • ์ด๋•Œ ๊ฒน์น˜๋Š” ๋ถ€๋ถ„์—์„œ ๋” ํฐ ๊ฐ’์„ ๊ฐ€์ง„ margin์ด ์ ์šฉ๋œ๋‹ค.
  • ๋ถ€๋ชจelement์•„๋ž˜์— ์ž์‹element๊ฐ€ ์žˆ์„ ๋•Œ border๊ฐ’์„ ๋”ฐ๋กœ ์ฃผ์ง€ ์•Š๋Š” ์ด์ƒ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํฐ ๊ฐ’์„ ๊ฐ€์ง„ margin์ด ์ ์šฉ๋œ๋‹ค.
  • border๊ฐ’์ด ์—†๋‹ค๋ฉด, ๋‘ margin์ด ๊ฒน์ณ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ธฐ: ์œ„/์•„๋ž˜/์ขŒ/์šฐ ํฐ ๊ฐ’์ด ์ ์šฉ๋œ๋‹ค.

ํฌ์ง€์…˜

html์˜ element์˜ ํ™”๋ฉด์ƒ ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜๋Š” ๊ฒƒ

- position:satic

  • ๊ธฐ๋ณธ๊ฐ’ ํฌ์ง€์…˜
  • left/right/top/bottom์˜ ๊ฐ’์„ ๋ฌด์‹œํ•œ๋‹ค.

- position:relative

  • ์ƒ๋Œ€์ ์ธ ํฌ์ง€์…˜
  • ๋ถ€๋ชจ๋ฅผ ๊ธฐ์ค€์œผ๋กœ left/right/top/bottom์œผ๋กœ ์œ„์น˜๋ฅผ ์กฐ์ •ํ•œ๋‹ค.

- position:absoult

  • ์ ˆ๋Œ€ ํฌ์ง€์…˜
  • ๋งŒ์•ฝ ๋ถ€๋ชจ๋“ค์ด ๋‹ค static์ด๋ผ๋ฉด html์„ ๊ธฐ์ค€์œผ๋กœ ์œ„์น˜๊ฐ€ ์ •ํ•ด์ง„๋‹ค.๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ๋ถ€๋ชจ์˜ ์Šคํƒ€์ผ์„ ์ƒ์†๋ฐ›์ง€ ์•Š๋Š”๋‹ค.
  • ๋ถ€๋ชจ๋“ค ์ค‘ ํ•˜๋‚˜๋ผ๋„ relative๊ฐ’์„ ๊ฐ€์ง„๋‹ค๋ฉด absolute์—ฌ๋„ ๊ทธ ๋ถ€๋ชจ์— ๋Œ€ํ•˜์—ฌ ์ƒ๋Œ€์ ์ธ ์œ„์น˜๋กœ ๊ฐ’์ด ์ •ํ•ด์ง„๋‹ค.

- position:fixed

  • absoult์ฒ˜๋Ÿผ ๋ถ€๋ชจ์™€ ๋งํฌ๊ฐ€ ๋Š๊ธฐ๊ธฐ ๋•Œ๋ฌธ์— html์„ ๊ธฐ์ค€์œผ๋กœ ์œ„์น˜๊ฐ€ ์ •ํ•ด์ง„๋‹ค.

  • ํ™”๋ฉด์— ์™„์ „ํžˆ ๊ณ ์ •์‹œ์ผœ์„œ ์Šคํฌ๋กค์ด ๋‚ด๋ ค๊ฐ€๋„ ๊ณ ์ •๋œUI๋ฅผ ๋งŒ๋“ค๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.


FLEX

https://codepen.io/enxaneta/pen/adLPwv ์ฐธ๊ณ 

๋ ˆ์ด์•„์›ƒ์„ ์žก์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ.
ul ol์ฒ˜๋Ÿผ ์นดํ…Œ๊ณ ๋ฆฌ ํ…Œ๊ทธ๊ฐ€ ํ•„์š”ํ•˜๋‹ค.(์ž์‹๊ณผ ๋ถ€๋ชจ๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค.)

<container>
  <item></item>
</container>

flex์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ๋“ค

containeritem
displayorder
flex-directionflex-grow
flex-flowflex-shrink
flex-wrapflex-basis
justify-contentflex
align-itemsalign-self
align-content
  • flex๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ์œ„ํ•œ ์ฒซ ๋ฒˆ์งธ ๋‹จ๊ณ„: display:flex
  • container์—์„œ flex-direction์œผ๋กœ item์˜ ํ–‰์—ด(์„ธ๋กœ๋กœ ์“ฐ๊ธฐ/๊ฐ€๋กœ๋กœ ์“ฐ๊ธฐ)์„ค์ • ๊ฐ€๋Šฅ
    • flex-direction: row ํ–‰
    • flex-direction: row-reverse
    • flex-direction: column ์—ด
    • flex-direction: column-reverse
  • flex-basis
    • ๊ฐ item์˜ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ •
    • ์„ ํƒ์ž๋ฅผ .item:nth-child()๋กœ ํ•˜์—ฌ ์›ํ•˜๋Š” item์„ ์„ ํƒ๊ฐ€๋Šฅ
  • flex-grow
    • containerํฌ๊ธฐ๊ฐ€ itemํฌ๊ธฐ๋ณด๋‹ค ํด ๋•Œ ์—ฌ๋ฐฑ์„ ์ฑ„์šฐ๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค.
    • ex) ๋น„์œจ์— ๋”ฐ๋ผ ๋‚˜๋ˆ ์ง„๋‹ค.
 .item{
	 flex-grow:1
 }
 .item:nth-child(1){
 	 flex-grow:2
  }






  • flex-shrink
    • ์›นํŽ˜์ด์ง€์˜ ํฌ๊ธฐ๋ฅผ ์ค„์ผ๋•Œ(์ „์ฒดํ™”๋ฉดx)shrink๊ฐ’์„ ์ž‘๊ฒŒ ์„ค์ •ํ• ์ˆ˜๋ก ์ค„์–ด๋“ค์ง€ ์•Š๋Š”๋‹ค.
    • ์ „์ฒด์ ์œผ๋กœ ์ค„์–ด๋“ค์ง€ ์•Š๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” shrink๊ฐ’ 0์œผ๋กœ ์ฃผ๊ธฐ
  • holy grail layout

1๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2021๋…„ 6์›” 22์ผ

1์›”๋‹ฌ์— ๊ณต๋ถ€ํ•œ css ์ž„์‹œ์ €์žฅํ•ด๋’€๊ธธ๋ž˜ 6์›”์ธ ์ง€๊ธˆ ์ถœ๊ฐ„

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ