TIL - declarations

minisoยท2022๋…„ 4์›” 7์ผ
0

TIL - LikeLionย 

๋ชฉ๋ก ๋ณด๊ธฐ
10/17

๐Ÿ“Œ ๋‹จ์œ„ (units)

  • ์ ˆ๋Œ€ ๊ธธ์ด ๋‹จ์œ„ : cm, mm, px๋“ฑ
  • ์ƒ๋Œ€ ๊ธธ์ด ๋‹จ์œ„ : em, rem, vw, vh ๋“ฑ
  • ๋ฐฑ๋ถ„๋ฅ  : %

1. ์ ˆ๋Œ€ ๊ธธ์ด ๋‹จ์œ„

px

  • ๋””๋ฐ”์ด์Šค ํ™”๋ฉด์—์„œ ์ด๋ฏธ์ง€๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„
  • ์š”์†Œ์˜ ๋„“์ด, ๋†’์ด, ํŒจ๋”ฉ, ๋งˆ์ง„, ๋ณด๋” ๊ฐ’, ํฐํŠธ ์‚ฌ์ด์ฆˆ ๋“ฑ ๊ฐ’์˜ ๋‹จ์œ„๋กœ ์‚ฌ์šฉ
  • ๊ธฐ๋ณธ 16px

2. ์ƒ๋Œ€ ๊ธธ์ด ๋‹จ์œ„

  • % : ๋ถ€๋ชจ ์š”์†Œ ๊ธฐ์ค€์œผ๋กœ ๋ฐฑ๋ถ„์œจ
  • em : ๋ถ€๋ชจ ์š”์†Œ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์ˆ˜
  • rem : root em, ์ตœ์ƒ์œ„ ์š”์†Œ html ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์ˆ˜
  • vw : ํ™”๋ฉด ๋„“์ด ๊ธฐ์ค€์œผ๋กœ ๋ฐฑ๋ถ„์œจ
  • vh : ํ™”๋ฉด ๋†’์ด ๊ธฐ์ค€์œผ๋กœ ๋ฐฑ๋ถ„์œจ
  • vmin : ํ™”๋ฉด ๋„“์ด์™€ ๋†’์ด ์ค‘ ์ž‘์€ ๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ ๋ฐฑ๋ถ„์œจ
  • vmax : ํ™”๋ฉด ๋„“์ด์™€ ๋†’์ด ์ค‘ ํฐ ๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ ๋ฐฑ๋ถ„์œจ
  • ex : ํ˜„์žฌ ํฐํŠธ์˜ x-height๊ฐ’, ํ˜„์žฌ ํฐํŠธ์˜ ์†Œ๋ฌธ์ž x ๋†’์ด ๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ ํ•œ ๋ฐฑ๋ถ„์œจ

๐Ÿ“Œ font

1. font-size

font-size๊ฐ€ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋Š” ๊ฐ’

2. font-family

  • font-family ์‚ฌ์šฉํ•˜์—ฌ ๊ธ€๊ผด ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ
  • family-name : ๊ถ์„œ, ๊ตด๋ฆผ, arial๊ฐ™์€ ๊ธ€๊ผด ์ด๋ฆ„ ์‚ฌ์šฉ. ๊ธ€๊ผด์ด ์‚ฌ์šฉ์ž์˜ ์ปดํ“จํ„ฐ์— ์„ค์น˜๋˜์–ด ์žˆ์ง€ ์•Š์€ ๊ฒฝ์šฐ, ๊ธ€๊ผด์€ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ํ‘œ์‹œ๋จ.
  • font format ์ด๋ž€ ํฐํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๋ธŒ๋ผ์šฐ์ € ๋ณ„๋กœ ์„œ๋กœ ๋‹ค๋ฅธ ํฌ๋งท์„ ์ง€์›
  • woff, ttf/off๋Š” ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›

3. font-weight

  • normal - ๊ธฐ๋ณธ๊ฐ’์ด๋ฉฐ ๋ณดํ†ต ๊ตต๊ธฐ
  • bold - ๊ตต์€ ๊ตต๊ธฐ
  • bolder - ์ƒ์†๋œ ๊ฐ’๋ณด๋‹ค ๊ตต์€ ๊ตต๊ธฐ
  • lighter - ์ƒ์†๋œ ๊ฐ’๋ณด๋‹ค ์–‡์€ ๊ตต๊ธฐ
  • number - ์ˆซ์ž๋กœ ๊ตต๊ธฐ ์ง€์ • 100,200,300,400๊ณผ ๊ฐ™์€ ์ˆซ์ž๋ฅผ ์ด์šฉ

4. ๊ทธ์™ธ ์†์„ฑ

text-transform

  • uppercase ๋Œ€๋ฌธ์ž
  • lowercase ์†Œ๋ฌธ์ž
  • capitalize ๊ฐ ๋‹จ์–ด์˜ ์ฒซ ๊ธ€์ž๋ฅผ ๋Œ€๋ฌธ์ž๋กœ


    font-style
  • normal
  • italic
  • oblique


    text-align
  • left
  • right
  • center
  • justify : ๋งˆ์ง€๋ง‰ ์ค„ ์ œ์™ธํ•˜๊ณ  ์–‘์ชฝ์œผ๋กœ ์ •๋ ฌ


    text-decoration
  • none : ํšจ๊ณผ ์ œ๊ฑฐ
  • line-through : ๊ธ€์ž ์ค‘๊ฐ„์— ์„  ์ถ”๊ฐ€
  • overline : ๊ธ€์ž ์œ„์— ์„  ์ถ”๊ฐ€
  • underline : ๋ฐ‘์ค„ ์ถ”๊ฐ€

๐Ÿ“Œ opacity

  • ํˆฌ๋ช…๋„ ์ง€์ •
  • ํˆฌ๋ช…๋„๊ฐ€ ๋“ค์–ด๊ฐ„ ์š”์†Œ์•ˆ์˜ ๋‚ด์šฉ๋ฌผ๋„ ํ•จ๊ป˜ ํˆฌ๋ช…ํ•ด์ง
  • 0.0-1.0 ์‚ฌ์ด ์ˆซ์ž ์ง€์ •

๐Ÿ“Œ color

1. ์ƒ‰์ƒ ์ด๋ฆ„

  • ๋‹ค๋ฅธ ํ‘œํ˜„ ๋ฐฉ์‹์— ๋น„ํ•ด ์ˆ˜๊ฐ€ ์ œํ•œ์ 
 <style>
    .box {
    background-color: orange;}
  </style>

2. RGB๊ฐ’

  • 0~ 255์˜ ๊ฐ’์œผ๋กœ ํ‘œํ˜„
 <style>
    .box {
    background-color: RGB(102, 205,170)}
  </style>

3. HEX๊ฐ’ (16์ง„์ˆ˜)

  • 16์ง„์ˆ˜ 6์ž๋ฆฌ ์ฝ”๋“œ๋กœ ์ƒ‰์ƒ์„ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ์‹
 <style>
    .box {
    background-color: #F08080}
  </style>
profile
์ƒ๊ฐ์ด ๊ธธ๋ฉด ์šฉ๊ธฐ๋Š” ์‚ฌ๋ผ์ง„๋‹ค.

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