[css] 모르는 줄 몰랐던 css 팁들

안녕하세요~ 이번 주에 구름에듀에서 김버그선생님의 강의를 들으면서

새로알게된 CSS 속성과 팁들을 스스로 기억하기 위해 기록한다.

누군가에게는 쉽고 당연할 수 있는 내용들이지만 누군가에게는 나처럼 도움을 받을 수 있길!

1) SVG를 사용했을 때 좋은 점 중에 하나!

그 전에 실무에서 PNG와 JPG 파일 이미지도 많이 썼지만 SVG를 썼을 때 장점을 잘 몰랐었다..
그냥 확대해도 깨지지 않는 백터이미지라는 장점만 알고 있었는데!

svg 태그의 fill 속성에 currentColor라는 값을 주면 fill="currentColor" 이렇게 주면!
부모의 color를 상속받을 수 있다!

매번 자식요소에 color 속성값을 따로 줬었는데 이런 좋은 방법이 있었다!
그리고 참고로 font-size와 color는 부모의 속성을 기본적으로 상속받는다.

2) aria- 관련 속성

브라우저 내부에서 스크린 리더가

• aria-label 속성: 눈에 보이지 않더라도 브라우저에 전달 되면 좋은 정보, 혹은 스크린 리더를 통해 웹을 전달해야하는 정보를 제공하고 싶을 때 사용 할 수 있다.
  
  MDN을 찾아보니 svg에 role="img" aria-label 속성을 줄 수 있다. 쉽게 말해서 다른태그에 img의 alt 속성처럼 img 태그 이외에도 다른 html태그에 설명할 수 있는 정보를 전달할수 있는 방법이다.
  

          <button
                    class="gnb-icon-button is-search lg-hidden"
                    type="button"
                    aria-label="검색창 열기 버튼"
                  >
                    <i class="ic-search"></i>
                  </button>

이런식으로 검색창 열기 버튼에 aria-label 속성을 줬다.

• aria-hidden
  aria-hidden이 true로 설정되면, accessibility tree에서 해당 콘텐츠를 가리지만, 여전히 시각적으로는 볼수 있다.

주의 할 점은 , aria-hidden="true"가 focusable한 요소가 되어서는 안된다는 것이다. 스크린리더에는 보이지 않지만, focus가 되기 때문이다.

이 외에도 찾아보니 HTML과 CSS로 숨기는 여러가지 방법이 있는데 여기에도 잘 정리되어있다. https://yceffort.kr/2021/03/hiding-contents-with-html-and-css

• point-events 속성
  이벤트가 부요된 요소를 숨길때는 이벤트가 작동하지 않을꺼라 생각하지만 opacity 0속성을 이용하면 이벤트에 응답하게 되는데, 부여된 이벤트를 제거하거나 다시 활성화 시켜야하는 경우가 생길 수 있다. pointer-events 는 HTML 요소들의 마우스/터치 이벤트들(CSS hover/active, JS click/tap, 커서 드래그등)의 응답을 조정할 수 있는 속성이다.
  CSS.hidden {
  opacity: 0;
  pointer-events: none;
  }
  

pointer-events 속성은 11개의 속성값을 가지지만 3개를 제외하고는 모두 SVG에서 사용하도록 예약되어 있다. 아래의 3개의 속성값은 HTML 요소들에서 사용 가능하다.

none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다.
auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.

3) reset.css에서 font-size 선언하기

reset css에서 폰트 사이즈 선언을 해주면 선언한 값이 rem 값의 기준이 된다!
브라우저에서 기본적으로 16px로 되어있는 것이 표준이다.
프로젝트 별 타겟에 따라 본문 폰트 사이즈를 (젊은층이면)15px,
조금 더 연령대가 있는 타겟이면 18px로 하기도 한다고한다.

  reset.css
  html{
  	font-size: 16px;
  }

4) 그리드 시스템

