전체 글 (464) 썸네일형 리스트형 모달 (Modal) 웹 프로그래밍에서 팝업 또는 dialog 창을 모달 (modal)이라고 합니다. 모달의 가장 큰 특징은 유저의 관심을 특정 액션에 집중시키는 데 있는데요. HTML, CSS, JavaScript를 활용해서 모달을 만드는 방법을 알아보겠습니다. 구현 방법 먼저, HTML 코드부터 보겠습니다. (해당 기능에 집중하기 위해 불필요한 코드는 생략) HTML 파일의 본문 안에 모달 요소를 넣습니다. auth ❌ CSS로 모달을 화면의 흐름에서 제외시킵니다. position: absolute; 또는 position: fixed;로 구현 가능한데 저는 본문 내용의 길이와 관계없이 언제나 화면 전체를 가릴 수 있는 position: fixed; 선호합니다. 그리고 속성을 사용하여 모달 요소를 숨기면 되는데 여기서는 간.. 구글 향상된 전환 (향상된 전환 설정) 향상된 전환은 기존 전환에서 사용자 식별을 위해 사용되는 glid ID에 추가로 부가정보를 보내어 전환의 유실률을 줄여주는데요. 목차 구글 GA4 계정 및 속성 생성 GA4는 구글애널리틱스의 최신 버전으로 웹사이트 트래픽 과 이벤트를 바탕으로 축적된 데이터를 다양한 방면에서 활용할 수 있게 해주는데요. 오늘은 GA4 계정과 속성을 설정하는 방법에 대해 알아볼까요. GA4는 계정은 아래와 같이 세 단계로 나누어지는데요: 계정 (business) -> 속성 (website) - 데이터 스트림 (website) 계정 계정은 회사의 개념을 가지며 아래 다양한 속성을 가질 수 있습니다. 하나의 계정 아래 최대 100의 속성을 설정 가능합니다. 좌측 하단에 '관리자' 선택 후 열린 화면의 좌측에 '+계정 만들기'를 클릭 '계정 이름' 넣기 이후 계정 데이터 공유설정에서 기호에 따라 선택 또는 선택 해제합니다. 참고로 첫 번째 'Google 제품 및 서비스'는 구글시그널 사용을 .. [태그관리자] - 계정공유하기 / 사용자 제외하기 구글태그관리자를 사용하여 구글 마케팅 제품의 태그를 쉽게 설치, 관리가 가능한데요. 먼저, 구글태그관리자의 권한을 공유하는 방법을 알아볼까요. HTML 삽입 미리보기할 수 없는 소스 구글애즈, 구글애널리틱스, 구글 머천트센터 연결하기 구글 애즈와 구글 애널리틱스 또는 구글 머천트센터와 계정 연결 시 계정 간에 생성된 데이터를 공유할 수 있는데요 연결하는 방법이 다양해서 복잡하게 느껴질 수 있기에 이 글을 통해 정리를 하고자 합니다. HTML 삽입 미리보기할 수 없는 소스 구글애즈 전환 설정하기 구글애즈에서 전환은 웹사이트 방문 고객이 웹사이트에서 취하는 행동 중 광고주에게 의미 있는 행동(주로 구매 등 금전적 이익을 주는 행동?)을 의미합니다. 구글애즈에 전환설정으로 광고를 통해 유입된 사용자들이 실제로 구매를 하는지 얼마만큼의 수익을 일으키는지 수치화가 가능한데, 구글애즈에서 전환설정 하는 방법을 알아보시죠. HTML 삽입 미리보기할 수 없는 소스 무한스크롤 (infinite scrolling) 웹 개발과정에서 이미지나 데이터를 가져와서 화면에 나열하는 작업이 필요한 경우가 많은데요. 화면의 크기가 한정되어 있어 유저에게 보여줄 수 있는 정보는 한정되어 있기 때문에 웹페이지 상에 처음 표시할 때 불필요한 정보까지 모두 서버에 요청하여 가져오는 것보다 필요한 부분만 그때 그때 요청하고 표시하는 것이 더욱 효율적입니다. 무한 스크롤은 서버에 요청하는 데이터의 양을 분할하여 필요한 부분만 화면에 표시 해 주기 때문에 상기에 언급된 기능 구현을 쉽게 구현 할 수 있는데요. 어떻게 하면 쉽게 구현이 가능한지 알려 드리겠습니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러? 앵귤러는 웹 어플리케이션 개발 시 필요한 다양한 기능 (routing, forms validation, animations)들을 탑재한 JavaScript framework인데요. Component 구현방식을 통해 코드의 재사용성 향상으로 중복적인 작업을 줄여주고 생산성을 향상시켜주는 등 다양한 장점이 있습니다. 앵귤러의 시작과 다양한 기능들을 살펴 보도록 하겠습니다. List of Contents [ 소개 ] [ 장점, 단점 ] [ 주요기능 ] [ 어떻게 작동할까? ] [ 누가 사용할까? ] [ 마무리 ] [ 참고자료 ] 소개 앵귤러는 2010년 10월 20일 더 나은 웹 개발 환경을 제공하기 위해 Google (개발자: Misko Hevery)에 의해 Angular.Js (ver 1.0) 라는 이름으.. 이전 1 ··· 55 56 57 58 다음
