TIL 2 | CSS ๊ธฐ์ดˆ ๐Ÿ’ฌ

10393 ๋‹จ์–ด TILCSSCSS

CSS(Cascading Style Sheets)


์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ์œ„ํ•œ ์–ธ์–ด

์ฐธ๊ณ  ์‚ฌ์ดํŠธ
https://developer.mozilla.org/ko/docs/Web/CSS

CSS ์ž‘์„ฑ

  1. ์ธ๋ผ์ธ ์Šคํƒ€์ผ
<body><div style="font-size:50px"></div><body> 
  1. ๋‚ด๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ
<head>
  <style>
    div { font-size:50px; }
  </style>
</head>  
  1. ์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ
<head>
  <link rel="stylesheet" href="style.css"/>
</head>

๐Ÿ’ก์ธ๋ผ์ธ ์Šคํƒ€์ผ์ด ์ตœ์šฐ์„ ์œผ๋กœ ์ ์šฉ์ด ๋˜๊ณ  ๋‹ค์Œ์œผ๋กœ ๋‚ด๋ถ€/์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ๊ฐ€ ์ ์šฉ์ด ๋œ๋‹ค

CSS ๊ทœ์น™


์„ ํƒ์ž(Selector) : CSS๋ฅผ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด HTML์˜ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค
์†์„ฑ(Property) : CSS๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์„ ์ •ํ•ฉ๋‹ˆ๋‹ค
์†์„ฑ ๊ฐ’(Property Value) : ์†์„ฑ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฐ’์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค
์„ ์–ธ(Declaration) : ์š”์†Œ์˜ ์†์„ฑ์„ ๋ช…์‹œํ•ฉ๋‹ˆ๋‹ค

{}์œผ๋กœ ๊ฐ์‹ธ์ ธ์•ผ ํ•œ๋‹ค
์†์„ฑ๊ณผ ์†์„ฑ ๊ฐ’์€ :์œผ๋กœ ๊ตฌ๋ถ„๋˜์–ด ์ง„๋‹ค
๊ฐ ์„ ์–ธ์„ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ ์„ ์–ธ ๋์— ;์„ ๋ถ™์ธ๋‹ค

์„ ํƒ์ž ์ข…๋ฅ˜


1. ์•„์ด๋”” ์„ ํƒ์ž : ํŠน์ • Id๋ฅผ ๊ฐ€์ง„ ์š”์†Œ์— ์ ์šฉํ•ฉ๋‹ˆ๋‹ค

#Id { 
font-size: 50px;
}

ID ์•ž์— #์„ ๋ถ™์—ฌ์„œ ์ ์šฉํ•œ๋‹ค

2. ํด๋ž˜์Šค ์„ ํƒ์ž : ํŠน์ • Class๋ฅผ ๊ฐ€์ง„ ์š”์†Œ์— ์ ์šฉํ•ฉ๋‹ˆ๋‹ค

.Class {
font-size: 50px;
}

Class ์•ž์— .์„ ๋ถ™์—ฌ์„œ ์ ์šฉํ•œ๋‹ค

๐Ÿ’ก Class์™€ Id

Class์™€ Id๋Š” ๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•ด์•ผ ๋œ๋‹ค

Class๋Š” ์—ฌ๋Ÿฌ ์š”์†Œ๊ฐ€ ํ•˜๋‚˜์˜ Class๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์ง€๋งŒ
Id๋Š” ํ•œ ์š”์†Œ์— ํ•œ Id๋ฅผ ๊ฐ–๋Š”๋‹ค

3. ํŠน์„ฑ ์„ ํƒ์ž : ํŠน์ • Attribute๋ฅผ ๊ฐ€์ง„ ์š”์†Œ์— ์ ์šฉํ•ฉ๋‹ˆ๋‹ค

div[attr] {
font-size: 50px;
}

์„ ํƒ์ž ๋’ค์— []์•ˆ์— Attribute๋ฅผ ๋„ฃ์–ด์„œ ์ ์šฉํ•œ๋‹ค

4. ๊ฐ€์ƒ ์„ ํƒ์ž

div:hover {
color:red;
}

์„ ํƒ์ž ๋’ค์— :๋ฅผ ๋ถ™์—ฌ์„œ ํŠน์ • ์ด๋ฒคํŠธ๋ฅผ ์ ์šฉํ•œ๋‹ค

์†์„ฑ(Property)


1. ๊ธ€๊ผด๊ณผ ํฌ๊ธฐ

<div style="font-family: ๊ถ์„œ์ฒด; font-size:50px">๊ธ€๊ผด๊ณผ ํฌ๊ธฐ</div>
๊ธ€๊ผด๊ณผ ํฌ๊ธฐ


font-family : ๊ธ€๊ผด์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ
font-size : ๋ฌธ์ž์˜ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•˜๋Š” ์†์„ฑ

๐Ÿ”—์™ธ๋ถ€ ๋งํฌ๋ฅผ ๊ฐ€์ ธ์™€์„œ ๊ธ€๊ผด์„ ์ ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค๐Ÿ”—

๐Ÿ‘‡์˜ˆ์ œ

<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
<div style="font-family: 'East Sea Dokdo', cursive; font-size:50px;">๊ธ€๊ผด๊ณผ ํฌ๊ธฐ<div>
๊ธ€๊ผด๊ณผ ํฌ๊ธฐ

๐Ÿ”— ์™ธ๋ถ€ ๋งํฌ
https://fonts.google.com/

