display์†์„ฑ&border์†์„ฑ

๐Ÿ“„ display ์†์„ฑ

display ์†์„ฑ์€ ์š”์†Œ๋ฅผ ๋ธ”๋ก๊ณผ ์ธ๋ผ์ธ ์š”์†Œ ์ค‘ ์–ด๋Š ์ชฝ์œผ๋กœ ์ฒ˜๋ฆฌํ• ์ง€ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

display ์†์„ฑ ๊ฐ’

  • inline: ์ธ๋ผ์ธ์œผ๋กœ ์ฒ˜๋ฆฌ
  • block: ๋ธ”๋ก ๋ ˆ๋ฒจ๋กœ ์ฒ˜๋ฆฌ
  • inline-block: ์ธ๋ผ์ธ์œผ๋กœ ๋ฐฐ์น˜ํ•˜๋˜, ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์˜ ์†์„ฑ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ฒ˜๋ฆฌ
  • none: ์กด์žฌ๋Š” ํ•˜๋˜, ๋””์Šคํ”Œ๋ ˆ์ดํ•˜์ง€ ์•Š์Œ
div {
  display: inline;
}
div {
  display: block;
}
div {
  display: inline-block;
}
div {
  display: none;
}

๐Ÿ“„ border ์†์„ฑ

์š”์†Œ๊ฐ€ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋Š” ์˜์—ญ์— ํ…Œ๋‘๋ฆฌ๋ฅผ ๊ทธ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
border ์†์„ฑ์—๋Š” ์†์„ฑ๊ฐ’์œผ๋กœ ํ…Œ๋‘๋ฆฌ์˜ ๋‘๊ป˜, ๋ชจ์–‘, ํฌ๊ธฐ ๋“ฑ์„ ํ•จ๊ป˜ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ,
์ด๋Ÿฌํ•œ ์†์„ฑ์„ โ€˜๋‹จ์ถ•์†์„ฑโ€™์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

<!--๋‘๊ป˜๊ฐ€ 2px์ธ ์ง์„  ๋ชจ์–‘(solid)์˜ ์ดˆ๋ก(green) ํ…Œ๋‘๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด์ค˜-- > span {
  border: 2px solid green;
}

border ์†์„ฑ์˜ ํ•˜์œ„ ์†์„ฑ

  • border-color: color ์ •์˜ ๋ฐฉ์‹๊ณผ ๋™์ผ
  • border-width: thin, medium, thick ๋“ฑ์˜ ํ‚ค์›Œ๋“œ ๋˜๋Š” px, em, rem ๋“ฑ์˜ ๋‹จ์œ„
  • border-style: none, solid, dotted, dashed ๋“ฑ

์ถœ์ฒ˜

  • ์œ ๋…ธ์ฝ”๋”ฉ

Leave a comment