class 10-11 : CSS / Node Express

yoneeki·2023년 1월 16일

목록 보기

8/31

SCSS

SCSS에서의 반복문

 /*
  &--visual01 {
    background-image: url("../images/main/visual01.jpg");
  }
  &--visual02 {
    background-image: url("../images/main/visual02.jpg");
  }
  &--visual03 {
    background-image: url("../images/main/visual03.jpg");
  }
  */
  
  @for $i from 1 through 3 {
    &--visual0#{$i} {
      background-image: url("../images/main/visual0#{$i}.jpg");
    }
  }

 /*
      &:nth-child(1) {        background-position: 0 0;      }
      &:nth-child(2) {        background-position: -240px 0;      }
      &:nth-child(3) {        background-position: (-240px * 2) 0;      }
      &:nth-child(4) {        background-position: (-240px * 2) 0;      }
      &:nth-child(5) {        background-position: (-240px * 2) 0;      }
*/
            
@for $i from 1 through 5 {
      &:nth-child(#{$i}) {
       background-position: (-240px * ($i - 1)) 0;
      }
  }

@for $i from 1 through 3 {
  &:nth-child(#{$i}) a {
    background-position: (-110px * ($i - 1)) 0;
  }
}

CSS

word-break

text-overflow: ellipsis

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

화면이 줄어들면 문장이 ....으로 줄어듦

@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
-> @include ellipsis(); 로 scss에서 사용할 수도 있음

여러 줄을 기준으로 ellipsis 하기

패딩이 먹혀 있으면 작동 안 할 수도 있음 (대안 : a에 멀티 엘립시스를 주고 싶다면 그 상위 요소, 예를 들자면 li에다가 padding을 옮겨서 주자)

// 여러 줄 엘립시스
@mixin multiEllipsis($line: 2, $lineHeight: 1.5) {
  // line : 몇 줄을 기본으로 하겠다
  display: -webkit-box;
  line-height: $lineHeight;
  height: $lineHeight * $line * 1em; // em은 글자 하나의 높이
  overflow: hidden;
  -webkit-line-clamp: $line; // 몇 줄 단위를 기본으로 줄 바꿈을 하겠느냐
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing : content-box; 
}

CSS 계산

header의 높이를 $h로 고정한다. 내부의 ul, li, a 등 직속 자손의 높이도 $h로 고정한다. li의 자손들은 높이가 잘려서 보이지 않는다.
js 함수를 통해 on 클래스로 높이를 준다. 그러면 마우스의 호버에 따라 on 클래스($h+a의 높이를 가짐)가 생겨서 잘려 있던 자손들이 보이게 된다.