23.03.22 TIL๐Ÿ’ก

์ƒค์ด๋‹ˆยท2023๋…„ 3์›” 22์ผ
1

learned.log

๋ชฉ๋ก ๋ณด๊ธฐ
2/46

CSS ํ•ต์‹ฌ๊ฐœ๋…

์˜ค๋Š˜์˜ ๋‚˜๋Š” ๋ฌด์—‡์„ ์ž˜ํ–ˆ์„๊นŒ?

ํ™•์‹คํ•˜๊ฒŒ ๊ณต๋ถ€ํ•˜์ง€ ์•Š์•˜๋˜ ์ง€๋‚œ ๋‚ ์„ ํ›„ํšŒํ•˜๋ฉฐ..

css์— ๋Œ€ํ•ด ๋ชจํ˜ธํ–ˆ๋˜ ๊ฐœ๋…์„ ๋‹ค์‹œ ์ •๋น„ํ–ˆ๋‹ค.

#์™€ . ๊ฐ€ id, class์ž„์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •๋ฆฌํ–ˆ๋‹ค.

๋˜ํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉฐ โ€œ์ด๊ฑฐ ์™œ ์—ฌ๊ธฐ ์•ˆ ์œ„์น˜ํ•ด?โ€ ํ–ˆ๋˜ ๋ถ€๋ถ„์ด margin ์ƒ์‡„ ๋•Œ๋ฌธ์ด๋ผ๋Š” ๊ฒƒ์„ ๊นจ๋‹ฌ์•˜๋‹ค. ๊ทธ๋™์•ˆ์€ ๋งˆ์ง„ ์ƒ์‡„์˜ ๊ทœ์น™์„ ๋ชจ๋ฅด๊ณ  ๋ฌด์ž‘์ • ๊ตฌ๊ธ€๋งํ•ด ์šฐ๋‹น๋‹นํƒ• ํ•ด๊ฒฐํ–ˆ๋Š”๋ฐ, ์›๋ฆฌ๋ฅผ ๊นจ๋‹ฌ์•˜์œผ๋‹ˆ ์‹ค์ˆ˜ํ•˜๋Š” ์ผ์ด ์—†์„ ๊ฒƒ ๊ฐ™๋‹ค.

Block๊ณผ inline์„ ๋ช…ํ™•ํžˆ ๊ตฌ๋ถ„ํ•˜๊ณ , ์„ ํƒ์ž์˜ ์บ์Šค์บ์ด๋”ฉ ๊ฐœ๋…์„ ์•Œ๊ณ  ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ณ ๋ คํ•ด css๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

์˜ค๋Š˜์˜ ๋‚˜๋Š” ๋ฌด์—‡์„ ๋ฐฐ์› ์„๊นŒ?

[1] CSS ๊ธฐ๋ณธ๊ฐœ๋…

ํ•ต์‹ฌ ๊ฐœ๋…

  • id - #id๋ช… { css ์†์„ฑ } ์œผ๋กœ ์Šคํƒ€์ผ ์ ์šฉ
    • ํƒœ๊ทธ ํ•˜๋‚˜์˜ ๊ณ ์œ ํ•œ ๊ฐ’์ด์–ด์•ผํ•จ
  • class - .class๋ช… { css ์†์„ฑ } ์œผ๋กœ ์Šคํƒ€์ผ ์ 
    • ์—ฌ๋Ÿฌ ํƒœ๊ทธ๋ฅผ ํ•˜๋‚˜๋กœ ๋ฌถ์–ด์„œ ์Šคํƒ€์ผ ์ ์šฉ

margin : ์„ธ๋กœ ๊ฐ€๋กœ ํ• ๋•Œ ์‚ฌ์ด์— ,** ์“ฐ๋ฉด ์•ˆ๋จ

