๐Ÿ“– [๊ฐ•์˜ ๋‚ด์šฉ ๋ฐ ๊ฐœ๋… ์ •๋ฆฌ]
๋ชฉ์ฐจ

  • CSS ๊ธฐ์ดˆ
  • ๋ฐ•์Šค๋ชจ๋ธ
  • CSS selector
  • ์Šคํƒ€์ผ ์ƒ์†
  • ์„ ํƒ์ž ์šฐ์„ ์ˆœ์œ„
  • ๋ฐฐ์šด ๋‚ด์šฉ์„ ๋‚ด ๊ฒƒ์œผ๋กœ ๋งŒ๋“œ๋Š” ๊ณผ์ œ
  • 2023.04.13 ๋ฆฌ๋ทฐ

[CSS ๊ธฐ์ดˆ]

CSS (Cascading Style Sheets)๋Š” ์›น ํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ๊ณผ ์Šคํƒ€์ผ์„ ์ •์˜ํ•˜๋Š” ์Šคํƒ€์ผ์‹œํŠธ ์–ธ์–ด
CSS๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI, User interface)์œผ๋กœ ๋ถ€ํ„ฐ ๋งŒ๋“ค์–ด ์‚ฌ์šฉ์ž๊ฐ€ HTML ์ฝ˜ํ…์ธ ์— ๋Œ€ํ•ด ์ž˜ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š” ์—ญํ• 

๊ธฐ๋ณธ ๋ฌธ๋ฒ•, ์ฃผ์„

์„ ํƒ์ž {
	์Šคํƒ€์ผ ์†์„ฑ: ์Šคํƒ€์ผ ๊ฐ’;
    ์Šคํƒ€์ผ ์†์„ฑ: ์Šคํƒ€์ผ ๊ฐ’;
    /* ์ฃผ์„ */
    ์Šคํƒ€์ผ ์†์„ฑ: ์Šคํƒ€์ผ ๊ฐ’;
}

์„ ์–ธ๋ฐฉ์‹

  1. ๋‚ด์žฅ ๋ฐฉ์‹
  • CSS ํŒŒ์ผ์ด ๋ถ„๋ฆฌ๋˜์ง€ ์•Š๊ณ  HTML ํŒŒ์ผ ์•ˆ์— ์žˆ์„ ๊ฒฝ์šฐ ์ฝ”๋“œ๊ฐ€ ๋ฐฉ๋Œ€ํ•ด์งˆ ๊ฒฝ์šฐ ์œ ์ง€๋ณด์ˆ˜ ์ธก๋ฉด์—์„œ ๋‹จ์ ์ด ๋งŽ์€ ํŽธ
  • (๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ)ํ•˜์ง€๋งŒ ์ปดํฌ๋„ŒํŠธ ๋ณ„๋กœ ์ž˜ ๋ถ„๋ฆฌ๊ฐ€ ๋˜์–ด ์žˆ๋Š” ๊ฒฝ์šฐ styled-component ๊ฐ™์ด ๊ทœ์น™์ ์œผ๋กœ ๊ณตํ†ต๋˜์ง€ ์•Š๋Š” ์Šคํƒ€์ผ์„ HTML ํŒŒ์ผ์— ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์€ ์˜คํžˆ๋ ค ํŽธํ•  ์ˆ˜๋„ ์žˆ์ง€ ์•Š์„๊นŒ...
<style>
	div {
    	background-color: #ffffff;
    	margin: 20px;
    }
</style>
  1. ์ธ๋ผ์ธ ๋ฐฉ์‹
  • CSS ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’๊ธฐ ๋•Œ๋ฌธ์— ์ถ”ํ›„ ์œ ์ง€๋ณด์ˆ˜์— ์•…์˜ํ–ฅ์„ ๋ผ์น  ์ˆ˜ ์žˆ์Œ
<div style="background-color: #ffffff;margin: 20px;"></div>
  1. ๋งํฌ ๋ฐฉ์‹
  • link ํƒœ๊ทธ๋กœ ์™ธ๋ถ€ CSS ๋ฌธ์„œ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ์‹ (๋ณ‘๋ ฌ ๋ฐฉ์‹)
