๐ [๊ฐ์ ๋ด์ฉ ๋ฐ ๊ฐ๋
์ ๋ฆฌ]
๋ชฉ์ฐจ
CSS (Cascading Style Sheets)๋ ์น ํ์ด์ง์ ๋ ์ด์์๊ณผ ์คํ์ผ์ ์ ์ํ๋ ์คํ์ผ์ํธ ์ธ์ด
CSS๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI, User interface)์ผ๋ก ๋ถํฐ ๋ง๋ค์ด ์ฌ์ฉ์๊ฐ HTML ์ฝํ
์ธ ์ ๋ํด ์ ์ดํดํ ์ ์๋๋ก ๋๋ ์ญํ
์ ํ์ {
์คํ์ผ ์์ฑ: ์คํ์ผ ๊ฐ;
์คํ์ผ ์์ฑ: ์คํ์ผ ๊ฐ;
/* ์ฃผ์ */
์คํ์ผ ์์ฑ: ์คํ์ผ ๊ฐ;
}
<style>
div {
background-color: #ffffff;
margin: 20px;
}
</style>
<div style="background-color: #ffffff;margin: 20px;"></div>
<link rel="stylesheet" href="./css/main.css">
/* main.css */
@import url("./container.css");
/* ... */
๊ธ๊ผด ์ฌ์ด์ฆ
ํ๋ฉด ์ฌ์ด์ฆ
์ถ์ฒ: stackoverflow - display:inline vs display:block [duplicate]
์ถ์ฒ: 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;
* {
box-sizing: border-box; /* ๊ธฐ์ค: border */
box-sizing: content-box; /* ๊ธฐ์ค: content */
}
box-sizing์ ๊ธฐ๋ณธ๊ฐ์ content-box์ด์ง๋ง ๋ ์ด์์์ ๋ํด ์ค๋ช
ํ ๋ border-box ๊ธฐ์ค์ผ๋ก ์ค๋ช
ํ๊ธฐ ๋๋ฌธ์ ๋ณดํต ํ๋ก์ ํธ ์์ ์ border-box๋ก ์ค์ ํ๊ณ ์์
mdn - box-sizing
*
(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>
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: ๋ง์ฐ์ค ํด๋ฆญํ๋ ๋์ ์ ํ
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๋ฒ์งธ๋ผ๋ฉด ํด๋น
<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 /* ์ฌ์ฉ์๊ฐ ๋งํฌ๋ฅผ ํด๋ฆญํ ์์ ๊ฒฝ์ฐ */
์ ํ์::before : ์ ํ์ ๋ด๋ถ ์์ ๋ด์ฉ(content)๋ฅผ ์ฝ์
์ ํ์::after : ์ ํ์ ๋ด๋ถ ๋ค์ ๋ด์ฉ(content)๋ฅผ ์ฝ์
<div>
<p>world</p>
</div>
<style>
div::before {
content: "hello";
}
div::after {
content: "!"
}
</style>
[์์ฑ]: ์์ฑ์ ํฌํจํ ์์ ์ ํ
<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>
์์์ด ์ด๋ฃจ์ด์ง๋ ์์ฑ์ ๋ชจ๋ ํ ์คํธ ๊ด๋ จ ์์ฑ๋ค (๋ชจ๋ ํ ์คํธ ์์ฑ์ ์๋)
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. ์ ์๊ฐ ๊ฐ์ผ๋ฉด ๊ฐ์ฅ ๋ง์ง๋ง์ ์ ์ธ๋ ์คํ์ผ์ด ์ฐ์
์ ์
HTML๊ณผ CSS๋ฅผ ํ์ฉํ์ฌ ์๊ธฐ ์๊ฐ ํ์ด์ง ๋ง๋ค๊ธฐ
CSS๋ ํญ์ ํ ๋๋ง๋ค ๊ณ ๋ฏผ์ด ๊น์ด์ง๋ค.
์ฒ์ CSS๋ฅผ ๋ฐฐ์ธ ๋ CSS๋ฌธ์๋ ์์ง์ฌ์ง ๋
ผ๋ฌธ์ฒ๋ผ ์ฝํ๊ฒ๋ ์์ฑํด์ผํ๋ค๊ณ ๋ฐฐ์ ์ง๋ง,
์ด๋ ์๊ฐ ๊ท์น์ ์ด์ง ์๊ฒ CSS๋ฅผ ์์ฑํ๊ณ ์๋ ๋๋ฅผ ๋ฐ๊ฒฌํ๋ค...
๊ทธ๋์ ์ค์ค๋ก ๋๋ฆ๋๋ก์ ๋ช
ํํ ๊ท์น์ ์ธ์ฐ๊ธฐ ์ํด ๊ฐ์ธ ํ๋ก์ ํธ๋ฅผ CSS ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์งํํ๊ณ ์๋ค. (ํ์ง๋ง ๊ฐ๊ธธ์ด ๊ตฌ๋ง๋ฆฌ์ธ๊ฒ ๊ฐ์ง๋ง...๐ฅฒ)
๋ถํธ์บ ํ๋ฅผ ์ฐธ์ฌํ๊ณ ๋ค์ํ ๋ถ๋ค์ ์ง๋ฌธ๊ณผ ์๋ฃ ๊ณต์ ๋ฅผ ํตํด ๊ฐ์ฌํ๊ฒ๋ ์๋ก์ด ์ ๋ณด๋ฅผ ๋ง์ด ์ ํ๊ณ ์๋ค!
SEB_FE_45๊ธฐ ๋ชจ๋ ๋ถ๋ค์๊ฒ ๊ฐ์ฌํ ๋ง์์ ๋ง์ง๋ง์ผ๋ก ์ค๋์ ํฌ์คํ
๋!