๋‹ค์–‘ํ•œ ์ƒ‰์ƒ ๋‹จ์œ„

  • #๋นจ๊ฐ•์ดˆ๋ก๋ธ”๋ฃจ 16์ง„์ˆ˜ = rgb(๋นจ๊ฐ•, ์ดˆ๋ก, ๋ธ”๋ฃจ) 10์ง„์ˆ˜
    • red(#ff0000), green(#00ff00), blue(#0000ff) = rgb(255,0,0), rgb(0,255,0), rgb(0,0,255)

    - yellow(#ffff00), white(#ffffff), pink(#ff00ff) โ€ฆ.
  • RGBA : RGB ํ‘œ๊ธฐ์—๋‹ค๊ฐ€ ๋ถˆํˆฌ๋ช…๋„(Alpha)๋ฅผ ์ถ”๊ฐ€ํ•œ ๊ฒƒ.
    • ๋ถˆํˆฌ๋ช…๋„๋Š” 0~1 ์‚ฌ์ด์˜ ์†Œ์ˆ˜์  ์ˆซ

ํฌ๊ธฐ ๋‹จ์œ„

  1. ํ”ฝ์…€(px) - ์ ˆ๋Œ€๋‹จ์œ„
    • PPI(Pixel Per Inch) : ๋ชจ๋‹ˆํ„ฐ์—์„œ 1์ธ์น˜ ์ •์‚ฌ๊ฐํ˜• ์•ˆ์— ํ”ฝ์…€์ด ๋ช‡๊ฐœ ๋“ค์–ด์žˆ๋Š”์ง€
    • ํ•ด์ƒ๋„(Resolution) : ํ™”๋ฉด์— ๊ฐ€๋กœ ๋ช‡ px, ์„ธ๋กœ ๋ช‡ px ๋ณด์—ฌ์ฃผ๋Š”์ง€ โ†’ ๋”ฐ๋ผ์„œ ๋””์Šคํ”Œ๋ ˆ์ด์— ๋”ฐ๋ผ ์‹ค์ œ ํฌ๊ธฐ ๋‹ฌ๋ผ์ง
  2. ์ƒ๋Œ€๋‹จ์œ„
    • % : ๋ถ€๋ชจ ํƒœ๊ทธ์— ๋Œ€ํ•ด ์ƒ๋Œ€์ ์ธ ํฌ๊ธฐ. ํฌ๊ธฐ๋ฅผ ๋ฐ”๊พธ๊ณ  ์‹ถ์„ ๋•Œ ๋ถ€๋ชจ์˜ ํฌ๊ธฐ๋งŒ ๋ฐ”๊พธ๋ฉด ๋จ
    • ๊ธ€์ž ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ƒ๋Œ€์ ์ธ ํฌ๊ธฐ ์ •ํ•˜๊ธฐ
      • em : 1em = ๋ถ€๋ชจ ํƒœ๊ทธ์˜ font-size
      • rem : ์ตœ์ƒ์œ„ ํƒœ๊ทธ(=<html>)์˜ font-size

CSS ๋ฒ„์ „ (์ฐธ๊ณ )

css๋Š” ๋น„์Šทํ•œ ๊ธฐ๋Šฅ๋“ค๋ผ๋ฆฌ ๋ชจ์•„๋‘” ๋ชจ๋“ˆ๋ณ„๋กœ ๋ฐœ์ „ํ•œ๋‹ค. css1~css3๊นŒ์ง€๋Š” ํ•˜๋‚˜์˜ ํ‘œ์ค€์œผ๋กœ ์ƒˆ๋กœ์šด ๋ฒ„์ „์„ ๋งŒ๋“ค์—ˆ์œผ๋‚˜, ๋ฐœ์ „ ์†๋„๊ฐ€ ๋Š๋ฆฌ๋‹ค๊ณ  ํŒ๋‹จํ•ด ์ง€๊ธˆ์€ ๋ชจ๋“ˆ์—๋‹ค๊ฐ€ level์„ ๋ถ™์ธ๋‹ค.

ex) Selector ์„ ํƒ์ž ๋ผ๋Š” ๋ฌธ๋ฒ•์— ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ์ถ”๊ฐ€ โ†’ Selector Level 3, 4 ์‹์œผ๋กœ ํ•ด๋‹น ๋ชจ๋“ˆ๋งŒ ๋”ฐ๋กœ ๋ ˆ๋ฒจ์„ ์˜ฌ๋ฆฐ๋‹ค.

[2] ์ž์ฃผ ์“ฐ๋Š” CSS ์†์„ฑ

ํ…์ŠคํŠธ ์Šคํƒ€์ผ๋ง

  • line-height : ์ค„๊ณผ ์ค„ ์‚ฌ์ด ๊ฐ„๊ฒฉ ์กฐ์ ˆ. 1 = ๊ธ€์ž ํฌ๊ธฐ์— ์ƒ๋Œ€์ ์ธ ๊ฐ’
    • ๋งŒ์•ฝ ๊ธ€์ž๊ฐ€ 16px ์ผ๋•Œ line-height : 1 ์ด๋ฉด 32px ์ค„ ๊ฐ„
  • text-decoration : ๋ฐ‘์ค„, ์ทจ์†Œ์„  ๋„ฃ๊ธฐ ๋“ฑ.
    • none(๋ฐ‘์ค„ ์—†์• ๊ธฐ), underline, line-through
  • background-image : url('...'),url('...'),url('...') โ€ฆ ์‚ฌ์šฉ
    • ์—ฌ๋Ÿฌ ๊ฐœ ๋„ฃ์„ ๊ฒฝ์šฐ ์ฒซ๋ฒˆ์งธ ์˜ค๋Š” ๊ฒƒ์ด ์ ค ์œ„์— ๋ณด์ž„
  • background-position/background-repeat
  • background-size
    • cover: ๋น„์œจ ์œ ์ง€ํ•˜๋ฉด์„œ ๊ฝ‰ ์ฐจ๊ฒŒ. ์ด๋ฏธ์ง€ ์ž˜๋ฆด ์ˆ˜ ์žˆ์Œ
    • contain: ๋น„์œจ ์œ ์ง€ํ•˜๋ฉด์„œ ์ตœ๋Œ€ํ•œ ํฌ๊ฒŒ. ์ด๋ฏธ์ง€ ์ž˜๋ฆฌ์ง€ ์•Š์Œ
    • ๊ฐ€๋กœ, ์„ธ๋กœ ์ˆœ์„œ๋กœ ํฌ๊ธฐ ์ง€์ • ๊ฐ€๋Šฅ
  • linear-gradient(์‹œ์ž‘, ์ข…๋ฃŒ)
    • ๋งจ ์•ž์—๋‹ค๊ฐ€ ๊ฐ๋„ ์ ์œผ๋ฉด ๋จ, ๋‹จ์œ„ deg
      • ex) linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
  • box-shadow - ๊ฐ€๋กœ, ์„ธ๋กœ, ํ๋ฆผ, ํผ์ง
  • opacity ์ „์ฒด ๋ถˆํˆฌ๋ช…๋„. 0~1 ์‚ฌ์ด

