그림

그림 요소는 다른 요소와 별도로 캔버스에 삽입할 수 있는 이미지 자리 표시자입니다. 그림 요소는 섹션이나 div 블록과 같은 요소에 적용되는 배경 이미지와 다르다는 점을 기억하세요.

이 튜토리얼에서는 다음을 알아봅니다.

1. 그림을 삽입하는 방법
2. 그림 설정 조정 기술
3. 사진 교체 단계
4. 사진 스타일링 방법
5. 대체 텍스트를 포함하는 방법

그림을 삽입하는 방법

다음에서 Webflow 사이트에 그림을 삽입할 수 있습니다.

• 삽입 패널
• 리소스 패널
• 빠른 검색
• 당신의 장치

메모: 사진의 최대 파일 크기는 4MB입니다.

귀중한 정보: Webflow는 리소스 패널에 사진을 업로드할 때 사진의 반응형 변형을 생성합니다. 그럼에도 불구하고 Webflow에 업로드하기 전에 사진을 최적화하는 것이 좋습니다. 사진 해상도에 대해 자세히 알아보세요.

인터넷에서 사용되는 가장 일반적인 사진 파일 형식에 대해 읽어보세요.

삽입 패널

삽입 패널에서 그림 요소를 삽입하려면:

1. 다음으로 이동하세요. 패널 삽입
2. 클릭하고 드래그하세요. 그림 Webflow 캔버스에 요소

자리 표시자를 사진 파일 중 하나로 바꾸려면:

1. 다음을 선택하세요. 그림 캔버스의 요소
2. 방문하다 요소 설정 패널
3. 선택하다 사진 선택
4. 이전에 업로드한 사진을 선택하거나 '구름” 아이콘을 클릭하면 새 사진을 업로드할 수 있습니다. 리소스 패널

리소스 패널

일단 사진을 업로드하시면 리소스 패널을 사용하면 그림을 캔버스로 끌 수 있습니다.

다음 3가지 방법으로 리소스 패널에 사진을 업로드할 수 있습니다.

1. “를 클릭하세요.구름” 아이콘이 리소스 패널 기기에서 업로드하고 싶은 사진을 선택하세요.
2. 장치에서 사진을 끌어다 놓으세요. 리소스 패널
3. 사진을 캔버스에 직접 드래그 앤 드롭하세요.

리소스 패널에 그림을 삽입하는 방법에 대해 자세히 알아보세요.

빠른 검색

빠른 검색은 Webflow Designer에 통합된 강력한 검색 창입니다. 다음을 사용하여 빠른 검색을 시작할 수 있습니다. 명령 + 이자형 (Mac의 경우) 또는 제어 + 이자형 (Windows의 경우) 리소스 패널에 업로드한 사진을 이름으로 검색하세요.

당신의 장치

장치에서 캔버스로 직접 그림을 끌 수 있습니다.

사진 업로드 문제를 해결하는 방법

사진을 업로드하려고 할 때 "업로드 실패" 경고가 표시되면 다음을 확인하세요.

• 그림 파일: 사진 파일이 손상되지 않았는지, 지원되는 파일 확장자가 올바르고 4MB보다 크지 않은지 확인하세요.
• 인터넷 연결을 확인하세요: 느린 인터넷 연결(최소 5mbps)에서도 사진을 업로드할 수 있어야 합니다. 인터넷 속도에 문제가 없는지 확인하려면 인터넷 연결을 다시 확인하고 신호 강도를 확인하세요. 인터넷 연결 문제를 해결하는 방법을 알아보세요.
• 브라우저 확장 프로그램을 검사하세요: 특정 브라우저 확장 프로그램은 Webflow Designer에 사진을 업로드할 때 문제를 일으킬 수 있습니다. 시크릿 모드 또는 비공개 탐색 창에서 사진을 업로드해 보거나 브라우저 확장 프로그램 문제를 해결하는 방법을 알아보세요.

영상 설정을 조정하는 방법

이미지 설정에 액세스하려면 네 가지 방법을 사용할 수 있습니다. 처음에는 캔버스에서 이미지 구성 요소를 선택한 후 다음을 수행합니다.

1. 이미지 구성요소를 두 번 클릭합니다.
2. 을 치다 입력하다/반품 키보드의 키
3. 이미지 구성 요소 라벨 옆에 있는 "기어" 모양의 아이콘을 클릭하세요.
4. 누르다 디 또는 요소 설정 패널

이내에 이미지 설정, 귀하는 다음을 수행할 수 있습니다.

