텍스트와 이미지 추가

Core team 구성원은 다음 카드를 사용하여 사이트에 텍스트와 이미지를 추가할 수 있습니다.

• 행 카드 - 사이트의 구성 요소입니다. 모든 카드는 행 카드 내에 중첩되어야 합니다. 이미지와 배경 색상을 행 카드에 추가할 수 있습니다. 또한 이 카드를 사용하여 시차 효과를 낼 수 있습니다.
• 텍스트 카드 - 이 카드를 행 카드에 드롭하여 텍스트를 사이트에 추가할 수 있습니다. 또한 이 카드를 사용하여 버튼, 목록, 테이블, 사용자 정의 코드를 사이트에 추가할 수 있습니다.
• 이미지 카드 - 독립형 이미지를 사이트의 행 카드에 추가할 수 있습니다.

시작하려면 ArcGIS Enterprise에 로그인한 다음 오버뷰 페이지에서 사이트를 클릭하여 사이트 목록을 확인합니다.

팁:

브라우저에서 사이트를 볼 때도 사이트를 편집할 수 있습니다. 로그인하고 사이트 좌측에서 편집 버튼을 찾으세요.

텍스트 추가 및 서식 지정

행 카드가 있는 위치에서 텍스트를 사이트에 추가할 수 있습니다.

1. 사이트 또는 페이지를 편집 모드로 엽니다.
2. 행에 텍스트 카드를 추가합니다.
3. 텍스트를 추가합니다.
4. 서식을 지정할 텍스트를 선택합니다. 형식 옵션에는 스타일(헤더, 코드 조각, 인용 문자 추가), 굵게, 기울임꼴, 링크가 포함되어 있습니다.
5. 텍스트 크기를 변경하려면 스타일 버튼을 클릭하여 헤더 크기를 선택합니다.
6. 텍스트 정렬을 조정하려면 단락 옵션을 클릭하고 정렬을 선택합니다. 또한 단락 옵션을 선택한 후 들여쓰기 또는 내어쓰기 옵션을 선택하여 한 줄의 텍스트를 들여쓰거나 내어쓸 수 있습니다.

   팁:

   잘못 수행한 경우 키보드의 Command+Z 또는 Ctrl+Z 키를 눌러 변경 내용을 되돌립니다.

7. 저장을 클릭합니다.

텍스트 색상 변경

사이트의 모든 텍스트에 동일한 색상을 적용하려면 사이트의 테마 설정을 사용하여 텍스트 색상을 변경할 수 있습니다. 또는 행 설정을 사용하여 행별로 텍스트 색상을 조정할 수 있습니다.

1. 사이트 또는 페이지를 편집 모드로 엽니다.
2. 사이트 또는 페이지의 모든 텍스트에 대한 색상을 설정하려면 측면 패널을 열고 테마 메뉴를 확장합니다. 테마에 대한 자세한 내용은 헤더 및 테마 옵션으로 사이트 브랜딩을 참고하세요.
3. 특정 행의 색상을 설정하려면 행의 연필 모양 편집 을 클릭합니다.
4. 16진 색상 코드를 입력하거나 색상 선택기에서 색상을 선택하여 색상을 변경합니다.

   팁:

   16진 색상 코드를 사용하면 기관의 리소스 전반에 일관된 브랜딩을 유지할 수 있습니다. 기관의 브랜딩과 관련된 특정 요구 사항이 확실하지 않은 경우 설명서 또는 브랜드 지침이 있는지 확인하세요.

5. 저장을 클릭합니다.

글꼴 변경

Google Fonts를 사용하여 텍스트 머리글 및 기본 텍스트의 글꼴을 변경할 수 있습니다. 기본 텍스트에는 사이트 레이아웃의 모든 텍스트가 포함됩니다. 이 글꼴은 사이트, 사이트에서 검색을 통해 접속한 항목 세부정보 페이지, 이벤트 뷰에 추가한 모든 페이지에도 적용됩니다.

자세한 내용은 ArcGIS Hub 및 ArcGIS Enterprise 사이트의 텍스트 형식 지정을 참고하세요.

글머리 기호 목록 또는 번호가 매겨진 목록 추가

다음 단계에 따라 목록을 생성합니다.

1. 사이트 또는 페이지를 편집 모드로 엽니다.
2. 사이트 또는 페이지 레이아웃에 텍스트 카드를 추가합니다.
3. 텍스트를 추가하거나 기존 텍스트를 선택합니다.
4. 순서가 지정되지 않은 목록을 클릭하여 글머리 기호 목록을 만들거나 순서가 지정된 목록을 클릭하여 번호 목록을 추가합니다.
5. 저장을 클릭합니다.