[3] ๋ฐ•์Šค ๋ชจ๋ธ

๋งˆ์ง„/ํŒจ๋”ฉ/๋ณด๋”/์ฝ˜ํ…ํŠธ

**Margin**

  • ์ขŒ์šฐ ๋ฐ”๊นฅ ์—ฌ๋ฐฑ์˜ ๊ฒฝ์šฐ์—๋Š” auto ์‚ฌ์šฉ ๊ฐ€๋Šฅ
    • but width ์†์„ฑ์ด ์ •ํ•ด์ ธ์žˆ์–ด์•ผ ์ž๋™์œผ๋กœ ์ฑ„์šธ ์ˆ˜ ์žˆ์Œ

๋งˆ์ง„ ์ƒ์‡„ (Margin Collapsing)

  • ์ด์›ƒํ•˜๋Š” ์š”์†Œ๋“ค ๋ผ๋ฆฌ ๋งˆ์ง„ ์ƒ์‡„๊ฐ€ ์ผ์–ด๋‚˜๊ณ , ๋ถ€๋ชจ ์ž์‹ ๊ฐ„์—๋„ ๋งˆ์ง„ ์ƒ์‡„๊ฐ€ ์ผ์–ด๋‚  ์ˆ˜ ์žˆ๋‹ค.
    • ๋ถ€๋ชจ ์š”์†Œ์— border๋‚˜ padding์ด ์žˆ์–ด์„œ ๊ฒฝ๊ณ„๊ฐ€ ์ƒ๊ธธ ๊ฒฝ์šฐ ๋งˆ์ง„ ์ƒ์‡„๊ฐ€ ์ผ์–ด๋‚˜์ง€ X
  • box-sizing : border-box; : ํ…Œ๋‘๋ฆฌ๊นŒ์ง€ ๋ชจ๋‘ ํ•จ์นœ ์˜์—ญ์˜ ํฌ๊ธฐ๊ฐ€ ๋จ
  • overflow hidden, scroll, auto (๋„˜์น ๋•Œ๋งŒ ์Šคํฌ๋กค) ๋“ฑ
  • white-space : nowrap - ์‚ฌ์ด ๋นˆ๊ณต๊ฐ„ ์—†์• 