<link rel="stylesheet" href="./css/main.css">
  1. @import ๋ฐฉ์‹
  • CSS์˜ @import ๊ทœ์น™์œผ๋กœ CSS ๋ฌธ์„œ ์•ˆ์—์„œ ๋˜ ๋‹ค๋ฅธ CSS ๋ฌธ์„œ๋ฅผ ๊ฐ€์ ธ์™€ ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ์‹ (์ง๋ ฌ ๋ฐฉ์‹์œผ๋กœ ์—ฐ๊ฒฐ)
  • ์žฅ์ : ํŒŒ์ผ์˜ ์—ฐ๊ฒฐ์„ ์˜๋„์ ์œผ๋กœ ์ง€์—ฐ์‹œํ‚ฌ ๋•Œ ์‚ฌ์šฉํ•จ
  • ๋‹จ์ : ํŒŒ์ผ์˜ ์—ฐ๊ฒฐ์„ ์ง€์—ฐ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Œ
    • ์•ž์„  ํŒŒ์ผ(main.css)์ด HTML๊ณผ ์—ฐ๊ฒฐ๋˜์–ด @import๋ฌธ์„ ์ฝ์–ด์•ผ์ง€๋งŒ ๋‹ค์Œ ํŒŒ์ผ(container.css)์ด ์—ฐ๊ฒฐ๋˜๊ธฐ ๋•Œ๋ฌธ์—
/* main.css */
@import url("./container.css");

/* ... */

์ ˆ๋Œ€ ๋‹จ์œ„์™€ ์ƒ๋Œ€ ๋‹จ์œ„

  • ์ ˆ๋Œ€ ๋‹จ์œ„: px, pt ๋“ฑ
  • ์ƒ๋Œ€ ๋‹จ์œ„: %, em, rem, ch, vw, vh ๋“ฑ

๊ธ€๊ผด ์‚ฌ์ด์ฆˆ

  • ์ ˆ๋Œ€ ๋‹จ์œ„๋ฅผ ์“ฐ๋Š” ๊ฒฝ์šฐ: ํ™”๋ฉด์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ •ํ•ด์ง„ ๊ฒฝ์šฐ
  • ์ƒ๋Œ€ ๋‹จ์œ„๋ฅผ ์“ฐ๋Š” ๊ฒฝ์šฐ: rem์„ ์“ฐ๋Š” ๊ฒฝ์šฐ ๋ธŒ๋ผ์šฐ์ €, ๋ชจ๋ฐ”์ผ ๋“ฑ ํ™”๋ฉด์˜ ๋ณ€ํ™”์— ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ณธ ๊ธ€์ž ํฌ๊ธฐ์— ๋”ฐ๋ฅด๋ฉฐ ์ ‘๊ทผ์„ฑ์— ์œ ๋ฆฌ (em์˜ ๊ฒฝ์šฐ ๋ถ€๋ชจ ์—˜๋ฆฌ๋จผํŠธ์— ๋”ฐ๋ผ ์ƒ๋Œ€์ ์œผ๋กœ ํฌ๊ธฐ ๋ณ€๊ฒฝ๋จ)

ํ™”๋ฉด ์‚ฌ์ด์ฆˆ

  • ์ ˆ๋Œ€ ๋‹จ์œ„๋ฅผ ์“ฐ๋Š” ๊ฒฝ์šฐ: ๋ฐ˜์‘ํ˜• ์›น์—์„œ ๊ธฐ์ค€์ ์„ ์ •ํ•  ๋•Œ (์Šค๋งˆํŠธํฐ / ํƒœ๋ธ”๋ฆฟ / ์ปดํ“จํ„ฐ ์‚ฌ์ด ๊ธฐ์ค€์ )
  • ์ƒ๋Œ€ ๋‹จ์œ„๋ฅผ ์“ฐ๋Š” ๊ฒฝ์šฐ: ์Šคํฌ๋กค ์ด๋ฒคํŠธํ–ˆ์„ ๋•Œ ๊ฐ ์—˜๋ฆฌ๋จผํŠธ์˜ vw, vh๋ฅผ ์ ์šฉํ•  ๊ฒฝ์šฐ ๋ณด๋‹ค ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Œ

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

block vs inline vs inline-block


์ถœ์ฒ˜: stackoverflow - display:inline vs display:block [duplicate]

margin, border, padding, content


์ถœ์ฒ˜: velog - [CSS] ๋ฐ•์Šค ๋ชจ๋ธ(Box-Model)

/* ๋„ค ๋ฉด ๋ชจ๋‘ ์ ์šฉ */
margin: 1em;
margin: -3px;

