자바스크립트4 PC, 모바일에서 다른 이미지 출력하는 스크립트 "PC, 모바일에서 다른 이미지 출력하는 스크립트" 웹사이트를 개발하다 보면 PC와 모바일에서 각각 다른 이미지를 출력해야 하는 경우가 있습니다. 예를 들어, PC에서는 상세한 이미지를, 모바일에서는 간략한 이미지를 출력하고 싶을 때가 있습니다. 이러한 경우, 다음과 같은 방법으로 스크립트를 작성하여 PC와 모바일에서 다른 이미지를 출력할 수 있습니다. 페이지 폭을 인식하여 이미지를 출력하기 위의 스크립트는 window.innerWidth 속성을 사용하여 현재 페이지의 너비를 확인합니다. 페이지 너비가 768픽셀보다 크면 PC에서 접속한 것으로 간주하여 .pc-image 클래스를 가진 이미지를 출력합니다. 너비가 768픽셀보다 작으면 모바일에서 접속한 것으로 간주하여 .mobile-image 클래스를 가.. IT스토리/인터넷 이야기 2023. 9. 7. 더보기 ›› 랜덤 이미지 출력하기 Javascript 소스 "랜덤 이미지 출력하기 Javascript 소스" 접속할 때마다 2개 이상의 이미지를 랜덤으로 출력하는 자바스크립트(Javascript) 소스를 공유합니다. 웹페이지를 새로고침 하면 랜덤으로 여러 개의 이미지 중에서 하나만 출력되는 소스입니다. "랜덤 이미지 출력하기 Javascript 소스" 위의 코드는 random-image라는 클래스를 가진 이미지 요소들을 선언하고, show라는 클래스를 추가하여 이미지를 표시하도록 합니다. showRandomImage() 함수는 페이지가 로드될 때 실행되어 랜덤으로 이미지를 선택하고 해당 이미지에 show 클래스를 추가하여 화면에 표시합니다. 이 코드를 웹 페이지에 추가하고 이미지 파일의 경로를 적절히 수정하여 사용하시면 됩니다. 각 이미지 태그에는 src 속성으.. IT스토리/인터넷 이야기 2023. 6. 5. 더보기 ›› 네이버 개발전용 글꼴, 코딩 폰트 D2-Coding "네이버 개발전용 글꼴, 코딩 폰트 D2-Coding" HTML이나 Java Script 등을 코딩할 경우, O와 0, ㅇ 등의 구분이 글꼴에 따라 명확하게 구분하기 어려운 경우가 많이 있습니다. 이런 경우에 사용하기 유용한 개발자용 코딩폰트를 네이버에서 제공하고 있습니다. D2 Coding 글꼴은 나눔바른고딕을 바탕으로 개발자의 코딩을 위해 가독성 및 유사 문자간 변별력 뿐만 아니라 디자인적으로 한글과의 조화를 고려해 최적화시킨 글꼴입니다. D2 Coding 글꼴은 코딩시 유사한 형태의 영문/숫자 뿐만 아니라 한글/특수문자 등에 대한 변별력과 가독성을 강화하였습니다. 또한 고정폭 글꼴로 제작이 되어 어떤 개발환경에서도 자간과 행간을 유지하도록 디자인되어 있습니다.[출처 : NAVER Developers.. IT스토리/유틸, 어플 소개 2017. 3. 3. 더보기 ›› CropMarks 스크립트를 보완한 인디자인(InDesign) 투터치 재단선 그리기 CropMarks-II "CropMarks 스크립트를 보완한 인디자인(InDesign) 투터치 재단선 그리기 CropMarks-II" 지난 시간에 인디자인(InDesign)에서 CropMarks 자바스크립트(Java Script)를 이용해 재단선을 그리는 방법을 포스팅 했습니다. 하지만, 사용하다가 보면 불편한점이 발견되더군요. 바로 투터치 재단을 할 경우에는 CropMarks 자바스크립트로는 해결하기 힘들어 직접 자바스크립트를 수정 했습니다. ☞ CropMarks 스크립트를 이용한 인디자인(InDesign) 재단선그리기 "CropMarks 스크립트를 보완한 인디자인(InDesign) 투터치 재단선 그리기 CropMarks-II" 원터치재단과 투터치 재단의 설명은 다음의 링크를 통해 확인하실 수 있습니다. ☞ 편집디자인에서 원.. 그래픽디자인/InDesign 2016. 8. 31. 더보기 ›› 이전 1 다음
