로마장군의 블로그

[javascript] [aniView] 애니매이션 구현하기

// URL :
https://jjcosgrove.github.io/jquery-aniview/

// 라이브러리 삽입
< script src="https://unpkg.com/jquery-aniview/dist/jquery.aniview.js">< / script >

// 또는 CORS 대응코드
< script src="https://unpkg.com/jquery-aniview@1.0.3/dist/jquery.aniview.js" integrity="sha384-uvboBeyPkVGldyoicVJST1JEAbxI2W0lG2fFOyGvahZrC4jWiv0vmryxw9NXIEn6" crossorigin="anonymous">< /script >

// 실행
$('.aniview').AniView();

// 옵션과 함께 실행
var options = {
animateClass: 'animated',
animateThreshold: 100,
scrollPollInterval: 50
}
$('.aniview').AniView(options);

// 태그에 적용하기 (v3)
< div class="aniview" data-av-animation="slideInRight">< /div>

// 태그에 적용하기 (v4)
< div class="aniview" data-av-animation="animate__jackInTheBox">< /div>

[javascript] [aos] 애니매이션 효과 적용하기

// 라이브러리 삽입
< link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
< script src="https://unpkg.com/aos@next/dist/aos.js">< /script>

// 실행
AOS.init();

/* 위쪽으로 페이드 효과 */
< div data-aos="fade-up">< /div>

/* 아래쪽으로 페이드 효과 */
< div data-aos="fade-down">< /div>

/* 오른쪽으로 페이드 효과 */
< div data-aos="fade-right">< /div>

/* 왼쪽으로 페이드 효과 */
< div data-aos="fade-left">< /div>

/* 왼쪽으로 플립 효과 */
< div data-aos="flip-left">< /div>

/* 오른쪽으로 플립 효과 */
< div data-aos="flip-right">< /div>

/* 위쪽으로 플립 효과 */
< div data-aos="flip-up">< /div>

/* 아래쪽으로 플립 효과 */
< div data-aos="flip-down">< /div>

/* 줌 효과 */
< div data-aos="zoom-in">< /div>

[엑셀] 표시형식에 조건문 넣기

셀의 값은 다음과 같다.

원하는 것 : 값이 1 이상인 경우에 "day 1"로 표시될 것.

표시형식 넣기 :

사용자지정 표시형식에서

[>0]"day" ##;

여러 조건의 순차적 지정도 가능하다.

[>=90]"수";[>=80]"우";"기타";

[jquery-ui] [bootstrap] datepicker와 input-group 사이의 z-index 문제

.input-group과 date-picker 사이에 z-index 이슈가 있음

date-picker가 input-group보다 아래에 위치하는 문제.

해결책은 .ui-datepicker에 z-index를 지정하면 된다.

	$('.input-date').datepicker({
        beforeShow: function(){
            setTimeout(function(){
                $('.ui-datepicker').css('z-index', 100);
            }, 0);
        }
    });

[CSS] 개발중에 알림, 오류, 디버그 등을 표출하는 디자인

.todo { position:relative; border:1px solid #8e2225; background:#fcf1f1; padding:10px 10px 5px 15px; font-size:13px; line-height:18px; font-family:'Arial','맑은고딕'; margin:25px 0 15px; }
.todo::before { position:absolute; display:block; content:'TODO'; top:-12px; left:5px; background:#8e2225; z-index:2; color:#fff; font-size:12px; line-height:18px; padding:0 6px; }

오늘의 할일은 ......

[CSS] <li>의 marker와 텍스트 간격 조절하기

<ul>
    <li>리스트 : 현재의 SQL문에 조건 추가 (상태처리값에 따른 구분 필요함)</li>
    <li>삭제 : 개별삭제, 선택삭제, 전체삭제</li>
    <li>견적요청 작성 : 페이지 이동 UI</li>
</ul>

<style>
    ul { padding-left:15px; list-style-position:outside; }
    li { list-style-type:disc; padding-left:-5px; }
</style>

padding-left:-5px; 이 li의 marker와 텍스트 사이의 간격을 줄여준다.

단 이때 list-style-position:outside; 로 디자인되어야 한다.

[PHP] 정규식으로 태그 추출하기

그누보드 스킨을 수정하다가 생성한 코드

# iframe 태그를 추출한다.
//preg_match_all("/(<(iframe+)[^>]*>)(.*?)(<\/\\2>)/", $wr_content, $matches);
preg_match_all("/(<(iframe+)([^>]*)>)(.*?)(<\/(iframe)>)/", $wr_content, $matches);

if(is_array($matches[3]) == true && count($matches[3]) > 0) {
	// 태그가 있음
} else {
	// 태그가 없음
}

# 추출한 결과를 확인
print_r2($matches);