/* ์„ธ๋กœ๋ฐฉํ–ฅ | ๊ฐ€๋กœ๋ฐฉํ–ฅ */
margin: 5% auto;

/* ์œ„ | ๊ฐ€๋กœ๋ฐฉํ–ฅ | ์•„๋ž˜ */
margin: 1em auto 2em;

/* ์œ„ | ์˜ค๋ฅธ์ชฝ | ์•„๋ž˜ | ์™ผ์ชฝ */
margin: 2px 1em 0 auto;

/* ์ „์—ญ ๊ฐ’ */
margin: inherit;
margin: initial;
margin: unset;

/* ๋„ค ๋ฉด ๋ชจ๋‘ ์ ์šฉ */
padding: 1em;

/* ์„ธ๋กœ๋ฐฉํ–ฅ | ๊ฐ€๋กœ๋ฐฉํ–ฅ */
padding: 5% 10%;

/* ์œ„ | ๊ฐ€๋กœ๋ฐฉํ–ฅ | ์•„๋ž˜ */
padding: 1em 2em 2em;

/* ์œ„ | ์˜ค๋ฅธ์ชฝ | ์•„๋ž˜ | ์™ผ์ชฝ */
padding: 5px 1em 0 2em;

/* ์ „์—ญ ๊ฐ’ */
padding: inherit;
padding: initial;
padding: unset;

mdn - margin
mdn - padding

overflow

border-box vs content-box

* {
  box-sizing: border-box; /* ๊ธฐ์ค€: border */
  box-sizing: content-box; /* ๊ธฐ์ค€: content */
}

box-sizing์˜ ๊ธฐ๋ณธ๊ฐ’์€ content-box์ด์ง€๋งŒ ๋ ˆ์ด์•„์›ƒ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•  ๋•Œ border-box ๊ธฐ์ค€์œผ๋กœ ์„ค๋ช…ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณดํ†ต ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ ์ „ border-box๋กœ ์„ค์ •ํ•˜๊ณ  ์‹œ์ž‘
mdn - box-sizing

[CSS selector]

๊ธฐ๋ณธ ์„ ํƒ์ž

  • *(Asterisk): ์ „์ฒด ์„ ํƒ์ž(Universal Selector), ๋ชจ๋“  ์š”์†Œ๋ฅผ ์„ ํƒ
  • ํƒœ๊ทธ: ํƒœ๊ทธ ์„ ํƒ์ž(Type Selector), ํƒœ๊ทธ ์ด๋ฆ„์— ํ•ด๋‹นํ•˜๋Š” ๋ชจ๋“  ์š”์†Œ ์„ ํƒ
  • .ํด๋ž˜์Šค-์ด๋ฆ„: ํด๋ž˜์Šค ์„ ํƒ์ž(Class Selector), HTML class ์†์„ฑ์˜ ๊ฐ’์ด "ํด๋ž˜์Šค-์ด๋ฆ„"๊ณผ ๋™์ผํ•œ ๋ชจ๋“  ์š”์†Œ ์„ ํƒ
  • #์•„์ด๋””-์ด๋ฆ„: ์•„์ด๋”” ์„ ํƒ์ž(ID Selector), HTML id ์†์„ฑ ๊ฐ’์ด "์•„์ด๋””-์ด๋ฆ„"์ธ ์š”์†Œ ์„ ํƒ

