AI/LLM

🎨 PUBLISHING

<h3>웹 표준이란?</h3>웹 표준이란 웹에서 사용되는 기술들의 표준화를 의미한다.즉, 웹 사이트를 구성하는 HTML, CSS, JavaScript 등의 언어들이 표준화된 방식으로 작성되어야 한다.<h4>장점</h4>웹 표준을 준수하면, 웹 페이지가 모든 브라우저에서 컨텐츠가 일관적으로 표시된다.이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있게 된다.검색 엔진 최적화, 유지보수 및 확장성, 웹 접근성 향상 효과 또한 존재한다.<h4>방법</h4><ol><li>웹 페이지의 최상단에 DOCTYPE을 선언한다.<blockquote>&lt;!DOCTYPE&gt; 선언HTML 문서에서 <code spellcheck="false">&lt;html&gt;</code> 태그를 정의하기 전에 가장 먼저 선언되어야 한다.선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에게 알려주는 역할을 한다.문서형 정의를 생략하는 경우, 웹 브라우저가 표준모드가 아니라 비표준모드(Quirks Mode)로 렌더링된다.이 경우, 동일한 HTML, CSS, JavaScript라도 웹 브라우저마다 서로 다르게 해석하여 디자인이 틀어지거나, 기능이 이상하게 작동하는 등의 이상한 결과물을 보여주게 된다.<blockquote>Quirks Mode란예전에 만들어둔 비표준 웹페이지들이 최신 버전의 브라우저에서 깨져보이지 않게 하위 브라우저와의 호환성을 유지하기 위해 사용되는 문서 모드</blockquote></blockquote></li><li>시맨틱 태그(header, nav, section, footer)를 사용해 구조를 명확하게 표현한다<blockquote>시맨틱 태그란문서의 구조와 내용을 명확히 표현하기 위해 사용되는 태그이다.단순히 레이아웃을 위한 <code spellcheck="false">&lt;div&gt;</code>나 <code spellcheck="false">&lt;span&gt;</code> 태그와 달리, 태그 자체가 의미를 담고 있어 콘텐츠의 역할을 명확히 나타낸다.이를 통해 웹 접근성을 개선하고, SEO 최적화 및 유지보수가 편리하다.</blockquote></li><li>CSS 스타일 시트를 사용해 웹 페이지의 내용과 디자인을 분리해 유지보수 및 확장성을 높인다</li><li>alt 속성을 사용해 이미지 설명을 제공하는 등의 웹 접근성을 고려한다.</li></ol><h3>웹 접근성이란?</h3>장애를 가진 사람들도 신체적, 환경적 조건에 관계 없이 인터넷을 통해 정보에 접근하고 이용할 수 있도록 하는 것을 말한다스크린 리더나 점자 디스플레이와 같은 보조 기술을 사용하여 인터넷을 검색할 수 있도록, 시각적 요소 처리, 청각적 요소 처리, 키보드 접근성, 웹 접근성 검사를 진행해야 한다<h4>웹 접근성을 고려한 웹 사이트를 만드는 방법</h4><ol><li>시맨틱 태그를 사용해 구조를 명확하게 표현한다</li><li>alt 속성을 사용해 이미지 및 비디오 설명을 제공하는 등 대체 텍스트를 제공한다</li><li>폰트의 색상과 배경의 명도 대비를 고려한다</li><li>콘텐츠를 숨길 경우, 스크린리더가 읽지 못하도록 hidden 속성이나 <code spellcheck="false">display: none</code>을 사용한다</li></ol>

웹 표준이란?웹 표준이란 웹에서 사용되는 기술들의 표준화를 의미한다.즉, 웹 사이트를 구성하는 HTML, CSS, JavaScript 등의 언어들이 표준화된 방식으로 작성되어야 한다.장점웹 표준을 준수하면, 웹 페이지가 모든 브라우저에서 컨텐츠가 일관적으로 표시된다.이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있게 된다.

퍼블리싱 준비 가이드: 웹표준과 웹접근성

[영상처리프로그래밍]

글또 10기

[자료구조와실습]

