마크다운 문서에서 발생하기 쉬운 웹 렌더링 시 HTML 엘레멘트 인식 문제 해결하기
Description: 마크다운에서 발생할 수 있는 태그사용시 실제 웹 엘레멘트로 인식돼버리는 문제를 트러블슈팅 과정을 통해 원인 분석, 해결 과정을 소개합니다.
현재 노트: KR-010.00 e
상위 분류: KR-010.00
Md파일로 작성한 글을 웹에 호스팅하는데.스크롤바가 사라지는 문제가 나타났었습니다. 트라블슈팅 과정에서 해당 문제는 마크다운을 사용한다면 쉽게 생길 수 있는 문제 라고 판단이 돼 유사한 사례가 생길 확률이 높기에 트러블슈팅과정을 따로 기록해 보았습니다.
(결론은 가장아래에)
문제 상황
마크다운형식으로 작성된 글을 웹에 호스팅하고 있는디 특정 페이지만 스크롤바가 보이지 않는 상황이었습니다. 자주 업데이트하고 CSS관련 내용의 글이라 중요하기에 문제를 해결해야만 했습니다.
현상 분석 및 원인 추론
해당 페이지는 다음과 같은 특징이 있습니다.
- 과거이 스크롤바가 보인 적이 있었으며 여러번 업데이트 된 글
- CSS와 관련된 내용을 다루고 있기에 일반 글이 아닌 코드블럭이 여러종류가 믾이 사용된 글
첫번째 시도 개발자도구 활용
이 내용을 기반으로 우선 개발자도구릉 확인해보랐습니다.
개발자도규에서 확인 가능한것은 body태그에 overflow-hidden이 적용된 것이었습니다. 다른 페이지는 적용이 안됐기에 CSS가 주제인 문제가 생긴 페이지에서 해당 내용이 작성된지부터 살펴봅니다.
쉽게 생각했던 것과는 달리 글에 overflow관련된 내용이 없었습니다.
촤근 업데이트함 내용 롤백하기
다음 시도에 볼만한 해결법은 최근에 업데이트한 내용을 롤백하는 것이었습니다. 다행스럽게도 3개의 코드faq같은 블럭정도가 최근 업데이트였습니다.
먼저 모든 블럭 삭제-> 정상작동확인
가장 중요한 스크롤바가 해당 블럭들을 지우니 정상작동하는것을 먼저 확인 합니다. 이후 각 블럭을 하나씩 추가하며 원인을 찾아봅니다.
list-style-position)컨텐츠 위치는 바뀌지 않고 마크의 위치가 컨텐츠 박스 바깥이냐 안쪽이냐를 설정가능. default는 outside
tailwind -> Vanilla CSS
list-inside -> list-style-position: inside;
list-outside -> list-style-position: outside;
문제없음
<li>태그에 에 flex를 넣으니 list-disc즉 리스트 아이템의 볼릿이 안보일 때
<li> 요소의 기본 display 속성은 list-item인지 확인한다.
<li>요소는 display속성을 list-item이라는 값이 default인데 이와 다른 값인 flex와 같은 다른 display 설정시 원활하게 동작하지 않습니다.
display: list-item의 중요한 특징:
- 블록 레벨 요소처럼 동작합니다 (새 줄에서 시작하고 가로 너비 전체를 차지)
- 자동으로 불릿 또는 숫자 마커를 요소 앞에 생성합니다
- 이 마커의 스타일과 위치는
list-style-type,list-style-position등의 속성으로 제어할 수 있습니다
CSS에서 display: flex나 다른 값을 적용하면 이 list-item 값이 덮어씌워지게 되고, 그 결과 불릿이 사라지게 됩니다. 따라서 ListItem 컴포넌트에서 flex를 제거했을 때 불릿이 정상적으로 표시된 것입니다.
(일부 수정됨)문제 발생!
hover와 같은 동적 애니메이션을 특정 영역에서 금지 시키려면?
pointer-events 속성을 활용 하여 금지시킵니다.
부모 컨테이너에서 해당 속성은 none으로 바꿔줍니다. 단 부모가 none일지라도 자식 컨테이너에서 auto를 통해 특정 컴포넌트만 활성화가 가능합니다.
tailwindcss -> Vanilla CSS
`pointer-events-auto -> pointer-events: auto;
`pointer-events-none-> pointer-events: none;
문제없음
원인 추정: 마크다운의 텍스트가 실제 렌더링 요소로 동작하면서 생기는 문제
문제 되는것은 li태그를 표현할때 실제 꺽쇠를 사용하여 표현하면서 사이트가 단순한 글내용 md 텍스트가아니라 html태그로 인식하면서 에러가 발생하고, 그 에러때문에 렌더가 이상하게 동작하는것 처럼보이는 것 같습니다.
문제해결 시도 하드코딩 꺽쇠대신 lt,gt로 표현
웹 상의 이런 문제를 고려해 꺽쇠는 <와 >로 표현이 가능하다고 합니다. 꺽쇠를 수정하고 시도해봅니다.
스크롤바가 돌아왔다! 하지만 표기가 렌더링이 안되는 상황
테스트 결과 백틱으로 둘러싸인 인라인 코드 형식에서는 렌더가 제대로 안되는군요.
백틱 없이 꺽쇠를 표현하기 위해 <를 꺽쇠없이 표현해봅니다.
** 하지만 옵시디언과는 달리 웹호스팅에서 중간에 플러그인에의해 또 스크롤바가 멈추는 문제가 발생**
즉 코드블럭을 쓰면 꺽쇠 렌더링이 안되고, 그렇다고 코드블럭을 빼면 텍스트가아니라 실제 동작하는 코드로 인식해버림
즉 하드코딩 꺽쇠나 < 와 >없이 태그를 표현해야하는 문제 발생
어떻게 꺽쇠를 쓰면서도 강조효과를 유지할 수 있을까 고민하던 찰나 이상한점 발견
그런데 다시 보니 이상한점이있었다.
그건 바로 다른 블록에서 인라인코드블럭에 꺽쇠를 하드코딩 헀음에도불구하고 현재 문제가 없다는 점
즉 백틱에 꺽쇠를 하드코딩 했음에도 불구하고 문제가 생기지 않는 경우가 있었다는 것.
근본 원인그렇다면 혹시 헤더안에 있는 꺽쇠가 원인인가?
문제가 생기는 블럭과의 차이는 헤더안에 꺽쇠태그가 있냐 없냐의 차이
즉 지금까지 하드코딩된 꺽쇠가 원인이라 생각했으니 훨씬 엄밀하게는 헤더태그안에 있는 태그가 문제인가?라는 추측을 하게됩니다.
그래서 해당 가설로 마지막 테스트.
그 결과 일반 텍스트와는 달리 header사용시 하드코딩된 인라인코드의 태그가 실제 코드처럼 동작하면서 문제가 발생했던 것.
아래는 원래 문제가 생기던 블럭에서 헤더만 제거한 후 스크롤바가 정상적으로 보이는 모습.
결론
마크다운을 사용하여 웹호스팅시 꺽쇠사용은 실제 웹 렌더링에서 실제 태그로 착각하고 문제가 발생할 수 있다.
특히 header태그시에만 실제 태그로 인식하는등 특수한 경우가 생길 수 있다.
마크다운에서 꺽쇠를 통한 태그와 같은 코드 쵸현시 주의 하자.