๐ ์ดํํ 12hour
๐๐ผ ์ ๋ง ์ด์ฌํ ๊ณต๋ถ
๐๐ผ -
The Web Developer Bootcamp 2021
MDN CSS Reference
HTML color codes
CSS Font Stack
colors
Specificity Calculator
๋๋ฆผ์ฝ๋ฉ CSS ๋ ์ด์์ ์ ๋ฆฌ display, position ์์ฑ
CanIUse
Jsfiddle
cubic-bezier
<head>
<title>Forms demo</title>
<!--link+tab-->
<link rel="stylesheet" href="styles/app.css">
</head>
p {color: rgb(250, 128, 114);}
h1 {background-color: magenta;}
h2 { #FF7F50 ;}
โ
Our First CSS Exercise(Done)
RGB: 0~255 ( , , )
Hexadecimal: 0~9 & A~F (#r r g g b b), ff=255
#000000 = #000
#cc55ee = #c5e
hsl (์ด๊ฑด ์์ง ๋ฐฐ์ธ ๋๊ฐ ์๋)
center, right, left
normal(400%), bold(700%)
blue wavy underline,#ff0028 overline, line-through, none
normal, 2.5, 150%, 32px
normal, 10px
px(absolute uint), em, rem, %(relative units-common)
font-family: Gill Sans Extrabold, sans-serif, Arial;
Gill Sans Extrabold: First choice
Sans-serif: backup of fallback font
Arial: Third option
selector { property : value; }
select everythinf, but not common and inefficient
* {color: balck;}
h1, h2 { color: magenta; }
unique identifier, ๋๋ฌด ๋ง์ผ๋ฉด ๋ณ๋ก์
<button id="signup">Sign Up</button>
#signup{ background-color: #1d3557; }
common for typical website. id๋ณด๋ค ํจ์ฌ ์์ฃผ ์ฌ์ฉํจ
<span class="complete">dogs</span>
.complete { color: green; }
๐ธ option+click: ๋ค์ค ์ปค์
โ
Basic Selectors Practice(Done)
li a { color: teal; }
.post a { color: teal; }
footer a { color: red; }
anchor tags inside of lis, so no lis will be style, only anchor tags will be styled.
โ
Descendent Combinator Practice(Done)
<input type="text">
<button>login</button>
input+ button { color: red; }
-> input์ ์ ๋ฐ๋๊ณ button์ด ๋ฐ๋
not chidern, parents, for nested
one after the other
div > li { color: white; }
input[type="text"] { width: 300px; color: yellow; }
section[class="post"] { background-clor: black; }
section.post { background-color: black; }
botton:active { color:white;}
input[type="radio"]:checked {box-shadow: 0 0 0 3px orange; }
botton:hover { color:white;}
.post:nth-of-type(3){ color: red; }
.post:nth-of-type(3n){ color: red; }
์๋ ์ธ๋ฒ์งธ๋ง, ์๋๋ ์ธ๋ฒ์งธ๋ง๋ค
โ
Checkerboard Exercise
์ธ๋ฏธ์ฝ๋ก ํ๋๋ง ์จ๋ ์ ์ฉ๋๊ธด ํจ
h2::first-letter { font-size:40px; }
p::first-line { color:purple; }
p::selection { background-color: yellow; }
์๋ก ๋ค๋ฅธ ๋ด์ฉ์ด ์ถฉ๋ํ๋ฉด ๋์ค ๊ฒ์ด ์ ์ฉ๋จ (overwrite)
linked css๋ ๋ฌธ์ ์์์ ๋ฐ๋ผ ๋์ค ๊ฒ ์ ์ฉ
selector๊ฐ specificํ ์๋ก ์ด๊น
element selector๊ฐ ์ฌ๋ฌ๊ฐ์ผ์๋ก specificํ ๊ฑธ๊น?
-> id > class > element ์์ผ๋ก specific
inline style์ ์ข ํผ๋์ค๋ฌ์ธ ์ ์์ด์ ์ ์
์ ์, ์ฐ์ง ๋ง. ignore specificity
inherit from the closest parent that does have a color set
๋ง์ฝ inherit ํ์ง ์๋๋ค? ->
button, input { color: inherit; }
width
height
์ด ์ธ ๊ฐ ๋ค ์จ์ผ border ๋์ด
border-width: 5px;
border-color
border-style
width 100px+ border 5px = width 110px ์ ํด๊ฒฐํ๋ ค๋ฉด
box-sizing: border-box;
border-style: ์ ์ค๋ฅธ์ชฝ ์๋ ์ผ์ชฝ (์๊ณ๋ฐฉํฅ)
border-left-width: 8px;
(common shorthand: width style color)
border: medium dashed green;
border-left-style: dotted;
border-radius: 8%;
border-radius: 50%; (circle)
โ
Box model practice(Done)
padding-left: 30px
margin shorthand property is same as padding (above image)
blue- content/ orange- margin/ green- padding
body ์์ฒด์ ์ด๋ ์ ๋ margin ์ค์ ๋ผ ์์ด์ ์น ๊ฐ๋ฐ ํ ๋ ์ด๊ฑฐ ๋จผ์ ์ฐ๊ณ ์์ํ๊ธฐ๋ ํจ
body {margin: 0}
margin-left๋ฅผ 50์ผ๋ก ์ค์ ํ๋ฉด box๊ฐ ์ค๋ฅธ์ชฝ์ผ๋ก ๊ฐ๋๋ฐ
margin-top์ 50์ผ๋ก ์ค์ ํด๋ box๊ฐ ๋ฐ์ผ๋ก ๊ฐ์ง ์๋๋ค.
๋ ์ฉ? ์? -> Display ๋๋ฌธ์
[Post-Chorus]West Coast loveNever left my mindWest Coast loveNever left my mind
[Bridge] I just need you to ride for me All you gotta do is spend time on me Need me a man that'll die for me Oh, oh yeah
bridge์ margin์ด๋ padding๋ฃ์ผ๋ฉด bridge๋ ์ปค์ง๊ธด ํ์ง๋ง space(?)๊ฐ ์ปค์ง๋ ๊ฑด ์๋, ๋ค๋ฅธ ๋ฌธ์์ด์ ๋ฌด์๋นํจ ์๋? inline element๊ธฐ ๋๋ฌธ, block element๋ ๊ทธ๋ ์ง ์์. respectede๋จ.
inline
block
inline-block -> ์ด๊ฑฐ ์ฌ์ฉํ๋ฉด width, height, margin๋ respect๋จ
display: none -> ์จ๊ธธ ์ ์์
by far the most commonly used absolute unit, but not recommended for responsive websites.
always relative to some other value.
value from the parent, value from the element itself,
width: half the width of the parent
line-height: 50% - half the font-size of the element itself
with font-size, 1em=font-size of the parent, 2em=twice the font-size of the parent.
with other properties, 1em=the computed font-size of the element itself.
h2{ font-size: 5em; margin-left: 1em; }
์ด๋ ๊ฒ ํ๋ฉด margin-left size๊ฐ font-size์ 1/5์ธ ๊ฒ ์๋๋ผ ๊ฐ์ ๊ฒ
button {
font-size: 1em;
padding: 0 1em;
border-radius: 0.5em; }
em์ ๋ฌธ์ ์ -
<ul><li>Ravioli<ul><li>Spasnach Ricotta</li></ul></li></ul>
์ฝ๋์์ em ์ฌ์ฉํ๋ฉด em์ parent์ font-size๋ฅผ ๋ฐ์ผ๋ฏ๋ก ๊ธ์๊ฐ ๋๋ฌด ์ปค์ง
relative to the root html element's font-size. Often easier to work with.
root font-size is 20px, 1rem=always 20px, 2rem=always 40px
root font-size=html lang="en"์์ ์ด
๊ทธ๋ ๋ค๋ฉด root font-size๋ ์ด๋ป๊ฒ ๋ฐ๊ฟ๊น?-> html { font-size: 10px }
rgba (0,209, 112, 0.5) -> alpha channel (transparency 0~1), ๊ธ์๊น์ง ํฌ๋ช
ํด์ง์ง ์์ background์๋ง ์ ์ฉ
#00cca0FF; -> ๋ง์ง๋ง FF๊ฐ alpha channel, 00์ transparency 0=completely transparent, FF๋ 1
opacity: 0.5 -> entire element, div์ ์ ์ฉ๋จ
position: static (default)
position: relative; top: 100px; left:-100px;
position: absolute; -> relative to it's ancestor
sticky์ fixed์ ์ฐจ์ด
-> ๐ก๐ฅฐ๐ก๐ฅฐ!!!! fixed- ์ ๋์ ์์น, ์ฒ์๋ถํฐ ์์ง์ vs sticky- ํน์ ์ง์ ์ดํ ๊ณ ์
block level ๋ํ์ฃผ์ : div -> ๊ธฐ๋ณธ๊ฐ์ display๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅ
inline level ๋ํ์ฃผ์ : span -> ๊ธฐ๋ณธ๊ฐ์ display๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅ
span์ ์์ ๋ด์ฉ์ด ์์ด์ผ ํ๊ธฐ๋๋ค
inline์ ๋ฌผ๊ฑด(์ปจํ
์ธ ) ์์ฒด๋ง์ ๊พธ๋ฉฐ์ค๋ค
inline์๋ค๊ฐ width, height ์ ํ๋ฉด ๊ฐ๋ฌด์ํจ
-> inline-block์ ์ ์ฉ๋จ
inline ๋ฌผ๊ฑด
inline-block ์์๋ฐ ํ ์ค์ ์ฌ๋ฌ ๊ฐ ์ง์ด ๊ฐ๋ฅ
block ํ ์ค์ ํ๋์ฉ๋ง ์ง์ด ๊ฐ๋ฅํ ์์
position ์ดํดํ๋ฉด ๋ฐ์ค ๋ฐฐ์น์ ์์ฃผ ์ข๋ค
position: static (default)๋ก ๋ผ ์์ผ๋ฉด ์์น ์ด๋ top:20px, left:20px ์ ๋จ
-> html์ ์ ์๋ ์์๋๋ก ๋ธ๋ผ์ฐ์ ์ ์์ฐ์ค๋ฝ๊ฒ ๋ณด์ฌ์ง๋ ๊ฒ
[position]
relative : ์๋ ์์ด์ผ ๋๋ ์๋ฆฌ์์ ์๋์ ์ผ๋ก ์ด๋ํจ
absolute : ๋ด ์์ดํ
์ด ๋ด๊ฒจ์๊ณ ๊ฐ์ฅ ๊ฐ๊น์ด์ ์๋ ๋ฐ์ค ์์์ ์์น ๋ณ๊ฒฝ์ด ์ผ์ด๋จ
fixed : ์์ ์์์ ์์ ํ ๋ฒ์ด๋์ ์๋์ฐ ์์์ ์์ง์, ์น ํ์ด์ง ์์์ ์์ง์
sticky : ์๋ ์๋ ์๋ฆฌ์์ ์คํฌ๋กค๋ง ํด๋ ๊ณ์ ์์
css์์ ๊ธฐ๋ฅ ์ธ ๋ ํญ์ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ํธํ์ด ๋๋์ง ํธํ์ฑ ์ฌ๋ถ๋ฅผ ๊ฒ์ฌํด์ผ ํ๋ค
์ฌ๋ถ ๊ฒ์ฌ ๋ฐฉ๋ฒ
1. MDN ํ์ด์ง ๊ฐ์ฅ ํ๋จ Browser compatibility
2. CanIUse
์ธํฐ๋ท ์ต์คํ๋ก๋ฌ ๋ฌด์ํ๊ณ ๊ฐ๋ฐํ๊ณ ์์ (ํด์ธ์์)
.circle { width: 300px; heigh: 300px; background-color: magenta; transition: 1s;}
.circle:hover { background-color: cyan; border-radius: 50% }
transition single out ํ ์ ์์
transition: background-color 3s; ์ด๋ฐ ์์ผ๋ก ๋ฐฑ๊ทธ๋ผ์ด๋๋ง ์ฒ์ฒํ ๋ฐ๋๊ฒ
property name, duration, timing function, delay
delay 1์ด ๋ฃ๊ธฐ, duration์ 3์ด
transition: all 3s 1s;
๊ฐ ๋ค๋ฅด๊ฒ ํ๊ธฐ
transition: background-color 1s, border-radius 2s;
animation ๋ฃ๊ธฐ
transition: margin-left 3s;
but, ์ ๋๋ฉ์ด์
๋ง๋ค ๋ ์ข์ ๋ฐฉ๋ฒ์ด ์๋, ๋ค์ ์๊ฐ์ ์๋ ค ์ฃผ์ ๋ค ํจ
linear: linear transformation
ease-in: starts out slow and then speeds up
steps(6, end): steps
๊ฒฐ๋ก : transition์ property๋ฅผ single outํด์ ์ฌ์ฉํ๋ ๊ฒ ์ข๋ค
margin: auto; -> center ์ ๋ ฌ
how to rotate->
rotate: deg(degree), red(rediant)
-> transform: rotate(45deg);
transform-origin: bottom right; -> transform origin
rotateX()
transform: scale(0.5); ->shrinking by a factor of half
transform: scale(2,1); ->height is same, width is scaled by 2
translate() ->move
transform: translateX(200px);
transform: translateY(-200px);
skew()
transform: skew(30deg, 5deg); -> animation ๋ง๋ค๊ธฐ ์ข์
section ์ ์ฉํ๋ฉด parent element ๋ฟ ์๋๋ผ content๊น์ง ์ ์ฉ๋จ
โ
Fancy Button Hover Effect CodeAlong(Done)