๋ณตํ•ฉ ์„ ํƒ์ž

  • ์„ ํƒ์ž1์„ ํƒ์ž2: ์ผ์น˜ ์„ ํƒ์ž(Basic Combinator), ์—ฐ๊ฒฐ๋œ ์„ ํƒ์ž๋ฅผ ๋™์‹œ์— ๋งŒ์กฑํ•˜๋Š” ์š”์†Œ ์„ ํƒ
    • ex) span.name, div#container ...
  • ์„ ํƒ์ž1 > ์„ ํƒ์ž2: ์ž์‹ ์„ ํƒ์ž(Child Combinator), ์„ ํƒ์ž1์˜ ์ž์‹์š”์†Œ ์„ ํƒ์ž2๋ฅผ ์„ ํƒ
    • ex) span > .name, ul > li ...
  • ์„ ํƒ์ž1 ์„ ํƒ์ž2: ํ•˜์œ„(ํ›„์†) ์„ ํƒ์ž(Descendant Combinator), ์„ ํƒ์ž1์˜ ํ•˜์œ„์š”์†Œ์ธ ์„ ํƒ์ž2 ์„ ํƒ, "๋„์–ด์“ฐ๊ธฐ"๊ฐ€ ์„ ํƒ์ž์˜ ๊ธฐํ˜ธ
    • ex) .main-paragraph span ...
  • ์„ ํƒ์ž1 + ์„ ํƒ์ž2: ์ธ์ ‘ ํ˜•์ œ ์„ ํƒ์ž(Adjacent Sibling Combinator), ์„ ํƒ์ž1์˜ ๋‹ค์Œ ํ˜•์ œ ์š”์†Œ ์„ ํƒ์ž2 ํ•˜๋‚˜๋ฅผ ์„ ํƒ
    <ul>
    	<li>1</li>
      <li>2</li>
      <li class="three">3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <style>
    	.three + li {
      	color: blue;
          /* ์ˆซ์ž 4๊ฐ€ ํŒŒ๋ž€์ƒ‰ ๊ธ€์ž๋กœ ๋ณ€ํ•จ */
      }
    </style>
  • ์„ ํƒ์ž1 ~ ์„ ํƒ์ž2: ์ผ๋ฐ˜ ํ˜•์ œ ์„ ํƒ์ž(General Sibling Combinator), ์„ ํƒ์ž1์˜ ๋‹ค์Œ ํ˜•์ œ ์š”์†Œ ์„ ํƒ์ž2 ๋ชจ๋‘๋ฅผ ์„ ํƒ
    <ul>
    	<li>1</li>
      <li>2</li>
      <li class="three">3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <style>
    	.three ~ li {
      	color: blue;
          /* ์ˆซ์ž 4์™€ 5๊ฐ€ ํŒŒ๋ž€์ƒ‰ ๊ธ€์ž๋กœ ๋ณ€ํ•จ */
      }
    </style>

๊ฐ€์ƒ ํด๋ž˜์Šค(Pseudo-Classes) ์„ ํƒ์ž

  div {
  	width: 80px;
    height: 80px;
    background-color: blue;
  }
  
  input {
  	width: 80px;
    height: 20px;
  }

hover: ๋งˆ์šฐ์Šค ์ปค์„œ๊ฐ€ ์˜ฌ๋ผ๊ฐ€ ์žˆ๋Š” ๋™์•ˆ ์„ ํƒ

button:hover {
	background-color: lightcoral;
}

active: ๋งˆ์šฐ์Šค ํด๋ฆญํ•˜๋Š” ๋™์•ˆ ์„ ํƒ

button:active {
    background-color: yellow;
}

focus: ๋งˆ์šฐ์Šค ํด๋ฆญํ•˜๋Š” ๋™์•ˆ ์„ ํƒ

  • HTML ๋Œ€ํ™”ํ˜• ์ฝ˜ํ…์ธ ๊ฐ€ ํ•ด๋‹น
  • ex) input, a, button, label, select
  • ๊ทธ ์™ธ tabindex ์†์„ฑ์„ ์‚ฌ์šฉํ•œ ์š”์†Œ
  • focus๋Š” ํ•œ ํŽ˜์ด์ง€์—์„œ ํ•œ ์š”์†Œ๋งŒ ๊ฐ€๋Šฅ
button:focus
  	background-color: green;
}

first-child: ํ˜•์ œ ์š”์†Œ ์ค‘ ์ฒซ์งธ๋ผ๋ฉด ํ•ด๋‹น
last-child: ํ˜•์ œ ์š”์†Œ ์ค‘ ๋ง‰๋‚ด๋ผ๋ฉด ํ•ด๋‹น
nth-child(): ํ˜•์ œ ์š”์†Œ ์ค‘ n๋ฒˆ์งธ๋ผ๋ฉด ํ•ด๋‹น

<ul>
	<li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<style>
	ul li:first-child {
    	color: aqua;
	}

	ul li:last-child {
    	color: blueviolet;
	}
    
	ul li:nth-child(3) {
    	color: chocolate;
	}
</style>

nth-child(): ํ˜•์ œ ์š”์†Œ ์ค‘ n๋ฒˆ์งธ๋ผ๋ฉด ํ•ด๋‹น

  • () ์•ˆ์— 2n(์ง์ˆ˜), 2n+1(ํ™€์ˆ˜), ... ์‹์„ ๋„ฃ์–ด ํ‘œํ˜„ ๊ฐ€๋Šฅ(n์€ 0๋ถ€ํ„ฐ ์‹œ์ž‘)
