차근차근 배움터

https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com can I use ... ? 지금 사용 가능한 지 호환브라우저를 보여줌

flex-wrap 과 내가 모르는 mask-image 와 mask-size 에 대해서 배운다. grow 늘어나는 것도 원하지 않고 (0) shrink 줄어드는 것도 원하지 않을 때 (0) 그리고 크기는 전체 너비의 60%로 flex: 0 0 60%; 남는 공간을 모두 차지하고 싶을 때 flex: 1; 여기까지 완성!

svg가 inline 요소와 같은 속성이기 때문에 수직 중앙 정렬 시 살짝 공간이 생길 수 있다 align-self 요소의 높이를 늘리고 싶을 때, height 100%을 생각했지만 flex 속성을 이용하고 있다면 간단하게 align-self를 이용할 수 있다! 아래까지 완 button 속성에 focus 하는 것이 가능한가 했더니 마지막으로 누른 커서가 어디에 있느냐에 따라 다른 차이가 있었다 components.scss //////////////////////////////////////////////// /// LOGO .logo { height: 3.25rem; margin-left: 2rem; } //////////////////////////////////////////////// /// SEA..

넓은 공간이 필요한 게 아니라면 img 는 block 또는 inline-block 이어야 한다. margin auto의 놀라운 기능 별 이모티콘에 auto를 줬을 뿐인데 오른쪽의 공간을 넓직하게 만들었다 &__stars { // flex: 1; margin-right: auto; background-color: red; } _components.scss //////////////////////////////////////////////// /// LOGO .logo { height: 3.25rem; margin-left: 2rem; } //////////////////////////////////////////////// /// SEARCH .search { flex: 0 0 40%; display: f..

계속 color 속성을 입력하는 것이 아니라 상위 요소를 그대로 가져올 수 있다 말 그대로 현재의 색상을 받아서 적용하는 것이기 때문에 hover 와 같은 효과에 주는 다른 색상도 자동으로 적용된 // fill: var(--color-grey-light-3); fill: currentColor; 중앙이 기본 세팅이기 때문에 중앙에서 scaleY가 늘어나는 것을 볼 수 있다 기존에 있었던 종류들이 아닌 아래와 같이 처음에는 빠르고 뒤에는 느려지는 형태로 사용 https://cubic-bezier.com/#1,0,0,1 cubic-bezier.com cubic-bezier.com z-index가 먹히지 않을 때는, postion 값이 설정되어 있는지 확인해보자 transition: transform 0.2s..

svg icon 사용법 svg 아이콘 이름이 icon-home인 경우 아래와 같이 작성 transform-origin 애니메이션이 시작되는 방향을 설정할 수 있다 여기까지 완성 _layout.scss .container { max-width: 120rem; margin: 8rem auto; background-color: var(--color-grey-light-1); box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.3); min-height: 50rem; } .header { font-size: 1.8rem; height: 7rem; background-color: #fff; border-bottom: var(--color-grey-light-2); display: flex; j..

아래 기능을 새롭게 알았다 & > * {} 이렇게 하면 직계 자식 요소들에게만 적용되는 것! .user-nav { background-color: greenyellow; display: flex; align-items: center; & > * { // 직계자식 요소들만 적용 } } 여기까지 완성 components.scss //////////////////////////////////////////////// /// LOGO .logo { height: 3.25rem; margin-left: 2rem; } //////////////////////////////////////////////// /// SEARCH .search { flex: 0 0 40%; display: flex; align-items..

형제 요소를 선택 &__input:focus + &__button { } svg 아이콘 색상 바꾸는 법 fill: var(--color-primary); components.scss //////////////////////////////////////////////// /// LOGO .logo { height: 3.25rem; margin-left: 3rem; } //////////////////////////////////////////////// /// SEARCH .search { flex: 0 0 40%; display: flex; align-items: center; justify-content: center; &__input { font-family: inherit; font-size: in..

Icon font 보다 svg img가 더 나은 대안으로 사용되고 있다. icomoon.com 아이콘을 무료로 사용할 수 있는 유용한 웹사이트다 _components.scss //////////////////////////////////////////////// /// LOGO .logo { height: 3.25rem; } //////////////////////////////////////////////// /// SEARCH .search { &__input { } &__button { } &__icon { height: 2rem; width: 2rem; } } /// //////////////////////////////////////////////// /// USER NAVIGATION .use..

첫번째 레이아웃은 컨테이너 하나가 중앙에 정렬되어 있다 그리고 헤더가 있고 헤더 안에 로고, 서치바, 기타 네비게이션 아이콘들이 있다 그리고 아래 사이드바가 있고, overview가 오른쪽에 있다. max-width 를 사용하는 이유 viewport가 120rem 보다 작으면 줄어들 수 있기 때문 변수는 색상 뿐만 아니라 그림자 속성 같은 것도 저장할 수 있다 미묘하게 다른 회색을 지정했다. flex: 0 0 18%; grow 0 > 늘어나지도 않고 shrink 0 > 줄어들지도 않고 18%를 유지