[TIL] CSS ๊ธฐ์ดˆ ์ •๋ฆฌ ๐Ÿ“™

12523 ๋‹จ์–ด CSSTILCSS

๐ŸŽฒ ๋ชฉํ‘œ: 1์ฃผ์ฐจ ๊ณผ์ œ(์ž๊ธฐ์†Œ๊ฐœ ํŽ˜์ด์ง€ ํ˜ธ์ŠคํŒ…)๋ฅผ ์œ„ํ•ด์„œ! ๊ทธ๋™์•ˆ ์†Œํ™€ํžˆ ํ–ˆ๋˜ CSS์™€ ์นœํ•ด์ ธ ๋ณด์ž~~

โ–ถ ๋ชฉ์ฐจ

๐Ÿ”Ž CSS ์„ ์–ธ ๋ฐฉ์‹
๐Ÿ”Ž ์„ ํƒ์ž(Selector)
๐Ÿ”Ž text์™€ ๊ด€๋ จ๋œ ์†์„ฑ๋“ค
๐Ÿ”Ž layout๊ณผ ๊ด€๋ จ๋œ ์†์„ฑ๋“ค

๐Ÿ”Ž CSS ์„ ์–ธ ๋ฐฉ์‹

1. Inline ๋ฐฉ์‹

  • html ์‹œ์ž‘ํƒœ๊ทธ ๋‚ด์— style attribute๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ "property: value;" ํ˜•ํƒœ๋กœ ์„ ์–ธํ•˜๋Š” ๋ฐฉ์‹
  • ๋”ฐ๋กœ ์ƒ์„ฑ์ž๊ฐ€ ํ•„์š”์—†์œผ๋ฉฐ, ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์–ด๋ ค์›Œ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ
<p style="color: blue;">๋‚˜๋Š” ํŒŒ๋ž€ ๊ธ€์”จ!</p>

2. Embedded ๋ฐฉ์‹

  • html <head> ๋ถ€๋ถ„์— ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹
<style>
  p {
    color: green;
  }
</style>

3. External ๋ฐฉ์‹

  • <head> ๋ถ€๋ถ„์— <link>๋กœ ์™ธ๋ถ€ CSS๋ฅผ ์—ฐ๊ฒฐํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./main.css">
</head>

๐Ÿ”Ž ์„ ํƒ์ž(Selector)

  • ์„ ํƒ์ž๋ž€? ์Šคํƒ€์ผ ์ ์šฉ ๋ฒ”์œ„๋ฅผ ์„ ํƒํ•˜๋Š” ๋„๊ตฌ!

๐Ÿ“Œ ๊ธฐ๋ณธ ์„ ํƒ์ž(Basic selectors)

* (Universal selector)

* { color: pruple; }
โ–ถ ์ „์ฒด ์š”์†Œ์— ์ ์šฉ

ํƒœ๊ทธ๋ช… (Type selector)

h1 { text-align: center; }

.ํด๋ž˜์Šค๋ช… (Class selector)

.container { font-weight: bold; }

#id๋ช… (ID selector)

#fruits { color: red; }

[์†์„ฑ๋ช…] (Attribute selector)

  • [attr]: ํ•ด๋‹น ์†์„ฑ์„ ๊ฐ€์ง„ ๋ชจ๋“  ์š”์†Œ
  • [attr="value"]: ํ•ด๋‹น ์†์„ฑ, ๊ฐ’์ด ์ผ์น˜ํ•˜๋Š” ์š”์†Œ
  • [attr^="value"]: ํ•ด๋‹น ์†์„ฑ์˜ ๊ฐ’์ด 'value'๋กœ ์‹œ์ž‘ํ•˜๋Š” ์š”์†Œ
  • [attr$="value"]: ํ•ด๋‹น ์†์„ฑ์˜ ๊ฐ’์ด 'value'๋กœ ๋๋‚˜๋Š” ์š”์†Œ
  • [attr*="value"]: ํ•ด๋‹น ์†์„ฑ์˜ ๊ฐ’์— 'value'๊ฐ€ ํฌํ•จ๋œ ์š”์†Œ
[href^="http"] { text-decoration: underline }
  โ–ถ href ์†์„ฑ์˜ ๊ฐ’์ด 'http'๋กœ ์‹œ์ž‘ํ•˜๋Š” ์š”์†Œ๋“ค์— ์ ์šฉ
[class$="one"] { font-size: 16px }
  โ–ถ class ์ด๋ฆ„์ด 'one'์œผ๋กœ ๋๋‚˜๋Š” ์š”์†Œ๋“ค์— ์ ์šฉ

