웹솔루션개발 25년 노하우! 해피CGI의 모든것

이미지 맵은 이미지 내의 개별 영역을 고유한 대상에 연결하여 작동합니다. 정적 그래픽 또는 사진에 상호 작용을 추가하기 위한 완벽한 솔루션입니다. 이미지 맵의 단점은 브라우저 창의 크기를 변경할 때 픽셀 좌표도최신 상태로 유지해야한다는 것입니다. 이것이 바로 rwdImageMaps.js 플러그인이 들어오는 곳입니다. rwdImageMaps.js는 모든 장치 및 브라우저에서 완벽하게 반응하는 이미지 맵을 만들기위한 경량 jQuery 플러그인입니다. 원본 이미지 크기와 현재 브라우저 창의 크기를 기반으로 이미지 맵의 좌표를 자동으로 다시 계산하고 업데이트합니다. 이미지를 클릭한 위치에 따라서, 위 그림과 같이 다른 경고창이 뜨도록 이미지맵을 지정할수 있습니다. 사용방법은 아래와 같습니다. 반응형 이미지가 되..

홈페이지 수정 및 유지보수 또는 제작중일때 사용가능한 페이지 입니다. # 아래 내용은 반드시 지켜주시기 바랍니다. - 저작권정보 및 Author 정보 삭제 금지 - 판매 및 재배포 금지 - 판매 및 재배포를 제외한 개인, 상업적용도 이용가능 - 웹사이팅과 소송 관계에 있는 사람 및 기업 이용금지 - 웹사이팅과 소송 관계에 있는 회사에 속해 있는 사람 및 관계자 이용금지 원문 : https://sir.kr/pb_tip/3595

텍스트 콘텐츠의 명도 대비가 기준에 미달하는 경우 웹접근성에 문제가 생깁니다. 본문 글자 색상과 배경색을 입력한 후 아래의 기준에 적합한 색 검색하기를 누르면 기준에 적합하다면 "선택한 색의 조합은 괜찮습니다" 란 메세지가 노출이되며 명암비가 맞지 않다면 아래와 같이 노출이 됩니다.

로렘 입숨은 출판이나 그래픽 디자인 분야에서 시각적 연출을 보여줄 때 사용할 수 있는 텍스트를 랜덤 텍스트 생성 기능 입니다. http://guny.kr/stuff/klorem/ 페이지로 접속해서 확인을 하실수가 있습니다. 로렘 입숨에 대한 자세한 설명은 http://guny.kr/archives/85 페이지에서 확인 가능 합니다.

사용하기 쉬운 랜덤 이미지 출력 API 입니다. https://picsum.photos/ 페이지로 접속하여 사용법 확인이 가능 하지만, 단순히 랜덤 이미지 출력을 해야 될 위치에 태그 사용만으로 이용이 가능 합니다. URL의 숫자가 가로 크기, 세로 크기 입니다. 단순 이미지 출력이 아닌 블러효과등 다양한 효과의 이미지 출력도 가능하니, 홈페이지를 통해 확인 하여 필요하신 이미지를 이용 하시면 되겠습니다.

알고리즘 트레이닝 사이트 정보올림피아드 & 알고리즘(JUNGOL)을 소개합니다. 사이트 이름에 걸맞게 정보올림피아드 및 프로그래밍 대회에 출제된 문제들이 사이트에 게재되어 있고, 다른 알고리즘 트레이닝 사이트와 달리 채점 점수와 틀린 테스트케이스를 알려주는 것이 특징입니다. 링크: http://www.jungol.co.kr/ - '문제' 탭에서 각종 문제들을 만나보실 수 있습니다. - '기출문제' 탭에서는 각종 대회의 다양한 기출문제를 풀어보실 수 있습니다. - 문제에 접속하여 제출하기를 누르시면, 문제해결 코드 작성이 가능합니다. - 문재해결 코드 작성 페이지에서 프로그래밍 언어 선택도 하실 수 있습니다. - 문제 제출을 하게 되면, 채점 점수와 함께 결과를 보실 수 있습니다.

다운로드 받은 파일의 압축을 해제한 뒤, example/index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 화면에 보라색으로 표시되는 동그라미가 표시가 되고, 보라색 버튼을 클릭하면 위 그림 처럼 클릭했던 동그라미 주변에 방사형으로 메뉴가 펼쳐지게 됩니다. 펼쳐진 메뉴에 버튼을 선택해서 클릭시에는 위 그림 처럼 어떤 메뉴를 클릭했는지를 경고창이 뜨네요. 사용방법은 아래와 같습니다.

클릭하시면 아래와 같은 css가 복사되어 쉽고 빠르게 응용이 가능합니다.

다양한 사이트의 느낌의 박스그림자 CSS 예제가 있습니다. 클릭시 해당 css 소스가 바로 복사가 됩니다. 디자이너가 아니더라도 원하는 느낌을 찾아서 클릭해서 아래와 같이 복사된 css를 확인할 수 있습니다.

웹페이지를 키보드 화살표 키를 따라 가로 세로로 이동하게 만들어 주는 js 입니다. 해당 js 를 받아 선언하고 위와 같이 초기화 해주면 사용 끝입니다. 페이지 구성은 세로로는 section 태그를 가로로는 aside 태그를 사용하여 디자인 하면 됩니다. 위와 같은 옵션도 제공합니다. 이미지 전시와 같은 페이지를 구상한다면 참 좋은 js 입니다.