목록#text (7)

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

[해피CGI][cgimall] 텍스트의 차이점 비교 JQuery 플러그인

- 라이센스 MIT - 사용 방법 1. 2개의 TEXTAREA를 이용하여 비교할 텍스트를 각각 입력합니다. 2. 차이점 비교 버튼을 추가합니다. 3. 비교 결과가 출력될 요소를 추가합니다. 4. 상단에 Jquery 라이브러리와 app.js 파일을 링크합니다. 5. CSS를 통해 비교 결과 화면을 꾸밀 수 있습니다. - 작동 예제
웹프로그램밍 자료실/JAVA 자료 2021. 1. 11. 09:37
[해피CGI][cgimall] Limit Text Length To A Specific Number Of Lines - Read More

다운로드 받은 파일의 압축을 해제한 후, index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 여러줄로 구성된 텍스트를 일부만 화면에 표시해주고, 표시되는 끝 부분에 read more 버튼을 표시해줍니다. 더 보기 버튼을 클릭하면, 나머지 텍스트를 화면에 스르륵 표시를 해주는 jquery 플러그인 입니다. 사용법은 아래와 같습니다. 1. jquery 와 더보기 플러그인을 로드합니다. 2. 텍스트가 출력되어야 할 블록을 연결하고, 몇줄을 자르고 표시할지를 지정합니다. 3. 더보기 버튼을 클릭하면 화면에 나머지 텍스트를 표시하는 효과를 주려면 텍스트를 출력하는 블록에 data-controller 이라는 속성을 추가하고, 버튼과 연결하면 됩니다. 4. 더보기 버튼을 조절하거나, 더보기 할 텍..
웹프로그램밍 자료실/JAVA 자료 2020. 11. 30. 09:28
[해피CGI][cgimall] 글자를 기업별 로고로 변경해주는 brandnewroman

위 상태에서 배경색상 및 폰트 색상을 변경할 수 있으며 아래와 같이 대문자, 소문자로 나뉘어 등록할 경우 같은 글자지만 전혀 다른 문자로 표현되어 출력됩니다. 위 아이콘은 다운로드도 받을 수 있습니다. 신기하고 재미있긴한데 어떻게 이용할지 고민이되네요.^^ 이런 시스템도 있구나하고 한번 구경해보시기 바랍니다.
웹프로그램밍 자료실/기타 자료 2020. 11. 11. 09:47
[해피CGI][cgimall] 스크롤시 이미지를 가로지르는 텍스트 만들기

화면을 스크롤하면 텍스트가 우측으로 이동되며 이미지를 가로지르는 듯한 효과를 보여줍니다. 홈페이지, 첨부파일을 확인하시면 사용된 소스를 확인하실 수 있습니다. [html] 기본 html 소스에서 배경이미지와, 동일한 텍스트 2개를 만들어 줍니다. [style] position, overflow, z-index 스타일을 설정하여 지나가는 텍스트 > 이미지 > 이미지 안 텍스트 가 출력되도록 조정합니다. [script] 스크롤시 텍스트를 이동해주는 스크립트 소스입니다. 본 소스를 상단이 아닌 html 하단에 추가하셔야 작동됩니다. 소스를 참고하셔서 응용하여 다양하게 적용해보세요 ^^
웹프로그램밍 자료실/기타 자료 2020. 11. 9. 09:37
[해피CGI][cgimall] Text Highlight Animation Plugin

jQuery 를 이용하여 텍스트에 애니메이션 형태의 강조 효과를 주는 플러그인 입니다. 사용방법은 매우 심플 합니다. 1. 라이브러리 호출 합니다. 2. 컨텐츠 구성 Hello, Dolly Well, hello, Dolly Hello, Dolly marker-animation class 로 강조효과를 주고 싶은 텍스트를 감싸 주세요. 3. 플러그인 실행 $('.marker-animation').markerAnimation(); npm 버젼의 경우 여러가지 옵션을 제공하지만 현재 등록된 첨부파일은 npm 버젼과는 다른 버젼임을 참고 해주세요. ( Color, thickness, duration, delay, font_weight, repeat, stripe ) npm 버젼 사용하시길 희망하시는 경우 아래의..
웹프로그램밍 자료실/JAVA 자료 2020. 10. 23. 09:20
[해피CGI][cgimall] 그림자를 이용하여 겹쳐있는 글자 만들기

ext-shadow css를 이용하여 텍스트에 그림자 효과를 줄수 있습니다. text-shadow: x축값, y축값, 번짐정도, 색상값; 예시) text-shadow: 2px 2px 5px red; ​ text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; 위 예시와 같이 그림자를 출력할 수 있으며, 두개 이상의 그림자도 생성 가능합니다. 두개 이상의 값을 적용하면 아래와 같이 겹쳐보이는 글자를 만들어볼 수 있습니다. * 첨부된 사이트를 참고하시면 자세한 소스를 확인하실 수 있습니다. text-shadow: 5px 5px 0px #eb452b, 10px 10px 0px #efa032, 15px 15px 0px #46b59b, 20px 20px 0px #017e7f, 25px ..
웹프로그램밍 자료실/기타 자료 2020. 5. 21. 16:09
[해피CGI][cgimall] css의 text-shadow효과 모음 사이트 "Trendy CSS Text Shadows"

Trendy CSS Text Shadows 는 css의 text-shadow효과를 이용한 다양한 샘플들을 정리해 놓은 사이트합니다. 간단한 그림자 효과부터 각양각색의 그림자 효과를 확인하실 수 있습니다. 또한 css코드를 확인하고 복사 할 수 있어 샘플과 동일한 효과를 쉽게 적용해보실 수 있습니다. 사이트에 있는 각 샘플 우측상단 view css를 클릭하면 사용된 css를 확인하실 수 있습니다. 샘플과 동일한 font를 사용하시고 싶으실 경우, css아래에 있는 google fonts를 클릭하시면 이미지에 사용된 폰트 페이지로 이동합니다. 복사한 css를 하나의 class에 붙여넣고 적용하고 싶은 부분에 class를 주면 샘플과 동일한 text-shadow효과를 쉽게 주실 수 있습니다.
웹프로그램밍 자료실/HTML 자료 2019. 3. 25. 09:17
Prev 1 Next