• 가이드

사이트에 공통으로 CSS, 스크립트를 삽입하고 싶어요. (공통 코드, 코딩)

아임웹은 기본적으로 사용자가 코딩을 몰라도 사이트, 쇼핑몰을 제작할 수 있도록 제작되었습니다. 하지만 아임웹에서 제공하지 않는 디자인이나 기능구현을 위해서는 특별한 코드가 필요할 수 있습니다. 예) 탑 버튼, 구글 태그 매니저 등

일반적으로 아임웹에 코드를 삽입할 때는 디자인 모드에서 코드 위젯을 사용합니다. 다만 이 경우 코드 위젯을 여러 페이지에 삽입해야 하는 불편함이 있을 수 있습니다. 코드 위젯은 페이지마다 최소한의 코드로 HTML 정도만 작성하시는 것이 좋으며, 공통으로 사용할 CSS나 JavaScript는 SEO, 헤더설정에서 공통 코드 삽입 후 코드 위젯에서 호출하는 것이 좋습니다.

공통 코드 삽입방법

  1. 사이트 관리자 메뉴에 접속합니다. 접속방법
  2. 왼쪽 관리 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭합니다.
  3. 공통 코드 삽입 항목에 코드를 입력합니다.

    SEO, 헤더설정에 입력한 코드는 모든 페이지의 HTML에 공통으로 삽입됩니다. 따라서 CSS 작성 시 <style> 과 </style>을 선언하여 이 사이에 삽입해야 하며, JavaScript 또한 <script> 와 </script> 선언 후 이 사이에 삽입합니다.

    • Meta Code : 네이버 및 Google 웹마스터 도구의 사이트 소유 확인용 메타 태그는 이곳에 삽입합니다.
    • Header Code : 이곳에 작성한 코드는 모든 페이지의 HTML 와 사이에 삽입됩니다.
    • Body Code : 이곳에 작성한 코드는 모든 페이지의 바로 아래 삽입됩니다. 를 선언하고 JavaScript를 입력할 수도 있습니다.
    • Footer Code : 이곳에 작성한 코드는 모든 페이지의 바로 위에 삽입됩니다. 를 선언하고 JavaScript를 입력할 수도 있습니다.
  4. 저장 버튼을 클릭해 적용합니다.

코드 활용예제

예를 들어 사이트에 플로팅 배너를 추가하려는 경우 SEO, 헤더설정에 공통 코드를 삽입할 수 있습니다. 이후 특정 페이지에서는 작동하지 않거나, 보이지 않도록 처리할 수 있습니다. 다음 도움말에서 확인해보세요.

플로팅 배너 만들기

목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

115.6K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

297

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 채널, 엑심베이 공식파트너입니다.