TIL006_210325

JIYOONยท2021๋…„ 3์›” 25์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
6/42
post-thumbnail

TIL

๐Ÿ‘๐Ÿผ ๊ฐ์ƒ

๐Ÿ“™ ์—ดํ’ˆํƒ€ 12hour
๐Ÿ‘๐Ÿผ ์ •๋ง ์—ด์‹ฌํžˆ ๊ณต๋ถ€
๐Ÿ‘Ž๐Ÿผ -

๐Ÿš€ ๋ชฉํ‘œ

  • ๋…ธ๋งˆ๋“œ ์ฝ”๋” React ๋ณต์Šต (-3/27)
  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (110/682)
  • ๋งค์ผ ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (5/30, 3.25์™„๋ฃŒ)
  • 3.24 ๋ฐœ๊ฒฌ ๋…ธ์…˜์œผ๋กœ ์˜ฎ๊ธฐ๊ธฐ
  • SSAFY ์–ผ๋ฆฌ๋ฒ„๋“œ ์ƒ์‹œ๋“ฑ๋ก (-3/26)
  • 3.25์—๋Š” 5์‹œ ๊ธฐ์ƒ flexํ•˜๊ธฐ(7:30 ๊ธฐ์ƒ)

๐Ÿ’ก ๋ฐœ๊ฒฌ!

์œ„์ฝ”๋“œ

[๋งํฌ ๋ชฉ๋ก]

The Web Developer Bootcamp 2021
MDN CSS Reference
HTML color codes
CSS Font Stack
colors
Specificity Calculator
๋“œ๋ฆผ์ฝ”๋”ฉ CSS ๋ ˆ์ด์•„์›ƒ ์ •๋ฆฌ display, position ์™„์„ฑ
CanIUse
Jsfiddle
cubic-bezier

๐Ÿ“ฃ The Web Developer Bootcamp 2021: 6.59-9.96

CSS Color

<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 (์ด๊ฑด ์•„์ง ๋ฐฐ์šธ ๋•Œ๊ฐ€ ์•„๋‹˜)

CSS Text Properties

text-align

center, right, left

font-weight

normal(400%), bold(700%)

text-decoration

blue wavy underline,#ff0028 overline, line-through, none

line-height

normal, 2.5, 150%, 32px

letter-spacing

normal, 10px

font-size

px(absolute uint), em, rem, %(relative units-common)

font-family

font-family: Gill Sans Extrabold, sans-serif, Arial;
Gill Sans Extrabold: First choice
Sans-serif: backup of fallback font
Arial: Third option

CSS Selectors

selector { property : value; }

universal selector

select everythinf, but not common and inefficient

* {color: balck;}

element multiple selector

h1, h2 { color: magenta; }

ID selector

unique identifier, ๋„ˆ๋ฌด ๋งŽ์œผ๋ฉด ๋ณ„๋กœ์ž„

<button id="signup">Sign Up</button>
#signup{ background-color: #1d3557; }

class selector

common for typical website. id๋ณด๋‹ค ํ›จ์”ฌ ์ž์ฃผ ์‚ฌ์šฉํ•จ

<span class="complete">dogs</span>
.complete { color: green; }

๐Ÿ”ธ option+click: ๋‹ค์ค‘ ์ปค์„œ

โœ… Basic Selectors Practice(Done)

Descendant selector

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)

Adjacent selector (adjacent combinator)

<input type="text">
<button>login</button>
input+ button { color: red; }

-> input์€ ์•ˆ ๋ฐ”๋€Œ๊ณ  button์ด ๋ฐ”๋€œ
not chidern, parents, for nested
one after the other

Direct child

div > li { color: white; }

Attribute selector

input[type="text"] { width: 300px; color: yellow; }
section[class="post"] { background-clor: black; }
section.post { background-color: black; }
  

Pseudo Classes

:active

botton:active { color:white;}

:checked

input[type="radio"]:checked {box-shadow: 0 0 0 3px orange; }

:first

:first-child

:hover

botton:hover { color:white;}

:not()

:nth-child()

.post:nth-of-type(3){ color: red; }
.post:nth-of-type(3n){ color: red; }

์œ„๋Š” ์„ธ๋ฒˆ์งธ๋งŒ, ์•„๋ž˜๋Š” ์„ธ๋ฒˆ์งธ๋งˆ๋‹ค