[4] Display

Block

  • ์œ„์—์„œ๋ถ€ํ„ฐ ์•„๋ž˜๋กœ ๋ฐฐ์น˜
  • <h1>, <p>, <div> ๊ฐ™์€ ๊ฒƒ
  • ๋„ˆ๋น„์™€ ๋†’์ด ์ •ํ•  ์ˆ˜ ์žˆ์Œ

inline

  • ์™ผ โ†’ ์˜คโ†’ ์•„๋ž˜, ํ™”๋ฉด์ด ๊ฝ‰์ฐจ๋ฉด ๋‹ค์Œ ์ค„๋กœ ๋„˜์–ด๊ฐ
  • <a>,<br>,<img>,<span>
  • img๋ฅผ ์ œ์™ธํ•˜๊ณ  ๋„ˆ๋น„๋‚˜ ๋†’์ด๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์—†์Œ
  • ์—ฌ๋ฐฑ์€ ๊ฐ€๋กœ๋กœ๋งŒ ๊ฐ€๋Šฅ
  • direction ์†์„ฑ : ์ธ๋ผ์ธ ๋ฐฉํ–ฅ ์ •ํ•  ๋•Œ
  • writing-mode: vertical-rl ์œ„โ†’ ์•„๋ž˜, ์˜คโ†’์™ผ
  • display : inline-block ์ธ๋ผ์ธ์ด์ง€๋งŒ ๋ธ”๋ก์ฒ˜๋Ÿผ ๋„ˆ๋น„์™€ ๋†’์ด๋กœ ์ •ํ•  ์ˆ˜ ์žˆ์Œ (none - css๋กœ html ํƒœ๊ทธ ์•ˆ๋ณด์ด๊ฒŒ ํ•˜, block - ๋ธ”๋ก์œผ๋กœ ๋ฐ”๊พธ๊ธฐ, inline - ์ธ๋ผ์ธ์œผ๋กœ)

float

  • float : right ์š”์†Œ๋ฅผ ํŽ˜์ด์ง€ ์˜ค๋ฅธ์ชฝ์— ๋ฐฐ์น˜ํ•˜๊ณ , ๊ทธ ์ฃผ๋ณ€์œผ๋กœ ์ธ๋ผ์ธ ์š”์†Œ๋“ค์„ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค

[5] ์„ ํƒ์ž

/* ์„ ํƒ์ž ๋ชฉ๋ก */
์„ ํƒ์ž1,
์„ ํƒ์ž2 {
  ...
}

/* ์„ ํƒ์ž ๋™์‹œ ์„ ํƒํ•˜๊ธฐ */
์„ ํƒ์ž1์„ ํƒ์ž2{
}

/*Child Combinator ์ž์‹ ๊ฒฐํ•ฉ์ž*/
๋ถ€๋ชจ > ์„ ํƒํ•  ์ž์‹{
}

