Work Note

DOM이란? - 구조화된 노드와 프로퍼티, 메소드를 갖고 있는 오브젝트 문서를 표현 - 이들은 웹 페이지를 스트립트, 프로그래밍 언어들에서 사용할 수 있게 연결 시켜주는 역할을 담당 - DOM은 웹 페이지의 객체 지향을 표현하며 노드 구조의 트리형태의 자료 구조 형태를 가지고 있고 각 트리는 노드로 구성. - 웹 브라우저가 HTML 페이지를 인식하는 방식 - 최상위 객체인 window 의 하위 객체 - 브라우저에서 어떠한 페이지를 로드하면 DOM 구조 형태로 변환 - HTML 문서의 모든 요소에 접근하는 방법을 정의한 API [자바스크립트로 DOM 제어] getElementById, getElementsByClassName, getElementsByClassName 의 메소드로 해당 요소를 찾아서 제어할..

, , 태그의 경우에는 alt에 적절한 대체 텍스트를 적어줍니다. 특수문자, 기호, 조직도, 차트 등 복잡한 컨텐츠의 경우 숨김(display: none) 처리로 대체 텍스트를 적어줍니다. 멀티미디어 콘텐츠(영상, 유튜브)에는 자막이나 대본, 수화를 나타내야 합니다. 콘텐츠는 색에 관계 없이 인식될 수 있어야 하며 차트, 슬라이드 버튼 선택 여부, 페이지네이션, 탭 등 색이 아닌 굵기나 모양, 테두리 등으로 구분될 수 있도록 나타내야 합니다. 텍스트, 이미지 내부 텍스트, 의미있는 이미지는 배경 간의 명도 대비가 4.5:1 이상이여야 합니다. 배경음은 가급적 사용하지 않습니다. 이웃한 콘텐츠를 구별할 수 있도록 해야합니다. 모든 기능은 키보드만으로도 사용할 수 있게 해야합니다. 시간 제한이 있는 콘텐츠는..

로그인 후 뒤로가기 시 로그아웃 방지 및 로드된 이미지 다시 페이지 열때 캐시로 여는게 아니라 새롭게 다시 이미지 로드하는 방법! meta태그 안에 아래와 같이 설정해주면 됩니다.

웹 사이트를 운영 및 관리하다보면 JS 및 CSS 파일을 수정하는 일이 많은데, 이 때 파일 수정한 상태로 적용되지 않고 브라우저에서 캐시로 남겨진 JS 나 CSS 가 보여지는 경우가 있습니다. 수정한대로 수정되어지지 않아 깨지거나 화면에서 안보이는 경우도 종종 생기는데 이를 방지하기 위해서 JS / CSS 파일을 캐시 방지하는 것이 좋습니다. Ctrl + F5키를 눌러서 해당 페이지의 캐시를 삭제하며 수정한 JS / CSS 파일을 새로 가져올 수 있지만 사이트를 이용하는 모든 유저들이 모두 이와 같은 방법을 알고 있지 않으며 수정한 파일이 있으니 해당 키를 눌러 새로고침 해달라는 안내를 매번 할 수 없으므로 수정한 파일에 쿼리스트링을 붙여 관리합니다. 물론, 파일명을 매번 수정하여 올리는 방법도 있지만..

워낙 잘 정리된 글이 많지만, 머릿속에 한 번 더 새길 겸 적어봅니다...! [과정 요약] 불러오기 : 로더가 서버로부터 전달 받는 리소스를 읽는 과정을 의미한다. 파싱 : HTML 파서가 문서를 파싱해서 DOM Tree 를 만들게 된다. 렌더링 트리 만들기 : DOM Tree는 내용을 저장하는 트리로 자바스크립트에서 접근하는 DOM 객체를 쓸 때 이용하므로 별도로 그리기 위한 트리가 만들어져야 하는데 그것을 렌더링 트리라고 의미한다. 스타일 구조체 생성 : CSS 선택자에 따라서 적용되는 태그가 다르기에 모든 스타일을 분석하여 태그에 스타일 규직이 적용되게 결정한다. 레이아웃 : 렌더링 트리에서 위치, 크기를 가지고 있지 않기 때문에 객체들에게 위치, 크기를 지정해주는 과정을 의미한다. 그리기(=페인트..

웹 접근성(Web Accessibility) '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미하며, 이는 특정 브라우저에서만 사용되는 비 표준화된 기술은 배제하고 W3C의 토론을 통해 나온 권고안(recomendation)을 사용하는 것을 말하며, 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻함. W3C 접근성 기준 개요 : https://www.w3.org/WAI/standards-guidelines/ko 장애를 사진 사람들이 웹 콘텐츠를 인지하고 편리하게 사용할 수 있어야 하며 그 내용이 알아보기 쉽게 구성되어 있어야 하며 견고성을 갖추고 있어야 한다. 모든 사용자(장애인, 고령자 등), 어떤 환경이나 기술에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근하고 이..