내 스킨의 네비게이션바를 보면

대강 이런식으로 아래와 같이 짜여져있다.

<ul class="category_list">
    <li>
      	<a class="link_item">대주제</a>
        <ul class="sub_category_list">
          <li><a>소주제</a></li>
          <li><a>소주제</a></li>
          <li><a>소주제</a></li>
        </ul>
    </li>
</ul>

여기서 나는 대주제를 클릭했을시

전체목록의 페이지로 이동하는 것을 막고 싶어서,

그냥 a태그를 빼버리려고 했다.

그런데

티스토리에서 네비게이션 부분은 <nav>태그 안에

• 분류 전체보기 (52)
  • 공부 (19)
    • HTML + CSS (2)
    • JavaScript + jQuery (3)
    • UX UI Design (2)
    • Vue.js (9)
    • Computer Science (1)
    • 그 외 (2)
  • 게임 (33)
    • 메이플스토리 (15)
    • 심즈4 (5)
    • 오버워치 (5)
    • 동물의숲 (6)
    • 호그와트 레거시 (1)
    • 스택랜드 (1)
    • 젤다의전설:야생의숨결 (0)
    • 원신 (0)

디테일한 부분은 html 수정이 어렵다는 것을 알게되었다.

따라서 css로 수정을 할 수 밖에 없었는데,

이럴 때 유용하게 쓸 수 있는 css코드가 바로

pointer-events: none; 으로,

 a(앵커)태그를 무효화 시켜서 클릭 기능을 비활성화 시켜준다.

이 css를 적용시키면 href 속성이 부여된 a태그도 클릭이 되지 않는다.

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */
 
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

pointer-events에는 여러가지가 있는데,

여기서 auto와 none 그리고 global values를 제외한 나머지들은

visibility 태그 등이 사용된 SVG에서만 쓸 수 있으니 크게 신경 쓰지 않아도 될 것 같다.

1월 3일에 작성한 글

css는 참 신기하다

다 아는 것 같다가도 모르는게 계속 나온다

가끔 외국 포트폴리오 사이트 보다보면 배경이 바뀜에 따라서 글자색이 자동으로 변하는 효과를 볼 수 있었는데, 그때는 이렇게 간단하게 css로 구현할 수 있는지 몰랐다.

아까 문득 궁금해져서 개발자모드로 싸이트를 뜯어보다 mix-blend-mode라는 css를 배웠다.

/* keyword values */
mix-blend-mode: normal;
mix-blend-mode: screen;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: multiply;
mix-blend-mode: overlay;
mix-blend-mode: hue;
 
/* global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

마치 포토샵 효과처럼 css로도 이렇게 여러가지 모드의 효과를 줄 수 있는데,

그 중에서 내가 궁금했던 효과는 difference 모드였다.

hover효과로 간단히 구현해보았다.

(hover기 때문에 밑에 예시는 pc에서만 확인가능)

마우스를 올리면 배경이 흰색으로 변하면서,

텍스트가 자동으로 반대색 (흰색->검정색)으로 변하는 걸 볼 수 있다.

따로 text에 color값을 일일히 바꾸지 않아도,

mix-blend-mode: difference; 한 줄로 해결가능한 것이다.

매우매우 개꿀이쥬 ? 개꿀 개이득 ?

이런걸 이제야 알다니..

더 열심히 공부해야겠다...