/*Descendant Combinator ์ž์† ๊ฒฐํ•ฉ์ž */
๋ถ€๋ชจ ์ž์‹ {
	/*์‚ฌ์ด์— ์ŠคํŽ˜์ด*/
}

/*๋ถ€๋ชจ์˜ n๋ฒˆ์งธ ์ž์‹ ์„ ํƒ์ž*/
๋ถ€๋ชจ :nth-child(n){
	/* n์€ 1๋ถ€ํ„ฐ ์‹œ์ž‘ํ•จ 
		odd, even, 2n, 2n+1 ๋“ฑ ๋„ ๊ฐ€๋Šฅ
		... (์ฒซ๋ฒˆ์งธ๋ถ€ํ„ฐ ๋งˆ์ง€๋ง‰๊นŒ์ง€ ์ „์ฒด)
*/
}
  1. ํด๋ž˜์Šค๋ฅผ ๋„ฃ์–ด์ค„ ํƒœ๊ทธ๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์„ ๋•Œ
  2. ๊ฐ€๋กœ ๋งˆ์ง„์„ ์ผ์ •ํ•˜๊ฒŒ ํ•˜๊ณ  ์‹ถ์„

๊ฐ€์ƒ ํด๋ž˜์Šค (psudo class)

์ด๋ฆ„์ด ๋ฏธ๋ฆฌ ์ •ํ•ด์ ธ์žˆ์Œ

  • :hover ๋งˆ์šฐ์Šค ์˜ฌ๋ฆฐ ์ƒํƒœ
  • :active ํด๋ฆญํ–ˆ์„ ๋•Œ ์ƒํƒœ
  • :focus ํฌ์ปค์Šค๊ฐ€ ์žˆ์„ ๋•Œ
  • :visited ์ด๋ฏธ ๋ฐฉ๋ฌธํ•œ ๋งํฌ
  • :focus-within, :focus-visible
  • :first-child, :last-child

[6] ์Šคํƒ€์ผ ๊ณ„์‚ฐํ•˜๊ธฐ

์บ์Šค์บ์ด๋“œ cascade

css ๊ทœ์น™์„ ์ˆœ์„œ์— ๋”ฐ๋ผ ๊ณ„๋‹จ์‹์œผ๋กœ ํ•ฉ์น˜๋Š” ๊ฒƒ์ด๋‹ค. ์ฆ‰, css๊ฐ€ ์ ์šฉ๋˜๋Š” ์šฐ์„ ์ˆœ์œ„์ด๋‹ค.

  • ๊ฐ™์€ ์šฐ์„ ์ˆœ์œ„๋ผ๋ฉด ์ฝ”๋“œ ์ƒ์—์„œ ๋‚˜์ค‘์— ์ ์€ ๊ฒƒ์ด ์šฐ์„ ์ ์œผ๋กœ ์ ์šฉ๋œ๋‹ค.
  • inline style>user agent style sheet
  • ์„ ํƒ์ž์˜ ๋ช…์‹œ๋„ (specificity)
    • ์„ ํƒ์ž๊ฐ€ ๋ณต์žกํ•  ์ˆ˜๋ก ๋ช…์‹œ๋„ ์ ์ˆ˜๊ฐ€ ๋†’์•„์„œ ์šฐ์„ ์ ์œผ๋กœ cascade
      • ์•„์ด๋”” > ํด๋ž˜์Šค > ์š”์†Œ ๊ฐฏ์ˆ˜ ์„ธ๊ธฐ
    • Specific Calculator