<ol>
	<li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ol>
<style>
	ol li:nth-child(2n) {
    	color: pink;
	}
</style>

ํ•˜์ง€๋งŒ -child() ๋Œ€์‹  -of-type()์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค.
first-of-type: ํ˜•์ œ ์š”์†Œ ์ค‘ ์ฒซ์งธ๋ผ๋ฉด ํ•ด๋‹น
last-of-type: ํ˜•์ œ ์š”์†Œ ์ค‘ ๋ง‰๋‚ด๋ผ๋ฉด ํ•ด๋‹น
nth-of-type(): ํ˜•์ œ ์š”์†Œ ์ค‘ n๋ฒˆ์งธ๋ผ๋ฉด ํ•ด๋‹น

not(): ๋ถ€์ •์„ ํƒ์ž

<div>
	<p>A</p>
    <span>B</span>
    <p>C</p>
    <p>D</p>
</div>
<style>
	div *:not(p) {
    	color: gray;
	}
</style>

๊ทธ ์™ธ

input:not([type="password"]) { } /* type์ด password๊ฐ€ ์•„๋‹Œ ๋ชจ๋“  input ํƒœ๊ทธ */
a:link /* ์‚ฌ์šฉ์ž๊ฐ€ ๋งํฌ๋ฅผ ํด๋ฆญํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ */
a:visited /* ์‚ฌ์šฉ์ž๊ฐ€ ๋งํฌ๋ฅผ ํด๋ฆญํ•œ ์•Š์€ ๊ฒฝ์šฐ */

๊ฐ€์ƒ์š”์†Œ ์„ ํƒ์ž(Pseudo-Elements)

์„ ํƒ์ž::before : ์„ ํƒ์ž ๋‚ด๋ถ€ ์•ž์— ๋‚ด์šฉ(content)๋ฅผ ์‚ฝ์ž…
์„ ํƒ์ž::after : ์„ ํƒ์ž ๋‚ด๋ถ€ ๋’ค์— ๋‚ด์šฉ(content)๋ฅผ ์‚ฝ์ž…

  • content ๋ฐ˜๋“œ์‹œ ์ถ”๊ฐ€ํ•ด์•ผ ํ•จ

<div>
	<p>world</p>
</div>
<style>
	div::before {
    	content: "hello";
    }
    div::after {
    	content: "!"
    }
</style>

์†์„ฑ ์„ ํƒ์ž(Attribute)

[์†์„ฑ]: ์†์„ฑ์„ ํฌํ•จํ•œ ์š”์†Œ ์„ ํƒ

  • ์ ํ•ฉํ•˜์ง€ ์•Š๊ฒŒ ์ž‘์„ฑํ•œ ๊ฒฝ์šฐ
    <style>
      input[type] { }
      /* input์—๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ type ์†์„ฑ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“  input์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€ */
    </style>
  • ์ ํ•ฉํ•˜๊ฒŒ ์ž‘์„ฑํ•œ ๊ฒฝ์šฐ
    <style>
      *[disabled] { }
      /* input ๋˜๋Š” button ๋“ฑ disabled ์†์„ฑ์ด ์ถ”๊ฐ€ ๋  ์ˆ˜ ์žˆ๋Š” ์—˜๋ฆฌ๋จผํŠธ์— disabled ์†์„ฑ์ด ์ถ”๊ฐ€๋œ ๊ฒฝ์šฐ ์ ์šฉ */
    </style>
  • ์†์„ฑ๊ณผ ๊ฐ’์„ ๋ชจ๋‘ ํ™•์ธํ•˜๋Š” ๊ฒฝ์šฐ
    <style>
    	input[type="password"] { }
        p[data-icon-name="internet"] { }
    </style>

์ •ํ•ฉ์„ฑ ํ™•์ธ ์…€๋ ‰ํ„ฐ

<div>
  <label for="email_input">Enter an email address:</label>
  <input type="email" id="email_input" required />
</div>
<style>
  input:valid {
     background-color: #ddffdd;
  }
  input:invalid {
     background-color: #ffdddd;
  }
</style>

๊ทธ ์™ธ

p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