• 이미지 선택 — 기본 자리 표시자를 다음의 이미지로 바꿉니다. 자산 패널. 이미지 구성 요소를 두 번 클릭하고 선택하세요. 이미지 선택 ~로부터 이미지 설정 창문
• 이미지 크기 조정 — 이미지의 너비 또는 높이에 대한 특정 픽셀 값을 지정합니다. 이러한 치수는 모든 중단점에 적용되지만 너비 및 높이에 대한 개별 설정은 요소 설정 패널 각 중단점마다. 모서리를 드래그하여 이미지 크기를 조정할 수도 있습니다. 이미지 크기 조정은 상위 요소의 크기를 초과하지 않습니다.
• 이미지에 대해 HiDPI 모드 활성화 — 이 상자를 선택하면 이미지의 픽셀 너비가 절반으로 줄어듭니다. 예를 들어 너비가 600px인 이미지는 300px로 표시됩니다. 이 픽셀 밀도는 대부분의 HiDPI 모바일 디스플레이에서 최적의 이미지 품질을 보장합니다.
• 로드 동작 지정 - 이미지 로드 기본 설정을 수정합니다. "지연" 로딩은 페이지 로드 시 눈에 보이는 접힌 부분 위에 이미지를 로드하고 사용자가 스크롤할 때 접힌 부분 아래의 이미지를 로드합니다. "빠른" 로딩은 사이트 로드 중에 페이지의 모든 이미지를 즉시 로드하며 "자동" 로딩은 브라우저의 환경에 따라 조정됩니다. 설정

대체 이미지 콘텐츠

캔버스에 이미지를 삽입한 후 필요할 때마다 유연하게 대체할 수 있습니다. 이미지를 교체하려면:

1. 캔버스에서 이미지를 강조 표시합니다.
2. 다음으로 이동하세요. 요소 설정 패널 > 이미지 설정
3. 선택하다 이미지 교체 열다 자산 패널
4. 기존 이미지를 선택하거나 새 이미지를 업로드하세요.

이미지 미학 향상

활용 스타일 패널 이미지의 시각적 매력을 향상시킵니다. 배경 스타일과 같은 일부 스타일 속성은 이미지에 적용되지 않습니다. 이미지가 포함된 오버레이 효과를 얻으려면 배경 이미지를 대신 활용하는 것이 좋습니다.

클래스를 활용하여 이미지의 스타일을 지정하면 여러 이미지에 클래스를 적용할 수 있으므로 시간 효율성이 최적화됩니다. 클래스에 적용된 스타일은 클래스와 관련된 모든 이미지에 영향을 미칩니다. 이 방법은 다음을 통해 크기 사양을 설정할 때 특히 유리한 것으로 입증되었습니다. 스타일 패널 대신에 요소 설정 패널. 클래스를 활용하면 각 이미지의 크기를 수동으로 조정할 필요가 없습니다.

다음은 이미지에 멋을 더하기 위해 활용할 수 있는 스타일 속성의 몇 가지 예입니다. 

• 코너 반경: 하나 이상의 측면에 둥근 모서리를 구현합니다. 반경을 정의하려면 스타일 패널 > 테두리 > 반지름.
• 그림자: 이미지의 모양을 향상시키기 위해 그림자 효과를 만듭니다. 그림자를 설정하려면 스타일 패널 > 효과 > 상자 그림자.
• 필터: 흐림 효과, 회색조, 세피아 톤과 같은 다양한 필터를 적용하세요. 필터를 추가하려면 스타일 패널 > 효과 > 필터.

대체 텍스트 추가

설명 텍스트는 이미지 "내부"에 숨겨진 이미지(캡션과 달리 사이트 페이지에 표시되지 않음)를 간결하게 묘사한 것으로, 이미지를 표시하거나 볼 수 없을 때 해당 이미지를 해석합니다. 이는 시각 장애 또는 시각 장애가 있는 개인이 이미지 콘텐츠를 이해하는 데 도움이 되며, 이미지 파일이 로드되지 않았거나 사용자가 이미지를 보지 않기로 선택한 경우 이미지 대신 표시됩니다. 검색 엔진은 대체 텍스트를 활용하여 이미지의 내용을 식별합니다.

이미지에 대체 텍스트를 추가하려면:

1. 캔버스에 그림을 선택하세요
2. 액세스 요소 설정 패널 > 이미지 설정
3. 로 진행 대체 텍스트 그리고 선택 맞춤 설명
4. 드롭다운 메뉴 아래 공간에 대체 텍스트를 구성합니다.

이미지가 단지 장식용인 경우(즉, 가치 있는 정보를 제공하지 않는 경우) 다음을 선택할 수도 있습니다. 장식적인 대체 텍스트 드롭다운에서

다음에서 대체 텍스트를 지정할 수도 있습니다. 자산 패널 그러면 자산 패널에서 사이트에 이미지를 추가할 때마다 이미지에 대체 텍스트가 포함됩니다.

동적 대체 텍스트 구현

동적 컬렉션 목록과 컬렉션 템플릿 페이지에서 이미지 요소를 사용할 수 있습니다. 이미지 필드에 대한 자세한 내용을 알아보세요.

이러한 이미지에 대한 동적 대체 텍스트를 구성하려면:

1. 다음을 선택하세요. 영상
2. 다음으로 이동하세요. 요소 설정 패널 > 이미지 설정
3. 확인하다 다음에서 대체 텍스트 가져오기
4. 이미지의 대체 텍스트(예: '이름')가 포함된 섹션을 선택하세요.