๐Ÿ“Œ ๋ณตํ•ฉ ์„ ํƒ์ž(Combinators)

A B (Descendant combinator)

  • A ์š”์†Œ ๋‚ด์— ์œ„์น˜ํ•œ ๋ชจ๋“  B ์š”์†Œ

A>B (Child combinator)

  • A ์š”์†Œ์˜ ๋ฐ”๋กœ ์•„๋ž˜ ์ž์‹์ธ B ์š”์†Œ

A~B (General sibling combinator)

  • ๊ฐ™์€ ๋ถ€๋ชจ๋ฅผ ๊ฐ€์ง€๋ฉด์„œ A๋ฅผ ๋’ค๋”ฐ๋ฅด๋Š” ๋ชจ๋“  B ์š”์†Œ

A+B (Adjacent sibling combinator)

  • ๊ฐ™์€ ๋ถ€๋ชจ๋ฅผ ๊ฐ€์ง€๋ฉด์„œ A ๋ฐ”๋กœ ๋’ค์— ์œ„์น˜ํ•˜๋Š” B์š”์†Œ

๐Ÿ“Œ ๊ฐ€์ƒํด๋ž˜์Šค ์„ ํƒ์ž(Pseudo classes selectors)

:link ๋ฐฉ๋ฌธํ•˜์ง€ ์•Š์€ ๋งํฌ์ผ ๋•Œ
:visited ๋ฐฉ๋ฌธํ•œ ๋งํฌ์ผ ๋•Œ
:hover ๋งˆ์šฐ์Šค๊ฐ€ ์˜ฌ๋ผ์™€ ์žˆ์„ ๋•Œ
:active ํด๋ฆญ๋œ ์ƒํƒœ์ผ ๋•Œ
:focus ํฌ์ปค์Šค๊ฐ€ ๋“ค์–ด์™€ ์žˆ์„ ๋•Œ


๐Ÿ”Ž text์™€ ๊ด€๋ จ๋œ ์†์„ฑ๋“ค

color

  • keyword (์ƒ‰์ƒ๋ช…)

    (+) ํŒŒ์Šคํ…” ์ปฌ๋Ÿฌ ๐Ÿ’–


  • rgb ์ƒ‰์ƒ
    • #00000(black), #ffffff(white), #c0c0c0(silver) ๋“ฑ

font-size

  • pixel
    • ๋ธŒ๋ผ์šฐ์ €์˜ ํฌ๊ธฐ์— ์ƒ๊ด€์—†์ด ๋…๋ฆฝ์ ์ด๊ณ  ์ •ํ™•ํ•œ ๊ฐ’
    • (ํŠนํžˆ ๋ชจ๋ฐ”์ผ๊ณผ ๋ฐ์Šคํฌํƒ‘ ๊ฐ„์—) ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Œ๐Ÿ˜ข

  • keyword
    • xx-small, x-small, small, medium, large, x-large, xx-large
    • ์‚ฌ์šฉ์ž์˜ ๊ธฐ๋ณธ ํฐํŠธ ํฌ๊ธฐ์— ๋”ฐ๋ผ ์ƒ๋Œ€์ ์œผ๋กœ ์ •ํ•ด์ง

  • em
    • ์ƒ์œ„์š”์†Œ์˜ ํฐํŠธ ํฌ๊ธฐ์— ๋”ฐ๋ผ ์ •ํ•ด์ง€๋Š” ๋™์ ์ธ ๊ฐ’
    • ์ƒ์œ„์š”์†Œ์˜ ํฐํŠธ ํฌ๊ธฐ=1em์ด ๋จ (์ƒ์†์— ๋”ฐ๋ผ)
    • ๊ธฐ๋ณธ์ ์œผ๋กœ 1em=16px

  • rem
    • ์ตœ์ƒ์œ„์š”์†Œ(html)์˜ ํฐํŠธ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ 1rem
    • em์˜ ์ƒ์† ์ค‘์ฒฉ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Œ!๐Ÿ˜€

*padding ๋“ฑ์—๋„ em, rem์„ ์‚ฌ์šฉํ•ด์„œ ์œ ์—ฐํ•œ ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค!

text-align

  • left / right / center / justify / inherit

