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 등의 언어들이 표준화된 방식으로 작성되어야 한다.장점웹 표준을 준수하면, 웹 페이지가 모든 브라우저에서 컨텐츠가 일관적으로 표시된다.이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있게 된다.