TIL006_210325
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
- cubic-bezier: ?
결론: 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)
Author And Source
이 문제에 관하여(TIL006_210325), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@keepcalm/TIL006210325저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
