본문 바로가기
반응형

전체 글

 (464)
자바스크립트로 주간 / 야간 모드 바꾸기 요즘 많은 웹 애플리케이션 야간, 주간 모드로 바꿀 수 있는 기능을 제공하는데요. HTML, CSS, JS를 사용하여 구현해 보겠습니다. 보편적인 기능이라 따로 도입하는 이유에 대한 별다른 설명은 생략하고 바로 코드를 보도록 하겠습니다 (해당 코드에 집중하기 위해 이해를 위해 필요한 코드만 작성) 구현하기 HTML Custom welcome CSS /* 전역변수 지정 */ :root { --bg-light-alt: rgba(0, 0, 0, 0.4); --font-primary: aliceblue; --font-alt: #000; --bg-primary: transparent; --btn-primary: rgb(255, 92, 92); --btn-secondary: #03dac5; } /* data-the..
앵귤러 모달 웹프로그로밍에서 모달은 팝업이나 dialog를 의미합니다. Vanilla JavaScript (framework 사용 없이 HTML, CSS, JS만으로 만들어진 어플케이션)를 사용하여 모달을 만드는 것도 가능하지만 앵귤러에서 제공하는 기능들을 활용하면 모달의 재사용성을 높이고 정보를 공유를 보다 손쉽게 할 수 있습니다. 앵귤러를 사용하여 모달을 구현하는 방법을 살펴보겠습니다. 먼저 모달 구현을 위해 사용할 기능들을 살펴볼까요? 1. 모달 Component (모달 닫기 등 공통된 기능과 layout 제공) 2. 모달 Service (모달의 상태를 관리하고 공유하는 기능 제공) 3. 개별 모달 Component (로그인 등 특정된 내용을 제공하고 기능 수행) 구현된 코드는 아래와 같습니다 공통 모달 Com..
[구글 태그] 쇼피파이 구글 태그 삽입 구글애즈, 애널리틱스 등 구글제품에서 사이트의 정보를 받아보기 위해서는 사이트와 해당 제품을 연결고리가 필요한데요. 구글태그가 이러한 역할을 수행하며 사이트로부터 데이터를 받기 위해서는 구글태그삽입이 필요한데요. 오늘은 소피파이에 구글태그를 삽입하는 방법을 보겠습니다. 설치하기 좌측 메뉴에서 온라인 스토어 (Online Store) 하단에 '테마 (Theme)' 선택 사용 중인 테마 박스 우측에 '...' 버튼 클릭 '코드 수정 (Edit code)' 선택 '레이아웃 (Layout)' 아래 'theme.liquid' 선택 태그 안에 태그 삽입 후 저장 (아래 'here'라고 표시된 곳) 삽입가능한 구글태그들 태그관리자 태그 구글 태그관리자 태그 삽입 태그관리자가 작동하기 위해서는 사이트와 태그관리자를 연..
[구글 태그] 고도몰 구글 태그 삽입 구글애즈, 애널리틱스 등 구글제품에서 사이트의 정보를 받아보기 위해서는 사이트와 해당 제품을 연결고리가 필요한데요. 구글태그가 이러한 역할을 수행하며 사이트로부터 데이터를 받기 위해서는 구글태그삽입이 필요한데요. 오늘은 고도몰에 구글태그를 삽입하는 방법을 보겠습니다. 설치하기 관리자 접속 후 상단메뉴에 '기본설정' -> 좌측에 열린 메뉴에서 '외부서비스 설정' 선택 '+ 외부 스크립트 등록' 선택 '서비스명' 입력 -> '사용설정' (해당 스크립트 사용여부) -> '스크립트 삽입위치 선택' (상단 공통영역 권장) -> 'PC 쇼핑몰' '모바일 쇼핑몰'에 해당 태그 삽입 삽입가능한 구글태그들 태그관리자 태그 구글 태그관리자 태그 삽입 태그관리자가 작동하기 위해서는 사이트와 태그관리자를 연결하는 작업이 필요..
[구글 태그] 윅스 구글 태그 삽입 구글애즈, 애널리틱스 등 구글제품에서 사이트의 정보를 받아보기 위해서는 사이트와 해당 제품을 연결고리가 필요한데요. 구글태그가 이러한 역할을 수행하며 사이트로부터 데이터를 받기 위해서는 구글태그삽입이 필요한데요. 오늘은 윅스에 구글태그를 삽입하는 방법을 보겠습니다. 구현하기 윅스는 외부 스크립트를 삽입하는 기능인 사용자 지정코드 추가와 마케팅 제품연결 도구인 마케팅 통합도구를 제공합니다. 사용자 지정코드 추가 관리자 로그인 후 좌측 메뉴에 'Settings' 선택 보시는 것처럼 커스텀 코드 삽입은 업그레이드 버전을 사용하는 유저만 가능한데요. 업그레이드 버전을 사용하는 경우 여기서 코드 삽입이 가능합니다. 업그레이드 버전인 경우 아래와 같은 화면이 뜨는데요. '사용자 지정 코드 추가' 버튼을 선택하거나 ..
[구글 태그] 아임웹 구글 태그 삽입 구글애즈, 애널리틱스 등 구글제품에서 사이트의 정보를 받아보기 위해서는 사이트와 해당 제품을 연결고리가 필요한데요. 구글태그가 이러한 역할을 수행하며 사이트로부터 데이터를 받기 위해서는 구글태그삽입이 필요한데요. 오늘은 아임웹에 구글태그를 삽입하는 방법을 보겠습니다. 전제조건 아임웹은 프리버전에서는 스크립트 삽입기능을 제공하지 않기 때문에 프리버전인 경우는 스크립트 삽입은 불가합니다. 설치하기 관리자 로그인 후 좌측 메뉴에 '환경설정' -> 'SEO, 헤더 설정' 선택 열린 페이지에서 'Header Code' 란에 태그 삽입 (주의사항: free 버전에서는 외부 스크립트가 반영되지 않습니다.) 삽입가능한 구글태그들 태그관리자 태그 구글 태그관리자 태그 삽입 태그관리자가 작동하기 위해서는 사이트와 태그관리..
[구글 태그] 카페 24 구글 태그 삽입 구글애즈, 애널리틱스 등 구글제품에서 사이트의 정보를 받아보기 위해서는 사이트와 해당 제품을 연결고리가 필요합니다. 구글태그는 이러한 역할을 수행하며 작동을 위해서는 사이트에 구글태그삽입이 필요한데요. 오늘은 카페24에 구글태그를 삽입하는 방법을 보겠습니다. 설치하기 카페 24에 태그를 삽입하는 방법은 테마편집 또는 스크립트 삽입방식으로 가능한데요. 먼저 스크립트를 삽입하는 방식부터 보겠습니다. 스크립트 삽입 관리자 로그인 후 좌측 메뉴에서 '쇼핑몰 설정' '기본 설정' -> '검색엔진 최적화(SEO)' 선택 하단에 '코드 직접 입력' 선택 후 'PC 쇼핑몰'과 '모바일 쇼핑몰' 'Head 영역'에 태그 삽입 테마편집 같은 작업을 테마편집으로도 가능한데요. 사용 중인 테마에서 '디자인 편집'을 선택합니다..
구글 애널리틱스 전환, 목표 설정 구글 애널리틱스에서 전환은 사용자가 취하는 행동 중 구매 등 가치 있는 행동을 따로 관리하게 해 줌으로써 영업 전략의 성공 척도가 되는데요. 애널리틱스의 이전 버전인 UA와 신버전인 GA4에서 어떻게 설정하는지 알아보겠습니다. 목차 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 UA에서는 목표라는 이름으로 설정하는데요. 좌측 메뉴 하단에 '관리' 선택 후 열린 화면에서 세 번째 열에 '목표' 선택 '+새 목표' 선택 첫 번째로 목표를 설정해야 하는데요. '템플릿' 또는 '맞춤' 둘 중 하나를 선택합니다. 이후 설정 방식과 절차는 동일 하나 '템플릿' 선택이 이후 단계 일부 항목의 제목 등이 자동으로 작성됩니다. 하나의 속성 당 20개의 목표를 만들 수 있습니다. 두 번째 ..
728x90

티스토리툴바