사실 그리드 시스템에 대해서 잘 몰랐고 항상 피그마에서 요소별 width, height 등 각각의 값을 일일히 확인하면서 css 작업을 할 때가 많았는데 그리드 시스템 개념에 대해 알게 되면서
눈이 번쩍 뜨였다. unit column gutter 개념등을 적용해서 변수로 계산해서 사용하니 세상 편함..
그리드 시스템을 알고나니 디자이너와 훨씬 더 소통하기 수월할 것 같다!

프론트엔드 개발자라면 꼭 일찍 알았으면 좋았을 개념이라는 생각이 들었다.
자세한 내용이 궁금하다면 https://oddcode.tistory.com/90 이 블로그에도 잘 정리 되어있어서
참고 하면 좋을것 같다.

 $gutter: 20px;

$sm-columns: 4;
$sm-margin: 5px;

$md-columns: 12;
$md-margin: 30px;
$md-max-container: 960px + $md-margin * 2;

$lg-columns: 12;
$lg-unit: 75px;
$lg-max-container: ($lg-unit + $gutter) * $lg-columns;

이런식으로 계산해서 쓰니 레이아웃 작업에서 수월하고 감이 아니라 더 정확하게 작업할 수 있었다.

5) inline-flexbox

display:flex 만 많이 썼는데, inline-flexbox 속성과의 차이를 알고 쓰면 좋은 속성이다

display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다.

여기서 말하는 수직과 수평 쌓임은 Items가 아니라 Container라는 것에 주의해야한다.

flex와 관련된 내용은 https://heropy.blog/2018/11/24/css-flexible-box/ 여기에도 잘 정리 되있으니 참고!

6) 가상요소

가상요소 ::before , ::after를 만들때는 content 값을 빈값이여도 꼭 줘야함! content="";
html 문서에 포함되지 않는 요소를 css에서 생성하기 떄문에 필수 속성으로 넣어줘야함!
예를 들어 이러한 구분선 만들 때!

7) 타원형 그리기

알림 위에 숫자가 두자리 이상일때 타원형으로 만들어주는 방법
border-radius를 임의의 큰숫자 10000px같은 큰숫자를 넣어줘도 되지만
정석대로 계산해서 하면 width,height 값 같을 때 badge-size는 그 값의 절반 1/2로 주면된다!

8) 툴팁 뾰족이 만들기

div{
	width: 0;
    height: 0;
    border: 4px solid white;
    border-top-color: red;
    border-right-color: yellow;
    border-bottom-color: green;
    border-left-color: blue;
}

width,height값이 없으면 위와같이 그려진다!

div{
	width: 10;
    height: 10;
    border: 4px solid white;
    border-top-color: red;
    border-right-color: yellow;
    border-bottom-color: green;
    border-left-color: blue;
}

width,height 값을 주면 border와 border가 만나는 부분에서는 대각선이 된다.

그래서 뾰족이 (△)를 만들려면 아래 방법을 활용하면 된다!

 @include position-center-x;
    top: $button-size + $tooltip-size + 8px;
    border-radius: 4px;
    box-shadow: $dropdown-shadow;

    &::before,
    &::after {
      @include position-center-x;
      top: -#{$tooltip-size * 2};
      display: block;
      width: 0;
      height: 0;
      border-top: $tooltip-size solid transparent;
      border-bottom: 10px solid transparent;
      border-right: $tooltip-size solid transparent;
      border-left: 10px solid transparent;
      content: '';
    }

    &::after {
      top: -#{$tooltip-size * 2 - 2px};
    }

    &::before {
      border-bottom-color: $border;
    }

오랫만에 css강의를 들으며 GNB를 반응형으로 만들어보면서 몰랐던 내용들을 기억하기 위해 기록해본다!
기본적인 부분인데 몰랐던 css 속성들과 팁들을 배울 수 있어서 좋았다.

그리고 강의를 들으면서 디자인 시안에 사용자 경험이 반영이 안됐을때 주도적으로 질문하고 제안하는 습관을 들여야겠다는 생각도 들었다.