- 이번 주말에 오픈 소스 멘토링을 진행하게 되었다. 오픈 소스 멘토링을 참여하게 된 이유는 오픈 소스에 기여해보고자 하는 마음은 컸지만, 매번 두려워서 제대로 시작을 하지 못하고 있었다. 내가 이렇게 수정하는 것이 맞는 지, 이렇게 해도 되는 게 맞는 것인 지에 대한 확신히 없었기 때문이다.멘토링의 진행과정을 통해서, 오픈 소스에 기여하는 방법에 대해서 서술 해보도록 하겠다. 1. 기여하고 싶은 오픈 소스를 고르자. ( 처음이라면 , 친숙한 라이브러리 부터 도전 해보자 ). 멘토링에서 처음으로 한 것은 우선 기여하고 싶은 라이브러리를 고르는 것 이였다. 이번 멘토링을 통해서, 오픈소스에 기여해보는 경험을 무조건적으로 해보고 싶어서, 도전적인 라이브러리 보다는 현재 회사에서도 사용하고 있고, 많이 접해본 라이브러리들을 선택하게 됐다. 그러하여, 내가 선택했던 라이브러리는 material-ui 와 shadcn-ui 를 선택했다. 테스트 환경 구성 과 해당 코드를 분석하는 데 있어서, 해당 오픈 소스를 선택했던 것이 도움을 줬던 듯 하다.<ol start="2"><li>이슈를 선정하자- 이슈를 잘 선정한다면, 쉽게 오픈 소스에 기여를 할 수 있다. 우선, 이슈를 해결하려면 어떤 이슈인 지 파악하는 게 중요한데, 해당 이슈가 발생했던 현상에 대한 자세한 설명이 없다면, 우리는 어떤 에러이고, 어떤 것을 고쳐야하는 지 아예 감을 잡을 수 가 없다. 그렇다보니, 이슈에 자세한 설명이 있는 이슈를 선택하는 것이 매우 중요함을 느꼈다. -그렇다면, 나는 어떠한 이슈를 선택헀는 지 보려고 한다. 제가 선택했던 이슈는 다음과 같습니다. 선정했던 이슈 ( Dialog 가 전체화면인 경우에, 키보드를 통한 스크롤 이동이 동작하지 않음 ) ( <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/mui/material-ui/issues/42989">[material-ui][Dialog] Keyboard scrolling doesn't work in fullscreen mode #42989</a>) 해당 에러를 선택했던 가장 큰 이유는 두 개가 있었다. 해당 이슈를 작성한 사람이 해당 에러가 발생하는 상황을 코드 샌드박스로 구현을 해놔서 어떠한 에러인 지 쉽게 가늠할 수 있었기 때문이다. 뿐만 아니라, 메인 테이너 또한 해당 현상이 focus 가 정상적으로 작동했으면 , 일어나서는 안되는 버그라고 명시 했기 때문에, 해당 이슈에 도전하게 되었다.<ul><li>이슈를 선정하는 데 있어서 중요한 두가지가 존재한다.<ol><li>해당 이슈가 발생했던 현상이 자세히 설명되어 있는 이슈를 선택하는 것이 좋다.</li><li>메인테이너가 버그라고 선정한 이슈들을 선택하는 것이 좋다.</li></ol></li></ul></li></ol>3. 해당 이슈에 대해서, 코드를 디버깅 해보자처음 해당 에러를 접하고, 메인 테이너에 말에 따라, focus 가 모달에 정확히 들어가지 않았을 것이라고 생각하고, focus 만 제대로 하게 해준다면, 정상적으로 작동할 것으로 생각이 됐다. 그러하여, Dialog 가 풀 스크린 인 경우와 풀 스크린이지 않을 경우에 대해서 focus 가 다르게 들어가 있는 지를 먼저 확인하려고 진행했다.<pre spellcheck="false"><code class="language-javascript">console.log(document.activeElement);
// 현재 돔이 focus 하고 있는 Element를 리턴해준다.
// https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement</code></pre>해당 코드를 통해, 풀 스크린 인 경우와 풀스크린이지 않은 경우에서, 둘의 값을 비교해봤다. 그러나, 두 경우 모두 똑같은 곳을 바라보고 있었다. 그렇다면, focus 에서는 문제가 없음을 깨닫고, 우선, Dialog 라는 컴포넌트를 분석하기 시작했다. 해당 컴포넌트는 Modal 컴포넌트와 FocusTrap 컴포넌트를 통해서 구성이 되어 있었다. 모달을 띄웠을 때, focus 가 모달의 내용 쪽에 자동으로 잡히게 하는 로직이 FocusTrap 에 구성되어 있었다. 또한, useModal 에 키보드 이벤트를 제어하는 부분이 있어서, 해당 코드에 콘솔을 찍어봄을 통해서, target 이 되는 부분과, 화살표 방향들의 키가 정상적으로 작동하는 지, 또한, 디버깅을 통해, focus가 되고 있는 엘리먼트에 이벤트가 정상적으로 전파되고 있었는 지 확인을 했다. 그럼에도 불구하고, 키들도 모두 정상적으로 작동하고 있었고, 이벤트 또한 정상적으로 포커스 된 엘리먼트로 전파 되고 있었다.그럼에도 불구하고, 풀스크린일 때에만 , 키보드를 통한 스크롤이 작동하고 있지 않았다. 수 많은 고민을 통해, 그렇다면, 스크롤이라는 것이 아예 작동을 할 수 없는 상태인 것이 아닌 지 살펴볼 필요가 있었다. 그러하여, 확인해보니 ,