/* UI ์š”์†Œ ์ƒํƒœ ์…€๋ ‰ํ„ฐ */
input:checked + span { } /* input์ด ์ฒดํฌ ์ƒํƒœ์ผ ๋•Œ ๋‹ค์Œ ํ˜•์ œ ์ค‘ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด span ์„ ํƒ */
input:enabled ~ span { } /* ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ์ผ ๋•Œ ๋‹ค์Œ ํ˜•์ œ๋“ค ์ค‘ span ๋ชจ๋‘ ์„ ํƒ */
input:disabled + span { } /* ์‚ฌ์šฉ ๋ถˆ๊ฐ€๋Šฅํ•œ ์ƒํƒœ์ผ ๋•Œ ๋‹ค์Œ ํ˜•์ œ ์ค‘ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด span ์„ ํƒ */

[์Šคํƒ€์ผ ์ƒ์†]

์Šคํƒ€์ผ ์ƒ์†

CSS์—์„œ ๋ถ€๋ชจ ์š”์†Œ๋กœ๋ถ€ํ„ฐ ์ ์šฉ๋œ ์š”์†Œ๊ฐ€ ์ž์‹ ์š”์†Œ๋กœ ์ƒ์†๋˜์–ด ์ ์šฉ๋จ

<div class="๊ฐ€์กฑ">
    ๊ฐ€์กฑ: ๊ณฐ ์„ธ๋งˆ๋ฆฌ๊ฐ€ ํ•œ์ง‘์— ์žˆ์–ด<br />
    <div class="๊ฐ€์กฑ์†Œ๊ฐœ">
        ๊ฐ€์กฑ ์†Œ๊ฐœ: ์•„๋น ๊ณฐ ์—„๋งˆ๊ณฐ ์• ๊ธฐ๊ณฐ<br />
        <div class="๊ฐ€์กฑ๋ฌ˜์‚ฌ">
            ๊ฐ€์กฑ ๋ฌ˜์‚ฌ:<br />
            ์•„๋น ๊ณฐ์€ ๋šฑ๋šฑํ•ด<br />
            ์—„๋งˆ๊ณฐ์€ ๋‚ ์”ฌํ•ด<br />
            <span>์• ๊ธฐ๊ณฐ์€ ๋„ˆ๋ฌด๊ท€์—ฌ์›Œ</span><br />
            <span>์œผ์“ฑ์œผ์“ฑ์ž˜ํ•œ๋‹ค</span><br />
        </div>
    </div>
</div>
<style>
    .๊ฐ€์กฑ๋ฌ˜์‚ฌ {
      color: blue;
    }
</style>

  • class๊ฐ€ "๊ฐ€์กฑ๋ฌ˜์‚ฌ"์ธ div์— color ๊ฐ’์„ ์ ์šฉํ–ˆ๋”๋‹ˆ ๊ทธ ์•ˆ์— ์žˆ๋Š” span ํƒœ๊ทธ์—๋„ color ๊ฐ’์ด ์ƒ์†๋จ

์ƒ์†์ด ์ด๋ฃจ์–ด์ง€๋Š” ์†์„ฑ์€ ๋ชจ๋‘ ํ…์ŠคํŠธ ๊ด€๋ จ ์†์„ฑ๋“ค (๋ชจ๋“  ํ…์ŠคํŠธ ์†์„ฑ์€ ์•„๋‹˜)

  • font-style
  • font-weight
  • font-size
  • line-height
  • font-family
  • color
  • text-align
  • ...

๊ฐ•์ œ ์ƒ์†

inherit ์ด๋ผ๋Š” ์†์„ฑ๊ฐ’์„ ํ†ตํ•ด์„œ ๋ถ€๋ชจ์˜ ์†์„ฑ๊ฐ’์„ ๊ฐ•์ œ๋กœ ์ƒ์†ํ•  ์ˆ˜ ์žˆ์Œ

<div class="parent">
    <div class="child"></div>
</div>
<style>
    .parent {
        width: 300px;
        height: 200px;
        background-color: red;
    }
    .child {
        width: 100px;
        height: inherit; /* ๊ฐ•์ œ ์ƒ์†๋˜๋ฏ€๋กœ class๊ฐ€ parent์ธ div์™€ ๋†’์ด๊ฐ€ ๊ฐ™์Œ  */
        background-color: orange;
    }
</style>

[์„ ํƒ์ž ์šฐ์„ ์ˆœ์œ„]

