본문 바로가기

반응형

전체 글

(464)
JavaScript? 웹프로그래밍을 논할 때 빠질 수 없는 세 가지가 있는데요. 첫 번째는 구조를 담당하는 HTML 그리고 스타일을 담당하는 CSS 마지막으로 기능 (동작)을 담당하는 JavaScript(JS)입니다. 자바스크립트는 모질라 그룹의 공동 창시자인 Brendan Eich에 의해 1995년에 웹사이트에 동적기능을 추가하여 웹과 사용자의 상호작용을 위해 출시되었는데요. 설정과 사용의 간편함, 다양한 기능과 지속적인 업데이트로 자바스크립트의 인기는 식을 기미가 보이지 않는데요. 2022년 기준 전 세계의 98%에 달하는 웹사이트의 Frontend가 자바스크립트를 사용하고 있으며 앵귤러, 리액트, TypeScript 등 인기를 끌고 있는 다른 프레임워크나 언어도 작동기반은 자바스크립트라는 점에서 당대에 웹 개발자들에게는..
캔버스 HTML 요소는 캔버스 에이피아이를 사용하여 단순한 도형부터 게임까지 만들 수 있게 해 주는 유용한 기능입니다. 이 글에서는 캔버스가 가지고 있는 속성들과 그 사용법, 동적으로 캔버스 크지 지정하기, 마지막으로 캔버스를 활용한 애플리케이션 제작방법소개로 구성하였습니다. HTML 삽입 미리보기할 수 없는 소스
카페24 구글 전환설정 채널연동하기 카페 24에서는 구글채널 설정을 통해 전환설정이 가능합니다. 전환을 자체적으로 생성하여 자동으로 구글애즈로 연동하는 방식을 사용하고 있습니다. 구글채널설정하기 카페24 구글 머천트 센터 연결 관리자 로그인 좌측 메뉴에서 '판매채널' 선택 열린 화면에서 '구글채널' 선택 채널설정에서 차례대로 완성 jin-co.tistory.com 좌측메뉴 '판매채널' -> 구글 아래 '구글채널' 순으로 선택하고 구글계정으로 로그인 (구글 애즈광고 계정과 동일해야 함). 로그인 시 계정 접근 동의 여부를 묻는 데 반드시 모두 체크해 주어야 합니다. '시작하기' 선택 'SSL인증 도메인 사용' 선택 '확인'을 누르고 다음으로 '쇼핑몰 이용약관 및 환불 정책 등록 확인'을 선택하여 체크 후 '확인'을 누릅니다. '..
아임웹 구글 애널리틱스설정 관리자 로그인 -> 좌측메뉴에서 '마케팅 관리' -> '전환추적/리타게팅 관리' 선택 열린 화면 중간 부분에 'Google 애널리틱스' 항목에서 '애널리틱스 ID' (GA- 또는 UA-로 시작하는 측정 또는 추적아이디) 입력 GA4의 경우 간단한 설정으로 코드삽입 없이 전자상거래 구현도 가능합니다. '전자상거래용 추적'을 사용으로 변경합니다. 이후 GA4의 속성에서 API secret값을 가져와 입력 후 저장합니다. GA4 API secret 값 찾기 GA4 계정에서 좌측하단 '관리' -> 속성아래 '데이터 스트림' 선택 열린 화면에서 '측정 프로토콜 API 비밀번호' 선택 '약관검토' 후 '만들기' 선택 '닉네임'설정하고 '만들기' 생성된 측정 프로토콜 API 복사 (네모 둘이 겹쳐진 아이콘 선택으로도..
애널리틱스 전자상거래 구글애널리틱스 전자상거래는 사용자가 물건을 구입을 시작하고 완료하기까지의 경로를 파악하게 해 주는 기능입니다. HTML 삽입 미리보기할 수 없는 소스
아임웹 구글 전환 / 리마케팅설정 아임웹은 카페 24에서 제공하는 구글 전환설정과 달리 자체전환을 생성하여 전송하는 방식이 아니라 구글 애즈에서 생성한 전환을 연결하는 방식을 채택합니다. 구현하는 방식이 전환 수동태그를 직접 삽입한 형태와 비슷하여 향상된 전환 등을 설정할 때 수동태그와 같은 방식으로 구현가능한 장점이 있습니다. 아임웹에서는 '구매완료', '네이버페이' (구매완료를 설정해야만 사용가능), '회원가입', '폼제출', '전체 페이지 조회' 전환을 제공합니다. 설정을 위해 먼저 구글애즈에서 전환을 설정합니다 (제공되는 전환의 종류에 따라 설정) -> 전환설정하기 설정 메뉴 이동 아임웹 관리자 로그인 -> 좌측메뉴에서 '마케팅 관리' -> '전환추적/리타게팅 관리' 선택 리마게팅 설정하기 아래와 같이 리마케팅 아이디 칸에 'AW..
프로젝트 - 그림판 그림판 애플리케이션 index.html 5 10 15 20 25 30 35 40 45 50 png jpg jpeg Save main.css @import url('https:fonts.googleapis.com/css?family=Poppins&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } canvas { background-color: aliceblue; } .controls { height: 50px; background-color: rebeccapurple; display: fle..
단위 CSS에는 글자의 크기나 길이를 표현하기 위한 다양한 단위가 존재합니다. 단위는 크게 상대단위와 절대단위로 구분이 가능한데요. 상대단위는 기준이 되는 대상의 크기에 따라 동적으로 변하는 단위로 아래와 같은 단위들이 존재합니다. 1. em 부모에게 상속받은 현재 폰트를 1em으로 두고 그에 비례하여 크게 또는 작게 하는 단위. 부모에 비례하기 때문에 아래와 같이 여러 대의 부모를 가지는 경우 연속적으로 이전 부모에 의존하여 통제가 힘들어질 수 있습니다. 1 1 2 3 다만, 텍스트 요소가 다른 요소를 포함하는 경우 이러한 크기는 상속되지 않습니다. no no 2. rem 기본 폰트를 1rem으로 두고 그에 비례하여 크게 또는 작게 하는 단위. em에 root가 붙은 형태로 항상 루트를 기준으로 하여 통제가..

728x90