[TIL] CSS ๊ธฐ์ด ์ ๋ฆฌ ๐
๐ฒ ๋ชฉํ: 1์ฃผ์ฐจ ๊ณผ์ (์๊ธฐ์๊ฐ ํ์ด์ง ํธ์คํ )๋ฅผ ์ํด์! ๊ทธ๋์ ์ํํ ํ๋ CSS์ ์นํด์ ธ ๋ณด์~~
โถ ๋ชฉ์ฐจ
๐ CSS ์ ์ธ ๋ฐฉ์
๐ ์ ํ์(Selector)
๐ text์ ๊ด๋ จ๋ ์์ฑ๋ค
๐ layout๊ณผ ๊ด๋ จ๋ ์์ฑ๋ค
๐ CSS ์ ์ธ ๋ฐฉ์
1. Inline ๋ฐฉ์
- html ์์ํ๊ทธ ๋ด์
style
attribute๋ฅผ ์ถ๊ฐํ์ฌ"property: value;"
ํํ๋ก ์ ์ธํ๋ ๋ฐฉ์- ๋ฐ๋ก ์์ฑ์๊ฐ ํ์์์ผ๋ฉฐ, ์ ์ง๋ณด์๊ฐ ์ด๋ ค์ ๊ถ์ฅํ์ง ์์
<p style="color: blue;">๋๋ ํ๋ ๊ธ์จ!</p>
2. Embedded ๋ฐฉ์
- html
<head>
๋ถ๋ถ์ ์์ฑํ๋ ๋ฐฉ์<style> p { color: green; } </style>
3. External ๋ฐฉ์
<head>
๋ถ๋ถ์<link>
๋ก ์ธ๋ถ CSS๋ฅผ ์ฐ๊ฒฐํ์ฌ ์ฌ์ฉํ๋ ๋ฐฉ์<head> <meta charset="UTF-8"> <link rel="stylesheet" href="./main.css"> </head>
๐ ์ ํ์(Selector)
- ์ ํ์๋? ์คํ์ผ ์ ์ฉ ๋ฒ์๋ฅผ ์ ํํ๋ ๋๊ตฌ!
๐ ๊ธฐ๋ณธ ์ ํ์(Basic selectors)
* (Universal selector)
* { color: pruple; } โถ ์ ์ฒด ์์์ ์ ์ฉ
ํ๊ทธ๋ช (Type selector)
h1 { text-align: center; }
.ํด๋์ค๋ช (Class selector)
.container { font-weight: bold; }
#id๋ช (ID selector)
#fruits { color: red; }
[์์ฑ๋ช ] (Attribute selector)
- [attr]: ํด๋น ์์ฑ์ ๊ฐ์ง ๋ชจ๋ ์์
- [attr="value"]: ํด๋น ์์ฑ, ๊ฐ์ด ์ผ์นํ๋ ์์
- [attr^="value"]: ํด๋น ์์ฑ์ ๊ฐ์ด 'value'๋ก ์์ํ๋ ์์
- [attr$="value"]: ํด๋น ์์ฑ์ ๊ฐ์ด 'value'๋ก ๋๋๋ ์์
- [attr*="value"]: ํด๋น ์์ฑ์ ๊ฐ์ 'value'๊ฐ ํฌํจ๋ ์์
[href^="http"] { text-decoration: underline } โถ href ์์ฑ์ ๊ฐ์ด 'http'๋ก ์์ํ๋ ์์๋ค์ ์ ์ฉ [class$="one"] { font-size: 16px } โถ class ์ด๋ฆ์ด 'one'์ผ๋ก ๋๋๋ ์์๋ค์ ์ ์ฉ
๐ ๋ณตํฉ ์ ํ์(Combinators)
A B (Descendant combinator)
- A ์์ ๋ด์ ์์นํ ๋ชจ๋ B ์์
A>B (Child combinator)
- A ์์์ ๋ฐ๋ก ์๋ ์์์ธ B ์์
A~B (General sibling combinator)
- ๊ฐ์ ๋ถ๋ชจ๋ฅผ ๊ฐ์ง๋ฉด์ A๋ฅผ ๋ค๋ฐ๋ฅด๋ ๋ชจ๋ B ์์
A+B (Adjacent sibling combinator)
- ๊ฐ์ ๋ถ๋ชจ๋ฅผ ๊ฐ์ง๋ฉด์ A ๋ฐ๋ก ๋ค์ ์์นํ๋ B์์
๐ ๊ฐ์ํด๋์ค ์ ํ์(Pseudo classes selectors)
:link ๋ฐฉ๋ฌธํ์ง ์์ ๋งํฌ์ผ ๋
:visited ๋ฐฉ๋ฌธํ ๋งํฌ์ผ ๋
:hover ๋ง์ฐ์ค๊ฐ ์ฌ๋ผ์ ์์ ๋
:active ํด๋ฆญ๋ ์ํ์ผ ๋
:focus ํฌ์ปค์ค๊ฐ ๋ค์ด์ ์์ ๋
๐ text์ ๊ด๋ จ๋ ์์ฑ๋ค
color
- keyword (์์๋ช )
(+) ํ์คํ ์ปฌ๋ฌ ๐
- rgb ์์
- #00000(black), #ffffff(white), #c0c0c0(silver) ๋ฑ
font-size
- pixel
- ๋ธ๋ผ์ฐ์ ์ ํฌ๊ธฐ์ ์๊ด์์ด ๋ ๋ฆฝ์ ์ด๊ณ ์ ํํ ๊ฐ
- (ํนํ ๋ชจ๋ฐ์ผ๊ณผ ๋ฐ์คํฌํ ๊ฐ์) ํธํ์ฑ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์๐ข
- keyword
- xx-small, x-small, small, medium, large, x-large, xx-large
- ์ฌ์ฉ์์ ๊ธฐ๋ณธ ํฐํธ ํฌ๊ธฐ์ ๋ฐ๋ผ ์๋์ ์ผ๋ก ์ ํด์ง
- em
- ์์์์์ ํฐํธ ํฌ๊ธฐ์ ๋ฐ๋ผ ์ ํด์ง๋ ๋์ ์ธ ๊ฐ
- ์์์์์ ํฐํธ ํฌ๊ธฐ=1em์ด ๋จ (์์์ ๋ฐ๋ผ)
- ๊ธฐ๋ณธ์ ์ผ๋ก 1em=16px
- rem
- ์ต์์์์(html)์ ํฐํธ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก 1rem
- em์ ์์ ์ค์ฒฉ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์!๐
*padding ๋ฑ์๋ em, rem์ ์ฌ์ฉํด์ ์ ์ฐํ ํ์ด์ง๋ฅผ ๊ตฌํํ ์ ์๋ค!
text-align
- left / right / center / justify / inherit
vertical-align
- ์ธ๋ผ์ธ ์์๋ ํ ์ด๋ธ ์ ๋ด์์์ ์์ง์ ๋ ฌ ์ค์ (๋ธ๋ก๋ ๋ฒจ ์์์๋ ์ํฅ์ ๋ฏธ์น์ง ์์!)
- baseline / sub / super / text-top / text-bottom / middle / top / bottom
- ์ ํํ ์ฐจ์ด๋ ์ฌ๊ธฐ ์ฐธ๊ณ !
text-decoration
- overline: ์์ค
- line-through: ์ทจ์์
- underline: ๋ฐ์ค
- underline overline: ์์๋๋ก ์ค
font-variant
- normal: ๊ธฐ๋ณธ๊ฐ
- small-caps: ์๋ฌธ์๋ฅผ ์ผ๋ฐ ๋๋ฌธ์๋ณด๋ค ์์ ๋๋ฌธ์๋ก ๋ง๋ฆ!
text-shadow
- ๊ฐ: offset-x(px) | offset-y(px) | blur-radius(px) | color (ํน์ color๊ฐ ๋งจ ์์ ์์นํด๋ ๋จ!)
๊ทธ ์ธ! (ํ์ํ ๋๋ง๋ค ๊ตฌ๊ธ๋ง~~)
font-family
font-style
font-weight
text-indent
text-shadow
text-transform
letter-spacing
๐ layout๊ณผ ๊ด๋ จ๋ ์์ฑ๋ค
display
- block / inline / none / flex
โญ {display: flex} ํํค์น๊ธฐ
- flexbox๋ ๋ฐ์ํ ์น ๋์์ธ ์ ๋งค์ฐ ์ค์ํ ๊ฐ๋ !
- ์ผ๋ฐ์ ์ผ๋ก ํ๋์ container์ ๋ค์์ item์ผ๋ก ๊ตฌ์ฑ
[html] <div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div>
- container์ ์ค์ ํ ์์ฑ
- display
- flex (ํ์)
- flex-direction
- row (defalut): ์ข์์ ์ฐ(๊ฐ๋ก)๋ก ๋ฐฐ์น
โถ ์ด ๊ฒฝ์ฐ main-axis=๊ฐ๋ก, cross-axis=์ธ๋ก- column: ์์์ ์๋(์ธ๋ก)๋ก ๋ฐฐ์น
- justify-content : ๊ฐ๋ก ๋ฐฐ์น๋ฐฉ์ (main-axis๊ฐ ๊ฐ๋ก์ผ ๊ฒฝ์ฐ)
- flex-start (default): ์ข์ธก ๋ฐฐ์น
- flex-end: ์ฐ์ธก ๋ฐฐ์น
- center: ๊ฐ์ด๋ฐ ๋ฐฐ์น
- space-between: ์ฌ์ด์ฌ์ด ๊ณต๋ฐฑ
- space-evenly: ์ฌ์ด์ฌ์ด+์๋ ๊ณต๋ฐฑ
- align-items : ์ธ๋ก ๋ฐฐ์น๋ฐฉ์ (cross-axis๊ฐ ์ธ๋ก์ผ ๊ฒฝ์ฐ)
- stretch (default): container height๋งํผ ์ฐจ์ง (container height ์ค์ ํ์)
- flex-start: ์์ ๋ฐฐ์น
- flex-end: ์๋์ ๋ฐฐ์น
- center: ๊ฐ์ด๋ฐ ๋ฐฐ์น
- item์ ์ค์ ํ ์์ฑ
- flex : main-axix ์์ ๊ณต๋ฐฑ์ด ์์ ๋ ๊ฐ item์ด ๊ณต๋ฐฑ์ ์ผ๋ง๋ ์ ์ ํ ์ง ์ง์
- ์๋ฅผ ๋ค์ด flex item ์ค ํ๋์ {felx: 1;}์ ์ง์ ํ๋ฉด ํด๋น item์ด ๋ชจ๋ ๊ณต๋ฐฑ์ ์ ์ ํ๋ฉฐ, ๊ฐ item์ 1์ ์ง์ ํ๋ฉด ๊ฐ์ ๋น์จ๋ก ๊ณต๋ฐฑ์ ์ ์ ํจ
visibility
- visible / hidden
โป {display: none} ๊ณผ {visibility: hidden}์ ์ฐจ์ด์ : hidden์ ์ปจํ ์ธ ๋งํผ ๋น๊ณต๊ฐ์ผ๋ก ํ์๋จ!
position
- static
์ผ๋ฐ์ ์ธ ๋ฌธ์ ํ๋ฆ์ ๋ฐ๋ผ ๋ฐฐ์น
top, right, bottom, left ์์ฑ์ด ์๋ฌด๋ฐ ํจ๋ ฅ์ ๊ฐ์ง ์์- relative
์์ ์ static ์์น๋ฅผ ๊ธฐ์ค์ผ๋ก top, right, bottom, left์ ์ํ ์๋์ ์์น์ ๋ฐฐ์น- absolute
์ผ๋ฐ์ ๋ฌธ์ ํ๋ฆ๊ณผ ๊ด๊ณ์์ด, ๊ฐ์ฅ ๊ฐ๊น์ด ์กฐ์ ์๋ฆฌ๋จผํธ๋ฅผ ๊ธฐ์ค์ผ๋ก ์๋์ ์์น์ ๋ฐฐ์น (๊ณ์ฐ์ด ๊น๋ค๋ก์ฐ๋ฏ๋ก ์ฌ์ฉ์ ์ฃผ์ ํ์!)- fixd
์คํฌ๋ฆฐ์ ๋ทฐํฌํธ(viewport: ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ง๋ ์์ญ)๋ฅผ ๊ธฐ์ค์ผ๋ก ๊ณ ์ ๋ ์์น์ ๋ฐฐ์น (์คํฌ๋กคํด๋ ์์ง์ด์ง ์์!)- sticky
static์ฒ๋ผ ๋ฌธ์์ ์ผ๋ฐ์ ํ๋ฆ์ ๋ฐ๋ผ ๋ฐฐ์น๋๋ ์คํฌ๋กค์ด ์๊ณ์ ์ ๋ค๋ค๋ฅด๋ฉด fixed์ ๊ฐ์ด ํ๋ฉด์ ๊ณ ์ ๋จ
โ top ์์ฑ ์ค์ ํ์!โ
float
- ์ด๋ฏธ์ง๋ width๊ฐ ์ ํด์ง ๋ฐ์ค ๋ฑ์ ๋ค๋ฅธ ์ปจํ ์ธ ์ ์ด๋ป๊ฒ ๋ฐฐ์นํ ์ง ์ค์
- left / right / none(default: block์ผ๋ก ์ฒ๋ฆฌ๋๋ ๋ฏ๋ก ์ฒ๋ฆฌ๋๋ ๋ฏ)
overflow
- visible(default): ๊ทธ๋ฅ ํ์ด๋๊ฐ
- hidden: ๋์น๋ฉด ์ ๋ณด์
- scroll: ์คํฌ๋กค ๋ฐ ์์ฑ (ํญ์)
- auto: ๋์น๋ฉด ์คํฌ๋กค ๋ฐ ์์ฑ
*overflow๊ฐ ์๋ํ๊ธฐ ์ํด์๋ ๋ธ๋ก๋ ๋ฒจ ์ปจํ ์ด๋์ ๋์ด(height or max-height)๋ฅผ ์ค์ ํ๊ฑฐ๋ white-space๋ฅผ nowrap์ผ๋ก ์ค์ ํด์ผ ํจ!
๐โโ๏ธ์ฐธ๊ณ ํ ์๋ฃ
CSS selectors - CSS: Cascading Style Sheets | MDN
CSS3 Selector | PoiemaWeb
CSS ํ๋ ์ค๋ฐ์ค(Flexbox) ์ดํดํ๊ธฐ | Engineering Blog by Dale Seo
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([TIL] CSS ๊ธฐ์ด ์ ๋ฆฌ ๐), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@dosilv/TIL-CSS-๊ธฐ์ด-์ ๋ฆฌ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค