[html css js] 순차적으로 변경되는 공지사항 효과 크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내 [당첨자 발표] 2021 스타벅스 플래너 영수증 이벤트 스타벅스커피 코리아 애플리케이션 버전 업데이트 안내 [당첨자 발표] 뉴이어 전자영수증 이벤트 Swiper 라이브러리 이용 Swiper 라이브러리를 추가하고 html 요소의 class 명을 swiper, swiper-wrapper, swiper-slide로 구현한다. .notice .notice-line .inner__left .swiper { height: 62px; flex-grow: 1; } .notice .notice-line .inner__left .swiper-slide { height: 62px; display: flex; align-items: center; } .notice .n.. 2022. 3. 15. [C++] C++ Core Guidelines (C++ 핵심 가이드라인) - P.2, P.3 [Philosophy] P.2 ISO 표준 C++ 사용해라 단, 일부 환경에서는 표준 C++ feature 사용이 제한되는 경우가 있다. (예) 항공기 제어 SW 의 경우 동적할당을 피하는 것을 권고하고 있다. P.3 의도를 표현해라 // bad case gsl::index i = 0; while( i < v.size()) { // ... do something with v[i] ... } // better case for(const auto& x : v) { ∕* do something with the value of x *∕ } for(auto& x : v) { ∕* do something with the value of x *∕ } bad case 이유1 v의 element를 활용하겠다는 의도가 없.. 2022. 2. 22. [C++] C++ Core Guidelines (C++ 핵심 가이드라인) - P.1 [Philosophy] P.1 코드에 생각을 직접적으로 표현해라 class Date{ public: Month month() cosnt; //do int month(); //don't }; int month()의 문제는 메소드를 사용하는 사람에게 추측을 남긴다. 그리고 Month mont()함수에 붙은 const 키워드를 통해 해당 함수는 객체의 상태를 변경하지 않는다는 것을 명시했다. // bad int index = -1; for(int i = 0 ; i < v.size(); ++i) { if(v[i] == val) { index = i ; break; } } // better auto p = find(begin(v), end(v), val); 잘 구현된 라이브러리가 있는 경우 그것을 사용하는 것이 .. 2022. 2. 20. [html css js] 이미지 순차적으로 나타내는 효과 이미지를 순차적으로 나타내는 효과를 만들기 위해 gsap 라이브러리를 사용한다. html 코드 자세히 보기 css 코드 (요소 배치 코드는 생략) .visual .fade-in { opacity: 0; } - 기본으로 투명도를 0으로 설정 Javascript 코드 const fadeEls = document.querySelectorAll(".visual .fade-in"); fadeEls.forEach(function (fadeEl, index) { //gsap.to(요소, 지속시간, 옵션); gsap.to(fadeEl, 1, { delay: (index + 1) * 0.7, opacity: 1, }); }); .visual 클래스의 .fade-in으로 설정된 요소들을 가져온 후 각각에 요소에 다른 시간.. 2022. 2. 20. 이전 1 2 3 4 5 ··· 8 다음
