반응형

온라인 강의 299

81. Building the Hotel Overview - Part 2

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

80. Building the Hotel Overview - Part 1

넓은 공간이 필요한 게 아니라면 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..

79. Building the Navigation - Part 2

계속 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..

78. Building the Navigation - Part 1

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..

77. Building the Header - Part 3

아래 기능을 새롭게 알았다 & > * {} 이렇게 하면 직계 자식 요소들에게만 적용되는 것! .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..

76. Building the Header - Part 2

형제 요소를 선택 &__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..

75. Building the Header - Part 1

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..

74. Building the Overall Layout

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

반응형