[TIL] 50projects

강의 출처 : Udemy 50 mini projects - Brad Traversy

1강 Expanding Cards

• flex column에서 justify content:center 이 적용되지 않는 경우 height를 주지 않아서 그런 것. (height : 100vh)
• overflow : hidden (scroll bar를 생략한다.)
• element : nth-of-type(n)

.panel:nth-of-type(4)
{display : none;};

• transition-delay

2강 Progress Steps

• button 기능 구현 막기

<button disabled></button>

• button의 cursor사용 막기

button:disabled{
cursor : not-allowed};

• button의 disabled값은 js에서 불리언이다.

button.disabled =true;

• ::before - 효과적용하려면 꼭 content 적어줄 것

.progress-container::before{
content="";
background-color:#fff;
height : 3px;
width :100%;}

• div로 border 만들 때 굳이 border 만들지 않고 background color, width, height 만 줄 것

3강 Rotating Navigation

• transform-origin - rotate()와 같은 transform을 어디에서 시작할 것인지 기준점을 제시해줌

nav{
transform:rotate(30deg);
transform-origin : top left;}

.nav2{
transform:rotate(30deg);
transform-origin : 40px 40px;}

• p와 같은 단락 줄간격 주고 싶을 때는 line-height주면 된다!
• icon과 list 간의 간격 주고 싶다면 icon 자체에 margin 주면 된다!
• list 각각 다르게 위치를 배열하고 싶을 땐, + 기호 이용하기

nav ul li + li{
margin-left:15px;}
nav ul li + li + li{
margin-left:30px;}

• text-transform : 'uppercase'
• 형제 관계는 + 붙혀주는 것 잊지말기 (부모자식 관계에는 안붙힘! )

.container.show-nav + nav li{
transform : translateX(0);
transition-delay : 0.3s;}

4강 Hidden Search Widget

• linear-gradient

background-image : linear-gradient(90deg, #7d5fff, #7158e2);