๊ทœ์น™1. ์ ์ˆ˜๋ฅผ ํ•ฉ์‚ฐํ•˜์—ฌ ์ ์ˆ˜๊ฐ€ ๋†’์€ ์„ ์–ธ์ด ์šฐ์„ 
๊ทœ์น™2. ์ ์ˆ˜๊ฐ€ ๊ฐ™์œผ๋ฉด ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰์— ์„ ์–ธ๋œ ์Šคํƒ€์ผ์ด ์šฐ์„ 

์ ์ˆ˜

  • !important: ๋ฌดํ•œ๋Œ€!
  • ์ธ๋ผ์ธ ์„ ์–ธ: 1000์ 
  • ID ์„ ํƒ์ž: 100์ 
  • class ์„ ํƒ์ž: 10์ 
    • ๊ฐ€์ƒ ํด๋ž˜์Šค ์„ ํƒ์ž: 10์ 
    • ์˜ˆ์™ธ: ๋ถ€์ • ์„ ํƒ์ž(not)
  • ํƒœ๊ทธ ์„ ํƒ์ž: 1์ 
    • ๊ฐ€์ƒ์š”์†Œ ์„ ํƒ์ž: 1์ 
  • ์ „์ฒด ์„ ํƒ์ž: 0์ 
  • ์ƒ์†: ์ ์ˆ˜ ์—†์Œ

[๋ฐฐ์šด ๋‚ด์šฉ์„ ๋‚ด ๊ฒƒ์œผ๋กœ ๋งŒ๋“œ๋Š” ๊ณผ์ œ]

HTML๊ณผ CSS๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ž๊ธฐ ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

[2023.04.13 ๋ฆฌ๋ทฐ]

CSS๋Š” ํ•ญ์ƒ ํ•  ๋•Œ๋งˆ๋‹ค ๊ณ ๋ฏผ์ด ๊นŠ์–ด์ง„๋‹ค.
์ฒ˜์Œ CSS๋ฅผ ๋ฐฐ์šธ ๋•Œ CSS๋ฌธ์„œ๋Š” ์ž˜์งœ์—ฌ์ง„ ๋…ผ๋ฌธ์ฒ˜๋Ÿผ ์ฝํžˆ๊ฒŒ๋” ์ž‘์„ฑํ•ด์•ผํ•œ๋‹ค๊ณ  ๋ฐฐ์› ์ง€๋งŒ,
์–ด๋Š ์ˆœ๊ฐ„ ๊ทœ์น™์ ์ด์ง€ ์•Š๊ฒŒ CSS๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์žˆ๋Š” ๋‚˜๋ฅผ ๋ฐœ๊ฒฌํ•œ๋‹ค...
๊ทธ๋ž˜์„œ ์Šค์Šค๋กœ ๋‚˜๋ฆ„๋Œ€๋กœ์˜ ๋ช…ํ™•ํ•œ ๊ทœ์น™์„ ์„ธ์šฐ๊ธฐ ์œ„ํ•ด ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋ฅผ CSS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—†์ด ์ง„ํ–‰ํ•˜๊ณ  ์žˆ๋‹ค. (ํ•˜์ง€๋งŒ ๊ฐˆ๊ธธ์ด ๊ตฌ๋งŒ๋ฆฌ์ธ๊ฒƒ ๊ฐ™์ง€๋งŒ...๐Ÿฅฒ)

๋ถ€ํŠธ์บ ํ”„๋ฅผ ์ฐธ์—ฌํ•˜๊ณ  ๋‹ค์–‘ํ•œ ๋ถ„๋“ค์˜ ์งˆ๋ฌธ๊ณผ ์ž๋ฃŒ ๊ณต์œ ๋ฅผ ํ†ตํ•ด ๊ฐ์‚ฌํ•˜๊ฒŒ๋„ ์ƒˆ๋กœ์šด ์ •๋ณด๋ฅผ ๋งŽ์ด ์ ‘ํ•˜๊ณ  ์žˆ๋‹ค!
SEB_FE_45๊ธฐ ๋ชจ๋“  ๋ถ„๋“ค์—๊ฒŒ ๊ฐ์‚ฌํ•œ ๋งˆ์Œ์„ ๋งˆ์ง€๋ง‰์œผ๋กœ ์˜ค๋Š˜์˜ ํฌ์ŠคํŒ… ๋!

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

๊ด€๋ จ ์ฑ„์šฉ ์ •๋ณด

Powered by GraphCDN, the GraphQL CDN