Hangun's World – Blog

[카테고리:] HTML/CSS

  • CSS 이전의 엘리먼트 선택하기

    CSS 에서 일반 형제 선택자 (General Sibling Selector ~)와 인접 형제 선택자 (Adjacent Sibling Selector +)를 사용하여, 특정 엘리먼트의 뒤 또는 바로 뒤에 있는 엘리먼트들을 선택할 수 있습니다. 그러나 앞에 위치한 엘리먼트를 선택할 수 있는 방법은 없었죠.
    CSS Combinators 참고

    그런데 CSS Selectors Level 4 에서 추가된 :has() 수도-클래스(pseudo-class)를 응용하면 앞의 엘리먼트들 또는 직전의 엘리먼트를 선택할 수 있습니다.

    
  
  
  
  
  
  
  

    .parent{display:flex;flex-direction:row;gap:10px;justify-content:center;padding:20px;}
.child{padding:20px;border:1px solid orange;font-size:32px;}
.child:before{content:"child";}

.child.target{background-color:orange;}
.child.target:before{content:"target";}

.target ~ .child{background-color:lightgrey;}
.target ~ .child:before{content:"after";}

.target + .child{background-color:grey;}
.target + .child:before{text-transform:uppercase;color:white;}

.child:has(~ .target){background-color:greenyellow;}
.child:has(~ .target):before{content:"before";}

.child:has(+ .target){background:green;}
.child:has(+ .target):before{text-transform:uppercase;color:white;}


    단, :has() 셀렉터를 일부 브라우저에서 아직 지원하지 않기 때문에, 사용에 주의가 필요합니다. 파이어폭스 Nightly에서 지원을 시작했기 때문에 조만간 파이어폭스도 지원할 것으로 보이네요.
    Can I use :has?

  • SCSS MAP.SET() 에러

    아~~~ 별거 아닌 거 가지고 시간 낭비했네요.
    API 문서에도 제대로 설명이 안되어 있어서… ㅠㅠ

    @use "sass:map";
