목록분류 전체보기 (57)

ㅇㅅㅇ

검색엔진 최적화와 시각장애인(스크린리더)을 위해 텍스트에 적용하는 의미있는 태그

의미없는 태그와 css로는 시각적으로 강조하는 모양은 만들 수 있으나 검색엔진과 시각장애인에게 의미는 전달할 수 없다. 검색엔진 최적화(SEO)와 시각 장애인들이 스크린 리더기를 통해 웹 사이트를 이용하는데 도움이 될 수 있도록 명확한 정보전달을 위해 의미전달이 필요한 콘텐츠가 있다면 거기에 맞는 의미있는 태그(Semantic Tag)를 사용해야 한다. 이번 글에는 의미있는 태그(Semantic Tag) 태그에 대한 개념과 효과 텍스트에 적용할 수 있는 의미있는 태그 만 정리해본다. 의미있는 태그(Semantic Tag) 사람과 기계가 읽을 수 있는 방식으로 의미를 명확하게 설명하는 요소를 말한다. 의미있는 태그를 사용하면 아래와 같은 효과을 얻을 수 있다. 검색엔진 최적화 SEO (Search engi..
프로그래밍/HTML 2022. 7. 10. 18:24
[JS, JAVASCRIPT] 키보드 타이핑 효과를 주는 자바스크립트 라이브러리 TypeIt

유튜브를 둘러보다 발견한 자바스크립트 라이브러리 중 하나 키보드 타이핑 효과를 주는 자바스크립트 라이브러리 TypeIt TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 공식문서에서 말하는 장점으로는 ~4kb의 저용량 의존성 없음 매우 유연한 API SEO 친화적 을 들고 있다. *기본사용방법 여기에 지우고 다시 입력되는 등등의 옵션도 추가할 수 있다. 참고할 결과물은 아래와 같다. (코드펜에 더 좋은 예시가 많이 있으니 필요하면 그쪽을 참고하시길...) *etc 공식문서 하단에 보면 개인 및 오픈소스에는 무료지만 상업적 이용은 유료라고 한다. 용도(?)에 맞춰 잘 사용하자. 알기만 하..
프로그래밍/JAVASCRIPT 2022. 6. 30. 15:43
[CSS] 텍스트, 이미지 반전 효과 css

최근에 효과에 관심이 많아져서 찾아보게 되었다. 이미지 혹은 텍스트가 겹칠 때 겹치는 부분이 반전효과로 구분되면 좋겠다 싶어서 찾아봤다. mix-blend-mode라는 혼합모드 설정하는 css를 사용하는 간단한 방법이 있었다. 많은 효과(?)가 있는데 그 중에서 나는 아래것을 사용해 봤다. mix-blend-mode: difference; 적용 전 적용후 (개인작업 중인 페이지에서 캡쳐해왔다.) 비교해보면 알겠지만 겹치는 부분끼리 혼합이 일어났다. (모질라 사이트에서 캡쳐해옴) mix-blend-mode는 여러 효과가 있으니 보고 필요한 효과를 사용하면 될 것 같다. 참고 : https://brunch.co.kr/@skykamja24/524 내가 찾던건 아니지만 알아두면 좋을 것 같아서 모아봤다. fil..
프로그래밍/CSS 2022. 6. 27. 14:34
구글 애널리틱스(gtag), 동일 사이트에 추적코드 두 개 이상 적용하기

작업할 때 대부분 1개를 넣지만 간혹 2개 이상을 삽입 요청하는 경우가 있어 정리해둔다. (예시는 구글 가이드 사이트에서 발췌) 1개만 삽입할 경우는 아래와 같은데 여기서 2개 이상 삽입이 필요한 경우, 공식문서를 보면 각 페이지에는 전체 사이트 태그 인스턴스가 하나만 있어야 하기에 추가 제품마다 새로운 전체 사이트 태그를 복사하면 성능 문제가 발생하고 코드를 유지하기가 더 어려워질 수 있다고 한다. 해서 이미 소스가 있는 경우 추가할 소스의 config()부분만 가져와 아래처럼 추가하면 된다고 한다. 이렇게 하고 이벤트 추적도 넣어보니 잘 되었다. 참고 : https://amina.co.kr/bbs/board.php?bo_table=apms_qa&wr_id=119381 https://developers..
프로그래밍/기타 2022. 6. 20. 09:00
[JS, JAVASCRIPT] 스크롤을 부드럽게 이동시키기(scroll behavior: smooth)

바닐라 자바스크립트로 스크롤 애니메이선을 고민하며 구글링하다 알게되었다. 사용법도 간단하답 window.scroll({ top: 0, left: 100, behavior: 'smooth' }); top:창이나 요소를 스크롤하기 위해 Y축을 따라 픽셀 수를 지정 left : 창이나 요소를 스크롤하기 위해 X축을 따라 픽셀 수를 지정 behavior : 스크롤 애니메이션 설정(auto: 기본값, 즉시실행 / smooth : 부드럽게 스크롤 애니메이션) 공식문서를 보면 Window.scroll()뿐만 아니라 Window.scrollTo(),Window.scrollBy()에서도 적용가능하다고 한다. 참고: https://developer.mozilla.org/en-US/docs/Web/API/Window/scr..
프로그래밍/JAVASCRIPT 2022. 6. 7. 09:00
[JQUERY] 스크롤바를 커스텀해주는 plugin mCustomScrollbar

스크롤바를 커스텀 할 때 주로 사용하는 플러그인매번 찾아보게 되서 자주 사용하는 것들만 적어본다 사이트는 여기▼ jQuery custom content scroller – malihu | web designLast updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuemanos.malihu.gr 기본 사용방법1. 세..
프로그래밍/JQUERY 2022. 4. 29. 00:15
이전 Prev 1 ··· 4 5 6 7 8 9 10 Next 다음