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

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

<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에서만 쓸 수 있으니 크게 신경 쓰지 않아도 될 것 같다.