$fonts:(
    font-size: 1.3rem,
    line-height: 1.8rem
);
map.set($fonts, color, #ccc);

    위와 같이 map.set()을 사용하면 이런 에러가 발생합니다.

    Error: expected "{".

    map.set()은 새로운 맵을 리턴하기 때문에 할당을 해주지 않아서 문법오류가 발생하는 것입니다.
    아래와 같이 변수에 재 할당을 해주면 오류가 해결됩니다.

    @use "sass:map";
$fonts:(
    font-size: 1.3rem,
    line-height: 1.8rem
);
$fonts: map.set($fonts, color, #ccc);

    뭐 어려운 것도 아니고, 이런 걸 만들라고 한건데…

    @use "sass:meta";
@use "sass:map";

$font-style:(
  10 : (font-size:1.0rem, line-height:1.6rem),
  12 : (font-size:1.2rem, line-height:1.8rem),
  14 : (font-size:1.4rem, line-height:2.2rem)
);
@mixin fontStyle($size, $args...){
  $map : map.get($font-style, $size);

  @each $k, $v in meta.keywords($args){
    $map : map.set($map, $k, $v);
  }

  @each $k, $v in $map{
      #{$k} : #{$v};
  }
}

.test10{
    @include fontStyle(10);
}
.test12{
    @include fontStyle(12);
}
.test12-2{
    @include fontStyle(12, $line-height: 2rem);
}
.test14{
    @include fontStyle(14, $line-height: 3rem, $color:#ccc, $font-weight: 700);
}
    .test10 {
  font-size: 1rem;
  line-height: 1.6rem;
}

.test12 {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

.test12-2 {
  font-size: 1.2rem;
  line-height: 2rem;
}

.test14 {
  font-size: 1.4rem;
  line-height: 3rem;
  color: #ccc;
  font-weight: 700;
}

  • SCSS 아이콘 스프라이트

    아이콘 등을 이미지 스프라이트로 작업할 때 일일이 좌표를 지정하는 것이 불편하여 일괄로 CSS를 생성하는 코드 입니다.
    아이콘의 클래스 명을 리스트로 등록하고 아이콘의 크기와 한 행에 들어가는 아이콘의 개수를 설정하면 됩니다.
    나중에 아이콘이 추가 또는 삭제되어도 리스트에서 순서만 재조정하면 좌표를 일일이 다시 수정할 필요가 없습니다.

    @use "sass:meta";
@use "sass:list";
@use "sass:math";

$icon-list:(
    'home',     'login', 'logout', 'profile', 'menu',
    'category', 'brand', 'search', 'more',    'empty',
    'left',     'right', 'up',     'down',    'cross',
    'prev',     'next',  'close'
);
$size: 25px;
$col: 5;

.my-icon{
    display: inline-block;
    width: $size;
    height: $size;
    background:url(my-icon.svg) no-repeat 0 0;
    background-size:$size * $col auto;
    @each $icon in $icon-list{
        $i: index($icon-list, $icon) -  1;
        $x: ($i % $col) * -$size;
        $y: math.floor($i / $col) * -$size;
        &.#{$icon}{background-position:#{$x $y};}
    }
}

    .my-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(my-icon.svg) no-repeat 0 0;
  background-size: 125px auto;
}
.my-icon.home {
  background-position: 0px 0px;
}
.my-icon.login {
  background-position: -25px 0px;
}
.my-icon.logout {
  background-position: -50px 0px;
}
.my-icon.profile {
  background-position: -75px 0px;
}
.my-icon.menu {
  background-position: -100px 0px;
}
.my-icon.category {
  background-position: 0px -25px;
}
.my-icon.brand {
  background-position: -25px -25px;
}
.my-icon.search {
  background-position: -50px -25px;
}
.my-icon.more {
  background-position: -75px -25px;
}
.my-icon.empty {
  background-position: -100px -25px;
}
.my-icon.left {
  background-position: 0px -50px;
}
.my-icon.right {
  background-position: -25px -50px;
}
.my-icon.up {
  background-position: -50px -50px;
}
.my-icon.down {
  background-position: -75px -50px;
}
.my-icon.cross {
  background-position: -100px -50px;
}
.my-icon.prev {
  background-position: 0px -75px;
}
.my-icon.next {
  background-position: -25px -75px;
}
.my-icon.close {
  background-position: -50px -75px;
}

  • Sass에서 다크모드 적용하기 3

    미디어 쿼리나 변수를 사용할 수 없어서 클래스로 구분을 해야 하는 경우에 사용할 수 있는 코드입니다.

    @use "sass:meta";
@use "sass:list";

$color-theme: (
    bg-color: (#fff, #333),
    txt-color: #000 #efefef,
    brd-color: #666
);
 
@mixin getColor($flag, $p, $n){
    @each $k, $v in $color-theme{
        @if($k == $n){
            @if(meta.type-of($v) == "list"){
                @if($flag == dark){
                    #{$p}: #{list.nth($v, 2)};
                }@else{
                    #{$p}: #{list.nth($v, 1)};
                }
            }@else{
                #{$p}: #{$v};
            }
        }
    }
}

@mixin parseList($flag, $pp...){
    $p: nth($pp, 1);
    @for $i from 1 through length($p){
        @if($i % 2 == 1){
            @include getColor($flag, #{nth($p, $i)}, #{nth($p, $i + 1)});
        }
    }
}

@mixin darkmode($path, $p...){
    @include parseList(light, $p);
    @at-root .darkmode #{$path}{
        @include parseList(dark, $p);
    }
}

.test .test2{
    margin:0 10px;
    border:1px solid;
    @include darkmode(&, color, txt-color, background-color, bg-color, border-color, brd-color);
}
    .test .test2 {
  margin: 0 10px;
  border: 1px solid;
  color: #000;
  background-color: #fff;
  border-color: #666;
}
.darkmode .test .test2 {
  color: #efefef;
  background-color: #333;
  border-color: #666;
}

  • Sass에서 다크모드 적용하기 2

    Sass에서 다크모드 적용하기 에서는 IE에 대한 고려때문에 코드가 좀 복잡해졌는데, 이제 IE를 무시해도 될만하니, 좀 더 간단한 코드로 다시 작업해 봤습니다.
    굳이 믹스인 사용하지 않고 변수만 정의해서 사용하면 됩니다.

    @use "sass:meta";
@use "sass:list";

$color-theme: (
    bg-color: (#fff, #333),
    txt-color: #333 #eee,
    brd-color: #666,
);
 
:root{
    @each $k, $v in $color-theme{
        @if(meta.type-of($v) == "list"){
            #{"--" + $k}: #{list.nth($v, 1)};
        }@else{
            #{"--" + $k}: #{$v};
        }
    }
};

@media (prefers-color-scheme: dark){
    :root{
        @each $k, $v in $color-theme{
            @if(meta.type-of($v) == "list"){
                #{"--" + $k}: #{list.nth($v, 2)};
            }@else{
                #{"--" + $k}: #{$v};
            }
        }
    }
}
    :root {
  --bg-color: #fff;
  --txt-color: #333;
  --brd-color: #666;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #333;
    --txt-color: #eee;
    --brd-color: #666;
  }
}

html, body {
  color: var(--txt-color);
  background-color: var(--bg-color);
}
 
.border {
  border: 1px solid var(--brd-color);
}