์ƒ์†- MDN ์‚ฌ์ดํŠธ

  • ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ Inherited from ๋ถ€๋ชจ ~ ๋ผ๊ณ  ๋˜์–ด์žˆ๋Š” ์นธ์— ์ƒ์†๋œ ๊ฐ’ ํ‘œ์‹œ๋œ๋‹ค.
  • ์ˆœ์„œ์— ๋”ฐ๋ผ ์ตœ์ข… ๊ณ„์‚ฐ ๋œ ํƒœ๊ทธ๊ฐ€ ์ƒ์†๋œ๋‹ค!!
    • cascade๋„ ๋”ฐ์ ธ์•ผ ํ•˜์ง€๋งŒ, ์ƒ์†์˜ ๊ฒฝ์šฐ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์กฐ์ƒ์ด ๋ฌด์กฐ๊ฑด ์ƒ์†๋˜๋Š” ๊ฒƒ.. ์กฐ์ƒ ํƒœ๊ทธ๋“ค์—์„œ ์Šคํƒ€์ผ์ด ๋ชจ๋‘ ๊ณ„์‚ฐ๋œ ์ƒํƒœ์—์„œ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋”ฐ์ง€๋Š” ๊ฒƒ์ด๋‹ค.
      • ์ฆ‰ ํ˜„์žฌ ์ฝ”๋“œ์—์„œ๋Š” ์œ„ ์กฐ์ƒ์ด ๋‹ค ๊ณ„์‚ฐ ๋œ ํ›„ ๋‚ด๋ ค์™”๊ธฐ ๋•Œ๋ฌธ์— ์ตœ์ข… ๊ณ„์‚ฐ๋œ ํ˜„์žฌ ์ฝ”๋“œ์— ์žˆ๋Š”๊ฒŒ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋” ๋†’๋‹ค.

์˜ค๋Š˜์˜ ๋‚˜๋Š” ์–ด๋–ค ์–ด๋ ค์›€์ด ์žˆ์—ˆ์„๊นŒ?

margin ์ƒ์‡„์— ๋Œ€ํ•œ ์ดํ•ด

๋งˆ์ง„ ์ƒ์‡„๋ฅผ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ๋‹ค์†Œ ํ—ท๊ฐˆ๋ ธ๋‹ค.

์ด์›ƒํ•˜๋Š” ์š”์†Œ๋Š” ์ƒ์‡„๊ฐ€ ํ•„์—ฐ์ ์œผ๋กœ ์ผ์–ด๋‚˜๋ฉฐ ๋ถ€๋ชจ ์ž์‹ ๊ฐ„์—๋Š” padding ์ด๋‚˜ border๋กœ ๊ฒฝ๊ณ„๋ฅผ ๋ช…์‹œํ•ด์คฌ์„ ๊ฒฝ์šฐ์—๋Š” ์ƒ์‡„๋˜์ง€ ์•Š๋Š”๋‹ค.

  • ๋งˆ์ง„ ์ƒ์‡„ ๊ทœ์น™ ์ ์šฉ
    • ์ธ์ ‘ํ•œ ๋‘ ๋ฐ•์Šค๊ฐ€ ์˜จ์ „ํ•œ block-level ์š”์†Œ์ผ ๊ฒฝ์šฐ์—๋งŒ ์ ์šฉ๋œ๋‹ค.
      • inline, inline-block, table-cell, table-caption ๋“ฑ์˜ ์š”์†Œ๋Š” block-level์ด ์•„๋‹ˆ๋‹ค
    • ๋งˆ์ง„ ๊ฐ’์ด 0์ด๋”๋ผ๋„ ์ƒ์‡„ ๊ทœ์น™์€ ์ ์šฉ๋œ๋‹ค.
    • ์ขŒ์šฐ ๋งˆ์ง„์€ ๊ฒน์น˜๋”๋ผ๋„ ์ƒ์‡„๋˜์ง€ ์•Š๋Š”๋‹ค.
  • ๋งˆ์ง„ ์ƒ์‡„ ๊ทœ์น™ ์˜ˆ์™ธ
    • ๋ฐ•์Šค๊ฐ€ย position: absoluteย ๋œ ์ƒํƒœ
    • ๋ฐ•์Šค๊ฐ€ย float: left/rightย ๋œ ์ƒํƒœ (๋‹จ, clear ๋˜์ง€ ์•Š์€ ์ƒํƒœ)
    • ๋ฐ•์Šค๊ฐ€ย display: flexย ์ผ ๋•Œ ๋‚ด๋ถ€ flexbox item
    • ๋ฐ•์Šค๊ฐ€ย display: gridย ์ผ ๋•Œ ๋‚ด๋ถ€ grid item