2. Box Model


์ถœ์ฒ˜ ์‚ฌ์ดํŠธ
https://hackernoon.com/the-box-model-44fc2c04a935

  • margin : ์š”์†Œ์˜ ๋ฐ”๊นฅ์„ ๋‘˜๋Ÿฌ์‹ผ ๊ณต๊ฐ„(์™ธ๋ถ€ ์—ฌ๋ฐฑ)
  • border : ์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ
  • padding : content๋ฅผ ๋‘˜๋Ÿฌ์‹ผ ๊ณต๊ฐ„(๋‚ด๋ถ€ ์—ฌ๋ฐฑ), ํ…Œ๋‘๋ฆฌ๋กœ ๊ฐ์‹ธ์ ธ ์žˆ๋‹ค

๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์ด์šฉํ•˜๋ฉด ์š”์†Œ๊ฒ€์‚ฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค

  • ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์ฐฝ ์—ด๊ธฐ

    • window : F12, Ctrl + Shift + I
    • mac : Cmd + Opt + I
  • ์š”์†Œ ๊ฒ€์‚ฌ

    • window : Ctrl + Shift + C
    • mac : Cmd + Shift + C

3. ๋ ˆ์ด์•„์›ƒ

๐Ÿ“ฃposition

 div {
  position: static position
}

1. ์ •์  ์œ„์น˜(static position) : positon์˜ ๊ธฐ๋ณธ๊ฐ’
2. ์ƒ๋Œ€ ์œ„์น˜(relative position) : ๊ธฐ์ค€ ์œ„์น˜์™€ ์ฃผ์–ด์ง„ ์†์„ฑ๊ฐ’์— ๋”ฐ๋ผ ์œ„์น˜๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค
3. ์ ˆ๋Œ€ ์œ„์น˜(absolute position) : ๋ถ€๋ชจ ์š”์†Œ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง„๋‹ค
๋ถ€๋ชจ position์— relative๋ฅผ ๋ถ€์—ฌํ•˜๋ฉด ๋ถ€๋ชจ ์œ„์น˜๊ฐ’์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ๋œ๋‹ค
4. ๊ณ ์ • ์œ„์น˜(fixed position) : ๋ณด์ด๋Š” ํ™”๋ฉด ๊ธฐ์ค€์— ๊ณ ์ •๋˜์–ด์ง„๋‹ค

๐Ÿ“ฃinline, block , inline-block

1. inline

ํ•ด๋‹น ๋‚ด์šฉ์˜ ํฌ๊ธฐ๋งŒํผ๋งŒ ์˜์—ญ์„ ์ฐจ์ง€ํ•œ๋‹ค 
๋Œ€ํ‘œ์ ์ธ ํƒœ๊ทธ๊ฐ€ <span>์ด๋‹ค

2. block

ํ•œ ๋ถ€๋ถ„์˜ ์˜์—ญ์„ ์ฐจ์ง€ํ•˜๋Š” ๋ฐ•์Šคํ˜•ํƒœ๋กœ ๋งŒ๋“ค์–ด์ง„๋‹ค 
๊ฐ€๋กœ์˜ ๊ธธ์ด๊ฐ€ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ๊ฐ€๋กœ์˜์—ญ์˜ ์ „์ฒด์ด๋‹ค
๊ทธ๋Ÿฌ๋ฏ€๋กœ ์ž๋™์ ์œผ๋กœ ์ค„๋ฐ”๊ฟˆ์„ ์ง€์›ํ•œ๋‹ค
๋Œ€ํ‘œ์ ์ธ ํƒœ๊ทธ๊ฐ€ <div>์ด๋‹ค

3. inline-block

inline๊ณผ blcok์˜ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค
์ค„๋ฐ”๊ฟˆ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค 
ํ•˜์ง€๋งŒ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค

๐Ÿ“ฃfloat

float๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ left,right,none์„ ๊ฐ€์ง„๋‹ค

  1. left: ํ•ด๋‹น ์š”์†Œ๊ฐ€ ๋ฐ•์Šค ํ˜•ํƒœ๋กœ ์™ผ์ชฝ์— float๊ฐ€ ๋œ๋‹ค
  2. right: ํ•ด๋‹น ์š”์†Œ๊ฐ€ ๋ฐ•์Šค ํ˜•ํƒœ๋กœ ์˜ค๋ฅธ์ชฝ์— float๊ฐ€ ๋œ๋‹ค
    โžกleft์™€ right๋ฅผ ์ง€์ •ํ•  ์‹œ ํ•ด๋‹น display ์†์„ฑ์€ ๋ฌด์‹œ๋œ๋‹ค
  3. none: ํ•ด๋‹น ์š”์†Œ๊ฐ€ float๋˜์ง€ ์•Š๋Š”๋‹ค

float ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ layout์„ ๋งŒ๋“œ๋ฉด ํ•ด๋‹น ์š”์†Œ์— ์˜ํ•ด ๋‹ค๋ฅธ ์š”์†Œ๋“ค์— ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค

๊ทธ๋Ÿด ๋–ˆ clear์„ ์ด์šฉํ•˜์—ฌ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค
๋ฐฉํ–ฅ(right, left, both)์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์†์„ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค

๐Ÿ‘‡ ์˜ˆ์‹œ

1๋ฒˆ ์˜ˆ์‹œ๊ฐ€ clear ์†์„ฑ์„ ์ ์šฉํ•œ ์˜ˆ์‹œ์ด๋‹ค

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