슈거

분류 전체보기

• [CSS] counter 사용

  HTML & CSS 2018. 11. 21. 16:15

  .owl-dots { counter-reset: dots; .owl-dot { &:before { counter-increment: dots; content: counter(dots); } //01 02 ... 09 10 &:nth-child(-n+9):before { content: "0" counter(dots); } } }

  Read More
• [CSS] 요소 개수별로 속성 적용

  HTML & CSS 2018. 11. 21. 16:08

  //개수에 따른 속성 적용 .menu-list { a:nth-child(1):nth-last-child(1), a:nth-child(1):nth-last-child(1) ~ a { width: 100%; } a:nth-child(1):nth-last-child(2), a:nth-child(1):nth-last-child(2) ~ a { width: 50%; } a:nth-child(1):nth-last-child(3), a:nth-child(1):nth-last-child(3) ~ a { width: 33.333%; } a:nth-child(1):nth-last-child(4), a:nth-child(1):nth-last-child(4) ~ a { width: 25%; } a:nth-child(1):nt..

  Read More
• [SASS] for문 활용

  HTML & CSS 2018. 11. 21. 15:59

  li { float: left; width: calc((100% - 6.6rem) / 4); margin-right: 2.2rem; height: 27rem; @for $i from 1 through 4 { &:nth-of-type(#{$i}) { background: { image: url("../../assets/images/cp_label_#{$i}.png"); position: calc(100% - 1rem) 11.5rem; repeat: no-repeat; size: auto; }; .bg-area { border-top-left-radius: .6rem; border-top-right-radius: .6rem; background: { image: url("../../assets/images/..

  Read More
• [SASS] 자주 쓰는 @mixin 믹스인

  HTML & CSS 2018. 11. 21. 15:48

  @mixin ellipsis($lines: 1) { // 인자 값의 기본 값은 1 @if ($lines == 1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; } }

  Read More