vertical-align

  • ์ธ๋ผ์ธ ์š”์†Œ๋‚˜ ํ…Œ์ด๋ธ” ์…€ ๋‚ด์—์„œ์˜ ์ˆ˜์ง์ •๋ ฌ ์„ค์ • (๋ธ”๋ก๋ ˆ๋ฒจ ์š”์†Œ์—๋Š” ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š์Œ!)
  • baseline / sub / super / text-top / text-bottom / middle / top / bottom
  • ์ •ํ™•ํ•œ ์ฐจ์ด๋Š” ์—ฌ๊ธฐ ์ฐธ๊ณ !

text-decoration

  • overline: ์œ—์ค„
  • line-through: ์ทจ์†Œ์„ 
  • underline: ๋ฐ‘์ค„
  • underline overline: ์œ„์•„๋ž˜๋กœ ์ค„

font-variant

  • normal: ๊ธฐ๋ณธ๊ฐ’
  • small-caps: ์†Œ๋ฌธ์ž๋ฅผ ์ผ๋ฐ˜ ๋Œ€๋ฌธ์ž๋ณด๋‹ค ์ž‘์€ ๋Œ€๋ฌธ์ž๋กœ ๋งŒ๋“ฆ!

text-shadow

  • ๊ฐ’: offset-x(px) | offset-y(px) | blur-radius(px) | color (ํ˜น์€ color๊ฐ€ ๋งจ ์•ž์— ์œ„์น˜ํ•ด๋„ ๋จ!)

๊ทธ ์™ธ! (ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ๊ตฌ๊ธ€๋ง~~)
font-family
font-style
font-weight
text-indent
text-shadow
text-transform
letter-spacing


๐Ÿ”Ž layout๊ณผ ๊ด€๋ จ๋œ ์†์„ฑ๋“ค

display

  • block / inline / none / flex

โญ {display: flex} ํŒŒํ—ค์น˜๊ธฐ

  • flexbox๋Š” ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ ์‹œ ๋งค์šฐ ์ค‘์š”ํ•œ ๊ฐœ๋…!
  1. ์ผ๋ฐ˜์ ์œผ๋กœ ํ•˜๋‚˜์˜ container์™€ ๋‹ค์ˆ˜์˜ item์œผ๋กœ ๊ตฌ์„ฑ
[html]
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
  1. container์— ์„ค์ •ํ•  ์†์„ฑ
  • display
    • flex (ํ•„์ˆ˜)

  • flex-direction
    • row (defalut): ์ขŒ์—์„œ ์šฐ(๊ฐ€๋กœ)๋กœ ๋ฐฐ์น˜
      โ–ถ ์ด ๊ฒฝ์šฐ main-axis=๊ฐ€๋กœ, cross-axis=์„ธ๋กœ
    • column: ์œ„์—์„œ ์•„๋ž˜(์„ธ๋กœ)๋กœ ๋ฐฐ์น˜

  • justify-content : ๊ฐ€๋กœ ๋ฐฐ์น˜๋ฐฉ์‹ (main-axis๊ฐ€ ๊ฐ€๋กœ์ผ ๊ฒฝ์šฐ)
    • flex-start (default): ์ขŒ์ธก ๋ฐฐ์น˜
    • flex-end: ์šฐ์ธก ๋ฐฐ์น˜
    • center: ๊ฐ€์šด๋ฐ ๋ฐฐ์น˜
    • space-between: ์‚ฌ์ด์‚ฌ์ด ๊ณต๋ฐฑ
    • space-evenly: ์‚ฌ์ด์‚ฌ์ด+์–‘๋ ๊ณต๋ฐฑ

  • align-items : ์„ธ๋กœ ๋ฐฐ์น˜๋ฐฉ์‹ (cross-axis๊ฐ€ ์„ธ๋กœ์ผ ๊ฒฝ์šฐ)
    • stretch (default): container height๋งŒํผ ์ฐจ์ง€ (container height ์„ค์ • ํ•„์š”)
    • flex-start: ์œ„์— ๋ฐฐ์น˜
    • flex-end: ์•„๋ž˜์— ๋ฐฐ์น˜
    • center: ๊ฐ€์šด๋ฐ ๋ฐฐ์น˜

  1. item์— ์„ค์ •ํ•  ์†์„ฑ
  • flex : main-axix ์ƒ์— ๊ณต๋ฐฑ์ด ์žˆ์„ ๋•Œ ๊ฐ item์ด ๊ณต๋ฐฑ์„ ์–ผ๋งˆ๋‚˜ ์ ์œ ํ• ์ง€ ์ง€์ •
  • ์˜ˆ๋ฅผ ๋“ค์–ด flex item ์ค‘ ํ•˜๋‚˜์— {felx: 1;}์„ ์ง€์ •ํ•˜๋ฉด ํ•ด๋‹น item์ด ๋ชจ๋“  ๊ณต๋ฐฑ์„ ์ ์œ ํ•˜๋ฉฐ, ๊ฐ item์— 1์„ ์ง€์ •ํ•˜๋ฉด ๊ฐ™์€ ๋น„์œจ๋กœ ๊ณต๋ฐฑ์„ ์ ์œ ํ•จ