:nth-of-type()

โœ… Checkerboard Exercise

Pseudo elements

์„ธ๋ฏธ์ฝœ๋ก  ํ•˜๋‚˜๋งŒ ์จ๋„ ์ ์šฉ๋˜๊ธด ํ•จ

::after

::before

::first-letter

h2::first-letter { font-size:40px; }

::first-line

p::first-line { color:purple; }

::selection

p::selection { background-color: yellow; }

CSS Cascade

์„œ๋กœ ๋‹ค๋ฅธ ๋‚ด์šฉ์ด ์ถฉ๋Œํ•˜๋ฉด ๋‚˜์ค‘ ๊ฒƒ์ด ์ ์šฉ๋จ (overwrite)
linked css๋„ ๋ฌธ์„œ ์ˆœ์„œ์— ๋”ฐ๋ผ ๋‚˜์ค‘ ๊ฒƒ ์ ์šฉ

Specificity

selector๊ฐ€ specificํ•  ์ˆ˜๋ก ์ด๊น€
element selector๊ฐ€ ์—ฌ๋Ÿฌ๊ฐœ์ผ์ˆ˜๋ก specificํ•œ ๊ฑธ๊นŒ?
-> id > class > element ์ˆœ์œผ๋กœ specific


inline style์€ ์ข€ ํ˜ผ๋ž€์Šค๋Ÿฌ์šธ ์ˆ˜ ์žˆ์–ด์„œ ์•ˆ ์”€

Chrome Dev Tools

!important

์•ˆ ์”€, ์“ฐ์ง€ ๋งˆ. ignore specificity

inheritance

inherit from the closest parent that does have a color set
๋งŒ์•ฝ inherit ํ•˜์ง€ ์•Š๋Š”๋‹ค? ->

button, input { color: inherit; }

The CSS Box Model

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 ๋•Œ๋ฌธ์—

Display property

[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 -> ์ˆจ๊ธธ ์ˆ˜ ์žˆ์Œ

CSS Units

px

by far the most commonly used absolute unit, but not recommended for responsive websites.

percentage

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

em

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๋ฅผ ๋ฐ›์œผ๋ฏ€๋กœ ๊ธ€์ž๊ฐ€ ๋„ˆ๋ฌด ์ปค์ง

rem (root em)

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 }

Opacity & The Alpha Channel

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 Property

position: static (default)
position: relative; top: 100px; left:-100px;
position: absolute; -> relative to it's ancestor

  • fixed=sticky? ์—ฌ๊ธฐ์„œ๋Š” fixed๊ฐ€ sticky์ฒ˜๋Ÿผ ์“ฐ์ธ๋‹คํ—ท๊ฐˆ๋ฆฌ๊ฒŒ...

sticky์™€ fixed์˜ ์ฐจ์ด
-> ๐Ÿ’ก๐Ÿฅฐ๐Ÿ’ก๐Ÿฅฐ!!!! fixed- ์ ˆ๋Œ€์  ์œ„์น˜, ์ฒ˜์Œ๋ถ€ํ„ฐ ์›€์ง์ž„ vs sticky- ํŠน์ • ์ง€์  ์ดํ›„ ๊ณ ์ •


๋“œ๋ฆผ์ฝ”๋”ฉ ์—˜๋ฆฌ ๊ฐ•์˜ ์ฐธ๊ณ 

  • ํ˜„์—…์—์„œ๋Š” ๋ฐ•์Šค ์œ„์— ๋ฐ•์Šค ์˜ฌ๋ฆฌ๋Š” stacking์ด ๋งŽ๋‹ค

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

์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ ๋ฌด์‹œํ•˜๊ณ  ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ์Œ (ํ•ด์™ธ์—์„œ)


CSS Transition

.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, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋งŒ๋“ค ๋•Œ ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์•„๋‹˜, ๋‹ค์Œ ์‹œ๊ฐ„์— ์•Œ๋ ค ์ฃผ์‹ ๋‹ค ํ•จ

timing function

linear: linear transformation
ease-in: starts out slow and then speeds up
steps(6, end): steps

๊ฒฐ๋ก : transition์€ property๋ฅผ single outํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ์ข‹๋‹ค

CSS Transform

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)

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