margin ์ƒ์†์— ๋Œ€ํ•œ ์ดํ•ด

Q. ๋งˆ์ง„ ์ƒ์‡„๋Š” img ํƒœ๊ทธ์—์„œ ์ผ์–ด๋‚˜๋Š” ๊ฐ€? โ†’ ํ…Œ์ŠคํŠธ ํ•ดํ•จ

Q. ์˜๋ฌธ์ด ํ•ด๊ฒฐ๋˜์ง€ ์•Š์•„์„œ ์งˆ๋ฌธ์„ ๋‚จ๊ฒผ๋‹ค.. ๊ธฐ๋‹ค๋ฆฌ๋Š” ์ค‘ ใ… 

  1. inline์š”์†Œ๋Š” margin-left, right๋งŒ ๊ฐ€๋Šฅํ•˜๊ณ  top, bottom์€ ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ์•Œ๊ณ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ฏธ์ง€๋Š” ์œ„์•„๋ž˜๋„ ์ ์šฉ๋˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋Š”๋ฐ<img๋Š” width์™€ heigh์ด ์ ์šฉ๋˜๋Š” ๋งŒํผ margin๋„ ์ ์šฉ ๋œ๋‹ค>๊ณ  ํŒ๋‹จํ•˜์˜€๋Š”๋ฐ ๋งž๋Š”๊ฑธ๊นŒ์š”..?

    • img์— margin:4px auto๋ฅผ ์ ์šฉํ•œ ์ƒํƒœ
  2. ๊ทธ๋Ÿฐ๋ฐ ์™œ ์ž์‹์ธ img์— ๋งˆ์ง„์„ ์คฌ์„ ๊ฒฝ์šฐ ๋ถ€๋ชจ์˜ ์ค‘์•™์ •๋ ฌ๋กœ ๋งˆ์ง„์ด ์ ์šฉ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์œ„๋กœ ์˜ฌ๋ผ๊ฐˆ๊นŒ์š”..?

    • 2๋ฒˆ ์‚ฌ์ง„-๋งˆ์ง„์„ 4px์—์„œ 5px ๋Š˜๋ ธ๋”๋‹ˆ ์œ„๋กœ ์˜ฌ๋ผ๊ฐ„ ๋ชจ์Šต
    • html ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค!
  3. ์ด ๋น„ํ–‰๊ธฐ ์•„์ด์ฝ˜์„ ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์„ธ๋กœ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”..

    • ์ด์— ๋Œ€ํ•œ ์‹œ๋„๋กœ ilne-height์„ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‹œ๋„ํ•ด๋ดค์œผ๋‚˜ ๊ทธ๋ ‡๊ฒŒ ๋˜๋ฉด height์„ ์•Œ์•„์•ผํ•˜๋Š”๋ฐ text์ด๊ธฐ ๋•Œ๋ฌธ์— ํŠน์ •ํ•  ์ˆ˜ ์—†๋‹ค๊ณ  ํŒ๋‹จ๋˜์–ด์„œ ์ ์šฉ์„ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•๋“ค๋„ ๋ถ€๋ชจ์˜ height์ด ์žˆ์„ ๊ฒฝ์šฐ๋กœ ํŒ๋‹จํ•ด ๋ช‡์‹œ๊ฐ„๋™์•ˆ ์ ์šฉํ•ด๋ณด๋‹ค ์ง€์ณค์Šต๋‹ˆ๋‹ค..

๋‚ด์ผ์˜ ๋‚˜๋Š” ๋ฌด์—‡์„ ํ•ด์•ผํ• ๊นŒ?

  • HTML ํ•ต์‹ฌ ๊ฐœ๋…
  • js ์ž…๋ฌธ
  • Daily Mission
  • ๋ฉ˜ํ† 
  • Weekly Mission CSS ์ ์šฉ!

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