본문 바로가기

Development/Front-End

 (7)
AJAX 개념 및 장단점 AJAX ? Asynchronous JavaScript and XML 자바스크립트를 이용하여 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신 방식 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로고침 하지 않아도 일부의 데이터만 로드 가능 → 비동기 방식 필요한 부분만 불러와 사용하므로 불필요한 리소스 낭비가 발생하지 않는다. HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받게되면 통신하던 연결이 끊기게 되어 있다. 그래서 다시 화면의 내용을 보기 위해서는 페이지 전체를 다시 로드함으로써 페이지를 갱신하게 된다. 이렇게 되면 자원, 시간 낭비를 초래할 수 있으므로 일부문만 갱신할 수 있도록 XMLHttpRequest 객..
반응형 이미지맵 (jQuery RWD Image Maps) + 이미지맵 사이트 1. 이미지 태그 사용 - 속성 usemap 추가 2. map 태그 추가 3. rwdimagemap 플러그인 사용 반응형 홈페이지를 제작할 때 사용할 수 있는 플러그인 ▶ rwdimagemap 다운로드 (클릭하면 바로 다운로드가 진행됩니다.) https://github.com/stowball/jQuery-rwdImageMaps/archive/master.zip 4. script 작성 ​ [참고! 이미지맵 좌표값 구하기 편한 사이트] https://www.image-map.net/ Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and gene..
DOM(Document Object Model) 구조 DOM이란? - 구조화된 노드와 프로퍼티, 메소드를 갖고 있는 오브젝트 문서를 표현 - 이들은 웹 페이지를 스트립트, 프로그래밍 언어들에서 사용할 수 있게 연결 시켜주는 역할을 담당 - DOM은 웹 페이지의 객체 지향을 표현하며 노드 구조의 트리형태의 자료 구조 형태를 가지고 있고 각 트리는 노드로 구성. - 웹 브라우저가 HTML 페이지를 인식하는 방식 - 최상위 객체인 window 의 하위 객체 - 브라우저에서 어떠한 페이지를 로드하면 DOM 구조 형태로 변환 - HTML 문서의 모든 요소에 접근하는 방법을 정의한 API [자바스크립트로 DOM 제어] getElementById, getElementsByClassName, getElementsByClassName 의 메소드로 해당 요소를 찾아서 제어할..
웹 접근성 체크 사항 , , 태그의 경우에는 alt에 적절한 대체 텍스트를 적어줍니다. 특수문자, 기호, 조직도, 차트 등 복잡한 컨텐츠의 경우 숨김(display: none) 처리로 대체 텍스트를 적어줍니다. 멀티미디어 콘텐츠(영상, 유튜브)에는 자막이나 대본, 수화를 나타내야 합니다. 콘텐츠는 색에 관계 없이 인식될 수 있어야 하며 차트, 슬라이드 버튼 선택 여부, 페이지네이션, 탭 등 색이 아닌 굵기나 모양, 테두리 등으로 구분될 수 있도록 나타내야 합니다. 텍스트, 이미지 내부 텍스트, 의미있는 이미지는 배경 간의 명도 대비가 4.5:1 이상이여야 합니다. 배경음은 가급적 사용하지 않습니다. 이웃한 콘텐츠를 구별할 수 있도록 해야합니다. 모든 기능은 키보드만으로도 사용할 수 있게 해야합니다. 시간 제한이 있는 콘텐츠는..
웹 캐시 방지하는 방법 로그인 후 뒤로가기 시 로그아웃 방지 및 로드된 이미지 다시 페이지 열때 캐시로 여는게 아니라 새롭게 다시 이미지 로드하는 방법! meta태그 안에 아래와 같이 설정해주면 됩니다.
JS / CSS 파일 캐시 방지하기 웹 사이트를 운영 및 관리하다보면 JS 및 CSS 파일을 수정하는 일이 많은데, 이 때 파일 수정한 상태로 적용되지 않고 브라우저에서 캐시로 남겨진 JS 나 CSS 가 보여지는 경우가 있습니다. 수정한대로 수정되어지지 않아 깨지거나 화면에서 안보이는 경우도 종종 생기는데 이를 방지하기 위해서 JS / CSS 파일을 캐시 방지하는 것이 좋습니다. Ctrl + F5키를 눌러서 해당 페이지의 캐시를 삭제하며 수정한 JS / CSS 파일을 새로 가져올 수 있지만 사이트를 이용하는 모든 유저들이 모두 이와 같은 방법을 알고 있지 않으며 수정한 파일이 있으니 해당 키를 눌러 새로고침 해달라는 안내를 매번 할 수 없으므로 수정한 파일에 쿼리스트링을 붙여 관리합니다. 물론, 파일명을 매번 수정하여 올리는 방법도 있지만..
웹 접근성과 웹 표준 웹 접근성(Web Accessibility) '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미하며, 이는 특정 브라우저에서만 사용되는 비 표준화된 기술은 배제하고 W3C의 토론을 통해 나온 권고안(recomendation)을 사용하는 것을 말하며, 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻함. W3C 접근성 기준 개요 : https://www.w3.org/WAI/standards-guidelines/ko 장애를 사진 사람들이 웹 콘텐츠를 인지하고 편리하게 사용할 수 있어야 하며 그 내용이 알아보기 쉽게 구성되어 있어야 하며 견고성을 갖추고 있어야 한다. 모든 사용자(장애인, 고령자 등), 어떤 환경이나 기술에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근하고 이..

티스토리툴바