visibility

  • visible / hidden

โ€ป {display: none} ๊ณผ {visibility: hidden}์˜ ์ฐจ์ด์ : hidden์€ ์ปจํ…์ธ ๋งŒํผ ๋นˆ๊ณต๊ฐ„์œผ๋กœ ํ‘œ์‹œ๋จ!

position

  • static
    ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜
    top, right, bottom, left ์†์„ฑ์ด ์•„๋ฌด๋Ÿฐ ํšจ๋ ฅ์„ ๊ฐ–์ง€ ์•Š์Œ
  • relative
    ์ž์‹ ์˜ static ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ top, right, bottom, left์— ์˜ํ•œ ์ƒ๋Œ€์  ์œ„์น˜์— ๋ฐฐ์น˜
  • absolute
    ์ผ๋ฐ˜์  ๋ฌธ์„œ ํ๋ฆ„๊ณผ ๊ด€๊ณ„์—†์ด, ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์กฐ์ƒ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ƒ๋Œ€์  ์œ„์น˜์— ๋ฐฐ์น˜ (๊ณ„์‚ฐ์ด ๊นŒ๋‹ค๋กœ์šฐ๋ฏ€๋กœ ์‚ฌ์šฉ์‹œ ์ฃผ์˜ ํ•„์š”!)
  • fixd
    ์Šคํฌ๋ฆฐ์˜ ๋ทฐํฌํŠธ(viewport: ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” ์˜์—ญ)๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ณ ์ •๋œ ์œ„์น˜์— ๋ฐฐ์น˜ (์Šคํฌ๋กคํ•ด๋„ ์›€์ง์ด์ง€ ์•Š์Œ!)
  • sticky
    static์ฒ˜๋Ÿผ ๋ฌธ์„œ์˜ ์ผ๋ฐ˜์  ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜๋˜๋‚˜ ์Šคํฌ๋กค์ด ์ž„๊ณ„์ ์— ๋‹ค๋‹ค๋ฅด๋ฉด fixed์™€ ๊ฐ™์ด ํ™”๋ฉด์— ๊ณ ์ •๋จ
    โ˜…top ์†์„ฑ ์„ค์ • ํ•„์š”!โ˜…

float

  • ์ด๋ฏธ์ง€๋‚˜ width๊ฐ€ ์ •ํ•ด์ง„ ๋ฐ•์Šค ๋“ฑ์„ ๋‹ค๋ฅธ ์ปจํ…์ธ ์™€ ์–ด๋–ป๊ฒŒ ๋ฐฐ์น˜ํ• ์ง€ ์„ค์ •
  • left / right / none(default: block์œผ๋กœ ์ฒ˜๋ฆฌ๋˜๋Š” ๋“ฏ๋กœ ์ฒ˜๋ฆฌ๋˜๋Š” ๋“ฏ)

overflow

  • visible(default): ๊ทธ๋ƒฅ ํŠ€์–ด๋‚˜๊ฐ
  • hidden: ๋„˜์น˜๋ฉด ์•ˆ ๋ณด์ž„
  • scroll: ์Šคํฌ๋กค ๋ฐ” ์ƒ์„ฑ (ํ•ญ์ƒ)
  • auto: ๋„˜์น˜๋ฉด ์Šคํฌ๋กค ๋ฐ” ์ƒ์„ฑ
    *overflow๊ฐ€ ์ž‘๋™ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ธ”๋ก๋ ˆ๋ฒจ ์ปจํ…Œ์ด๋„ˆ์˜ ๋†’์ด(height or max-height)๋ฅผ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ white-space๋ฅผ nowrap์œผ๋กœ ์„ค์ •ํ•ด์•ผ ํ•จ!

๐Ÿ™‡โ€โ™€๏ธ์ฐธ๊ณ ํ•œ ์ž๋ฃŒ
CSS selectors - CSS: Cascading Style Sheets | MDN
CSS3 Selector | PoiemaWeb
CSS ํ”Œ๋ ‰์Šค๋ฐ•์Šค(Flexbox) ์ดํ•ดํ•˜๊ธฐ | Engineering Blog by Dale Seo

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