TIL 2 | CSS ๊ธฐ์ด ๐ฌ
CSS(Cascading Style Sheets)
์คํ์ผ์ํธ๋ฅผ ์ํ ์ธ์ด
์ฐธ๊ณ ์ฌ์ดํธ
https://developer.mozilla.org/ko/docs/Web/CSS
CSS ์์ฑ
- ์ธ๋ผ์ธ ์คํ์ผ
<body><div style="font-size:50px"></div><body>
- ๋ด๋ถ ์คํ์ผ ์ํธ
<head>
<style>
div { font-size:50px; }
</style>
</head>
- ์ธ๋ถ ์คํ์ผ ์ํธ
<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
์ ๊ฐ์ง๋ค
left
: ํด๋น ์์๊ฐ ๋ฐ์ค ํํ๋ก ์ผ์ชฝ์ float๊ฐ ๋๋คright
: ํด๋น ์์๊ฐ ๋ฐ์ค ํํ๋ก ์ค๋ฅธ์ชฝ์ float๊ฐ ๋๋ค
โกleft
์right
๋ฅผ ์ง์ ํ ์ ํด๋นdisplay
์์ฑ์ ๋ฌด์๋๋คnone
: ํด๋น ์์๊ฐ float๋์ง ์๋๋ค
float ์์ฑ์ ์ด์ฉํ์ฌ layout์ ๋ง๋๋ฉด ํด๋น ์์์ ์ํด ๋ค๋ฅธ ์์๋ค์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค
๊ทธ๋ด ๋ clear
์ ์ด์ฉํ์ฌ ํด๊ฒฐํ ์ ์๋ค
๋ฐฉํฅ(right, left, both)์ ๋ฐ๋ผ ๋ค๋ฅธ ์์ฑ์ ์ฌ์ฉํ ์ ์๋ค
๐ ์์
1๋ฒ ์์๊ฐ clear
์์ฑ์ ์ ์ฉํ ์์์ด๋ค
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(TIL 2 | CSS ๊ธฐ์ด ๐ฌ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@action2thefuture/TIL-CSS-๊ธฐ์ด์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค