JavaScript

[CSS] CSS์˜ ๊ธฐ๋ณธ

hellosonic 2023. 9. 6. 19:30

๐Ÿ“Œ CSS์˜ ๊ตฌ์„ฑ์š”์†Œ

์„ ํƒ์ž { ์†์„ฑ : ์†์„ฑ๊ฐ’; }
  • ์„ ํƒ์ž: ๋””์ž์ธ์„ ์ ์šฉํ•  HTML ์˜์—ญ
  • ์†์„ฑ: ์–ด๋–ค ๋””์ž์ธ์„ ์ ์šฉํ• ์ง€ ์ •์˜
  • ์†์„ฑ๊ฐ’: ์–ด๋–ค ์—ญํ• ์„ ์ˆ˜ํ–‰ํ• ์ง€ ๊ตฌ์ฒด์ ์œผ๋กœ ๋ช…๋ น

๐Ÿ“Œ CSS ์†์„ฑ

/* ์˜ˆ์‹œ */
h1 {
    font-size: 20px; /* ํฐํŠธ ์‚ฌ์ด์ฆˆ */
    font-family: sans-serif; /* ๊ธ€๊ผด */
    color: blue; /* ํฐํŠธ ์ƒ‰์ƒ */
    background-color: yellow; /* ๋ฐฐ๊ฒฝ์ƒ‰ */
    text-align: center; /* ํ…์ŠคํŠธ ์ •๋ ฌ */
}

๐Ÿ“Œ CSS ์—ฐ๋™ ๋ฐฉ๋ฒ•

1. Inline Style Sheet: ํƒœ๊ทธ ์•ˆ์— ์ง์ ‘ ์›ํ•˜๋Š” ์Šคํƒ€์ผ ์ ์šฉ

<h1 style="color: red;"> coding 101 </h1>

2. Internal Style Sheet: <style> ํƒœ๊ทธ ์•ˆ์— ๋„ฃ๊ธฐ

<head>
    <style>
        h1 { background-color: yellow; }
    </style>
</head>

3. External Style Sheet: <link> ํƒœ๊ทธ๋กœ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

<head>
    <link rel="stylesheet" href="style.css">
</head>

๐Ÿ“Œ CSS ์„ ํƒ์ž

1. Type Selector: ํŠน์ • ํƒœ๊ทธ์— ์Šคํƒ€์ผ ์ ์šฉ

<style>
    h2 { color: blue; }
</style>

2. Class Selector: ํด๋ž˜์Šค ์ด๋ฆ„์œผ๋กœ ํŠน์ • ์œ„์น˜์— ์Šคํƒ€์ผ ์ ์šฉ

<style>
    .coding { color: blue; }
</style>

3. ID Selector: ID๋ฅผ ์ด์šฉํ•ด ์Šคํƒ€์ผ ์ ์šฉ

<style>
    #coding { color: green; }
</style>

๐Ÿ“Œ ์บ์Šค์ผ€์ด๋”ฉ : CSS์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์„ธ ๊ฐ€์ง€ ์š”์†Œ

1. ์ˆœ์„œ: ๋‚˜์ค‘์— ์ ์šฉํ•œ ์†์„ฑ๊ฐ’์˜ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์Œ

p { color: red; }
p { color: blue; }

/* ํŒŒ๋ž€์ƒ‰ */

2. ๋””ํ…Œ์ผ: ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ์ž‘์„ฑ๋œ ์„ ํƒ์ž์˜ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์Œ

header p { color: red; }
p { color: blue; }

/* ๋นจ๊ฐ„์ƒ‰ */

3. ์„ ํƒ์ž: style > id > class > type ์ˆœ์œผ๋กœ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์Œ

<h3 style="color: pink" id="color" class="color"> color </h3>

#color { color: blue; }
.color { color: red; }
h3 { color: green; }

/* ํ•‘ํฌ */

๐Ÿ“Œ CSS ์ฃผ์š” ์†์„ฑ

1. width, height

<p class="paragraph"> ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋ฐฐ์›Œ๋ด์š”! </p>

.paragraph {
    width: 500px;
    height: 500px;
}

2. font

  • .font-family: ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์ง€์›ํ•˜๋Š” ํฐํŠธ๊ฐ€ ๋‹ค๋ฆ„, ์ž…๋ ฅํ•œ ์ˆœ์„œ๋Œ€๋กœ ์šฐ์„ ์ˆœ์œ„ ์ ์šฉ. ์ฝค๋งˆ(,)๋กœ ๊ตฌ๋ถ„, sans-serif๋Š” ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์› ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋งˆ์ง€๋ง‰์— ์ž‘์„ฑํ•˜๋Š” ๋””ํดํŠธ ๊ฐ’
  • .font-weight: 100-900 ์‚ฌ์ด์˜ ์ˆซ์ž๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜๋„ ์žˆ์Œ
<p class="paragraph"> ์ฆ๊ฑฐ์šด ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ! </p>

.paragraph {
    font-size: 50px;
    font-family: Arial, sans-serif /* ์ฝค๋งˆ(,)๋กœ ๊ตฌ๋ถ„ */
    font-style: italic;
    font-weight: bold;
}

3. border

  • .border-style: ์‹ค์„ ์€ solid, ์ ์„ ์€ dotted ํ˜น์€ dashed๋กœ ํ‘œ๊ธฐ
  • ์ฃผ์„๊ณผ ๊ฐ™์ด ํ•œ ์ค„์— ์ด์–ด ์“ธ ์ˆ˜๋„ ์žˆ์Œ. ์ด ๋•Œ ๋„์–ด์“ฐ๊ธฐ๋กœ ๊ตฌ๋ถ„ํ•˜๊ณ  ์ˆœ์„œ๋Š” ์ƒ๊ด€ ์—†์Œ
<p class="paragraph"> ์ฆ๊ฑฐ์šด ์›นํ”„๋กœ๊ทธ๋ž˜๋ฐ </p>

.paragraph {
    width: 500px;
    height: 500px;
    border-style: solid;
    border-width: 10px;
    border-color: red;
}

/* border: solid 10px red; */

4. background

  • .background-repeat: x์ถ•์œผ๋กœ ๋ฐ˜๋ณต์€ repeat-x, y์ถ•์œผ๋กœ ๋ฐ˜๋ณต์€ repeat-y, ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ no-repeat์œผ๋กœ ํ‘œ๊ธฐ
  • .background-position: ๊ณต๊ฐ„ ์•ˆ์—์„œ ์ด๋ฏธ์ง€์˜ ์ขŒํ‘œ ๋ณ€๊ฒฝ (top, bottom, center, left, right ๋“ฑ)
  • ์ฃผ์„๊ณผ ๊ฐ™์ด ํ•œ ์ค„์— ์ด์–ด ์“ธ ์ˆ˜๋„ ์žˆ์Œ. ์ด ๋•Œ ๋„์–ด์“ฐ๊ธฐ๋กœ ๊ตฌ๋ถ„ํ•˜๊ณ  ์ˆœ์„œ๋Š” ์ƒ๊ด€ ์—†์Œ
<p class="paragraph"> ์ฆ๊ฑฐ์šด ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ! </p>

.paragraph {
    background-color: yellow;
    background-image: url(์ด๋ฏธ์ง€ ๊ฒฝ๋กœ);
    background-repeat: no-repeat;
    background-position: left;
}

/* background: yellow url(์ด๋ฏธ์ง€ ๊ฒฝ๋กœ) no-repeat left; */