아코디온 메뉴 생성

자주 묻는 질문을 추가할 수 있는 옵션인 접을 수 있는 메뉴를 추가합니다.

1. 사이트 또는 페이지를 편집 모드로 엽니다.
2. 레이아웃에 텍스트 카드를 추가합니다.
3. 삽입 버튼을 클릭하고 아코디언을 선택합니다.
4. 텍스트를 추가하고 서식을 지정합니다.
5. 저장을 클릭합니다.

독립형 이미지 추가

파일의 이미지를 업로드하거나 호스팅 이미지의 URL을 제공하여 이미지를 추가할 수 있습니다. 내부적으로 공유된 이미지는 Core team 또는 기관에 속하며 로그인한 사용자만 볼 수 있습니다.

1. 사이트 또는 페이지를 편집 모드로 엽니다.
2. 이미지 카드를 기존 행에 추가합니다.
3. 해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
4. 이미지 원본을 선택합니다. 이미지 파일을 업로드하거나 이미지 URL을 제공할 수 있습니다. 두 옵션 모두 JPG, JPEG, PNG가 지원됩니다.
   • 이미지 파일을 업로드하려면 이미지 업로드를 선택한 다음 파일을 사이트 편집기 내의 해당 상자에 드래그하거나 이미지 찾아보기를 클릭하여 파일을 찾아 추가합니다. 최대 파일 크기는 3MB입니다.
   • 또는 이미지 URL을 선택한 다음 지원되는 이미지 링크를 URL 필드에 붙여넣어 이미지 URL을 제공합니다.
5. 이미지 파일을 사용할 경우 자르기 버튼을 클릭한 다음 핸들을 드래그하여 자르기 프레임의 크기를 조정하는 방식으로 업로드된 이미지를 사용자 정의할 수 있습니다. 점선을 클릭하고 드래그하여 자르기 프레임의 위치를 조정할 수 있습니다. 또한 이미지 아래의 슬라이더를 조정하여 이미지를 확대하거나 자르기 프레임 내를 클릭하여 이미지 위치를 추가 조정할 수 있습니다.
6. 옵션 메뉴에서 이미지 대체 텍스트를 입력하여 시력이 약한 사용자에게 도움을 주고 사이트의 접근성을 향상시킬 수 있습니다.
7. 이미지 하이퍼링크를 제공하고 해당 링크가 동일한 탭이나 새 탭에서 열리도록 선택합니다.

   비고:

   접근성 지침(입력 3.2.2 및 G201 기술)에서는 사전 경고가 표시되지 않으면 링크를 새 탭이나 창에 열지 말도록 권장합니다.

8. 이미지 캡션의 텍스트를 입력하고 텍스트 정렬을 선택합니다.
9. 필요한 경우 이미지 크기를 채우기로 조정을 클릭하여 이미지의 초점을 설정합니다. 초점을 설정하면 이미지가 다양한 화면에 맞게 크기가 조정될 때 원하는 위치에 초점이 맞춰진 상태로 유지됩니다.
10. 저장을 클릭합니다.

버튼 생성

섹션, 페이지 등의 다른 위치 링크가 있는 버튼은 유용한 탐색 도구입니다. 버튼에는 작업 유도도 포함할 수 있습니다.

1. 사이트 또는 페이지를 편집 모드로 엽니다.
2. 레이아웃에 텍스트 카드를 추가합니다.
3. 삽입 버튼을 클릭하고 버튼을 선택합니다.
4. 행동 지침을 포함하도록 버튼의 텍스트를 편집합니다.
5. 방금 추가한 버튼을 클릭한 다음 링크 버튼을 클릭합니다.
6. 아직 텍스트를 추가하지 않은 경우 표시할 텍스트 텍스트 상자에 텍스트를 추가합니다.
7. 사용자가 버튼을 클릭하는 경우 사용자를 이동시킬 링크를 URL 텍스트 상자에 붙여넣습니다.
8. 링크 삽입을 클릭하여 변경 사항을 확인합니다.
9. 저장을 클릭합니다.
버튼 색상에 대한 정보는 테마 생성을 참고하세요.

배경 이미지 및 색상 추가

행 카드를 사용하여 다른 카드 뒤에 이미지를 추가할 수 있습니다.

팁:

이미지 위에 텍스트나 콘텐츠를 표시하는 경우 밝거나 어두운 배경 색상을 선택합니다. 예를 들어, 밝은 색상의 텍스트를 사용하거나 밝은 색상의 맵을 표시하는 경우 텍스트가 선명하게 보이도록 검은색과 같은 어두운 배경 색상을 선택합니다. 그런 다음 이미지가 계속 보이도록 색상의 투명도를 조정합니다.

1. 사이트 또는 페이지를 편집 모드로 엽니다.
2. 레이아웃에 행 카드를 추가합니다.
3. 해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
4. 배경 이미지에서 이미지 원본을 선택합니다. 이미지 파일을 업로드하거나 이미지 URL을 제공할 수 있습니다. 두 옵션 모두 JPG, JPEG, PNG가 지원됩니다.
   • 이미지 파일을 업로드하려면 이미지 업로드를 선택한 후 파일을 사이트 편집기 내의 해당 상자에 드래그하거나 이미지 찾아보기를 클릭하여 파일을 찾아 추가합니다. 최대 파일 크기는 3MB입니다.
   • 또는 이미지 URL을 선택한 다음 지원되는 이미지 링크를 URL 필드에 붙여넣어 이미지 URL을 제공합니다.
5. 이미지를 추가한 후에는 행 설정에서 16진 코드를 입력하거나 색상 선택기를 사용하여 배경 색상의 색상을 선택합니다.

   비고:

   배경 색상은 행 카드에만 지원됩니다.

6. 모양에서는 슬라이더를 사용하거나 백분율 필드에 값을 입력하여 이미지 투명도를 조정합니다. 이미지 투명도를 조정 수준에 따라 배경 색상이 밝아지거나 어두워집니다. 이 기술을 통해 색맹을 가진 사용자가 이미지와 텍스트에 손쉽게 볼 수 있는 상태로 유지할 수 있습니다.
7. 저장을 클릭합니다.

행 카드의 이미지 레이아웃 선택

각 행 카드에 있는 2개의 레이아웃 옵션을 통해 이미지가 표시되는 방식을 선택할 수 있습니다.

1. 이미지를 행 카드에 추가한 후 이미지와 콘텐츠가 와이드 또는 고정 레이아웃으로 카드에 표시되도록 선택할 수 있습니다.
   • 이미지를 사이트 너비에 걸쳐 표시하려면 와이드를 선택합니다.
   • 이미지를 고정 상태로 표시하려면 고정을 선택합니다.
2. 이미지 초점을 설정하면 이미지가 다양한 화면에 맞게 크기가 조정될 때 원하는 위치에 초점이 맞춰진 상태로 유지됩니다.
3. 저장을 클릭합니다.

HTML로 텍스트 구성

HTML을 사용하여 텍스트를 사용자 정의하려는 경우 다음 HTML 요소를 사용할 수 있습니다.

1. 사이트 또는 페이지를 편집 모드로 엽니다.
2. 텍스트 카드를 기존 행에 추가합니다.
3. 해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
4. 코드 뷰 옵션을 클릭합니다.
5. 코드를 입력합니다.
6. 저장을 클릭합니다.

주의:

보안을 위해 텍스트 카드에는 임베드된 JavaScript가 지원되지 않습니다. 스크립트 태그가 무시됩니다.

다음의 HTML 요소가 허용됩니다.

'a', 'abbr', 'acronym', 'address', 'article', 'audio', 'b',
	'bdi', 'bdo', 'big', 'blockquote', 'br', 'caption', 'center', 'cite',
 'code', 'col',
 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt',
	'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font',
	'footer', 'frameset',
	'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr',
 'i', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
	'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', 'p',
	'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp',
	'section', 'small', 'source', 'span', 'strike', 'strong', 'style'
 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'tfoot', 'textarea',
	'th', 'thead', 'time', 'title', 'tr', 'track, 'tt', 'u','ul',

이러한 요소에는 다음과 같은 속성이 허용됩니다.

All supported HTML elements allow : ['class', 'style'],
 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle',
 'name', 'rel', 'style', 'target'],
	'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload'],
 'blockquote': ['cite'],
	'button' : ['name', 'value', 'data-toggle', 'data-target',
	'data-dismiss'],
 'col' : ['span', 'width'],
 'colgroup' : ['span', 'width'],
	'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
	'font': ['size', 'color', 'style'],
 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title',
	'width'],
 'ol' : ['align', 'start', 'type'],
	'p' : ['style'},
 'q' : ['cite'],
	'source' : ['media', 'src', 'type'], 
	'span' : [style],
 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height',
	'style', 'summary', 'width'],
 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width'],
 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width']
 'tr' : [alignt, 'height', style', valign'],
 'ul' : ['type']