컴포넌트란 배경, 레이아웃, 요소로 구분하며 사이트를 구성하는 단위의 유형이다.
1. 배경
‘배경’은 편집 영역 전체 화면에 고정적으로 표시할 수 있는 컴포넌트입니다.
배경 컴포넌트 위에 레이아웃, 요소 컴포넌트를 위에 쌓을 수 있습니다.
1-1. 이미지 배경
설정
•
이미지 불러오기 : 이미지를 불러오는 방식은 2가지가 있습니다.
◦
파일 업로드
▪
PC에 저장된 파일을 업로드
▪
1번에 최대 30MB까지 파일 업로드 가능
◦
임베드
▪
이미 저장된 파일 경로(url)입력
•
투명도 조절
◦
슬라이드를 좌우로 움직여 불러온 이미지의 투명도를 조절할 수 있습니다.
1-2. 동영상 배경
설정
•
동영상 불러오기 : 동영상을 불러오는 방식은 2가지가 있습니다.
◦
파일 업로드
▪
MP4형식의 파일을 업로드하여 배경으로 설정합니다.
◦
임베드
▪
YouTube, Vimeo 등의 외부 동영상 URL을 사용하여 배경에 적용합니다.
◦
반복 재생 설정
▪
on 설정시 배경 동영상이 한 번 재생된 후 자동으로 다시 반복 재생되도록 설정할 수 있습니다.
▪
off 설정시 배경 동영상이 한번만 재생되도록 설정합니다.
2. 레이아웃
레이아웃 타입의 컴포넌트는 콘텐츠의 배치를 조정하고 디자인의 균형을 맞추는 역할을 합니다.
2-1. 플렉스 박스
주요 개념•
수평 또는 수직 정렬하고 배치하는 레이아웃
•
다양한 화면 크기에 맞춰 자동으로 크기를 조정할 수 있습니다.
설정
•
크기
◦
너비, 높이
▪
단위 : %, px..로 입력 가능하며 단위 필수 입력.
•
*auto : 내부 요소가 콘텐츠 크기에 따라 자동 크기로 조정할 수 있도록 하는 값.
크기 관련 Tip.
•
컬러
◦
배경 색상
▪
컬러 코드 입력 가능.
▪
컬러 파레트에서 컬러를 선택.
▪
스포이드로 컬러 설정 가능
◦
투명도
▪
컬러의 투명도를 조절 가능
•
플렉스 박스 내 요소 편집
◦
배치
▪
플렉스 박스에 배치한 요소를 열/행으로 선택하여 배치할 수 있다.
▪
열로 배치하는 경우
▪
행으로 배치하는 경우
◦
세로 정렬
▪
열로 배치하는 경우 요소들을 앞/중앙/뒤를 기준으로 정렬 가능
◦
가로 정렬
▪
행으로 배치하는 경우 요소들을 왼쪽/중앙/오른쪽을 기준으로 정렬 가능
◦
간격
▪
플렉스 박스 내 요소들간의 간격을 늘리거나 줄일 수 있게 조정 가능.
2-2. 그리드
주요 개념•
그리드는 여러개의 요소를 체계적으로 배치할 수 있는 격자형 레이아웃
설정
•
그리드 개수
◦
그리드의 격자 수를 설정 가능
◦
최소 1개 이상으로 설정해야함.
•
크기(너비, 높이)
◦
단위 : %, px..로 입력 가능하며 단위 필수 입력.
▪
*auto : 내부 요소가 콘텐츠 크기에 따라 자동 크기로 조정할 수 있도록 하는 값.
•
배경 색상
◦
컬러 코드 입력 가능.
◦
컬러 파레트에서 컬러를 선택.
◦
스포이드로 컬러 설정 가능
•
투명도
◦
컬러의 투명도를 조절 가능
•
간격
◦
그리드가 2개 이상일 경우, 각 격자간의 간격을 정의하는 값.
2-3. 구분선
주요 개념•
콘텐츠 사이의 경계를 나누는 역할을 하는 단순한 요소이지만, 사이트의 가독성을 높이는데 사용됩니다.
설정
•
색상
◦
컬러 코드 입력 가능.
◦
컬러 파레트에서 컬러를 선택.
◦
스포이드로 컬러 설정 가능
•
구분선 굵기
◦
구분선 굵기를 크게,중간,작게로 설정 가능
2-4. 공백
주요 개념•
콘텐츠 사이의 간격을 조정하는 요소로 디자인의 균형을 맞출 수 있습니다.
•
요소간 밀집 또는 간격이 너무 좁을 경우 공백을 추가하면 가독성이 개선됩니다.
설정
•
크기
◦
너비, 높이
▪
단위 : %, px..로 입력 가능하며 단위 필수 입력.
•
*auto : 내부 요소가 콘텐츠 크기에 따라 자동 크기로 조정할 수 있도록 하는 값.
•
컬러
◦
배경 색상
▪
컬러 코드 입력 가능.
▪
컬러 파레트에서 컬러를 선택
▪
스포이드로 컬러 설정 가능
◦
투명도
▪
컬러의 투명도를 조절 가능
3. 요소
사용자가 직접 추가할 수 있으며 기본적인 UI 구성 요소로 이루어져 있습니다.
3-1. 텍스트
주요 개념•
사이트에서 제목, 본문, 설명 등을 표시하는 가장 기본적인 요소입니다.
설정
•
내용
◦
텍스트 영역에 들어갈 문구를 입력
◦
줄바꿈 가능
*참고. 하나의 텍스트 컴포넌트에 포함된 내용은 하나의 스타일로만 지정할 수 있습니다.
스타일을 다르게 분리하려면 또 다른 텍스트 컴포넌트를 생성해야 합니다.
•
글자 스타일
◦
글꼴
▪
글자 스타일을 지정
◦
글꼴 크기
▪
글자 크기를 지정
◦
색상
▪
글자 색상을 지정
◦
굵기
▪
글자 굵기를 지정
◦
정렬
▪
글자를 왼/중앙/오른쪽 정렬 가능
◦
텍스트 간격
▪
자간 : 글자간 간격을 조정
▪
행간 : 줄바꿈된 글자의 덩어리를 기준으로 줄간 간격을 조정
3-2. 버튼
주요 개념•
사용자가 특정 작업을 수행하도록 유도하는 인터랙티브한 요소입니다.
설정
•
내용
◦
버튼에 사용될 텍스트를 설정합니다.
◦
버튼 역할에 맞게 간결하고 직관적인 텍스트를 사용하면 좋습니다.
•
버튼 글꼴
◦
버튼에 사용될 글꼴을 설정합니다.
•
글꼴 크기
◦
버튼 내 텍스트 크기를 설정합니다.
•
글꼴 색상
◦
버튼 내 표시될 텍스트 색상을 변경할 수 있습니다.
•
버튼 색상
◦
버튼의 배경색을 설정할 수 있습니다.
•
버튼 너비
◦
버튼의 가로 길이를 설정합니다.
•
버튼 높이
◦
버튼의 세로 크기를 조정합니다.
•
버튼 모서리 곡률
◦
버튼의 모서리를 둥글게 만들 수 있습니다.
•
외곽선 굵기
◦
버튼의 테두리 두께를 조정할 수 있습니다.
•
외곽선 색상
◦
버튼 테두리의 색상을 변경할 수 있습니다.
•
전환 링크
◦
주소 : 버튼 클릭시 이동할 웹페이지 링크를 입력합니다.
▪
외부 링크 연결 가능합니다.
◦
열기 방식 : 현재창으로 이동하거나 새창으로 이동하는 2가지 방식이 있습니다.
3-3. 이미지
주요 개념•
이미지 요소는 웹사이트에 사진을 삽입할 수 있는 기능입니다.
설정
•
불러오기
◦
파일 업로드
▪
PC에 저장된 파일을 업로드
▪
1번에 최대 30MB까지 파일 업로드 가능
◦
임베드
▪
이미 저장된 파일 경로(url)입력
•
너비, 높이
◦
이미지 콘텐츠의 가로/세로 길이를 의미.
◦
단위 : %, px..로 입력 가능하며 단위 필수 입력.
▪
*auto : 내부 요소가 콘텐츠 크기에 따라 자동 크기로 조정할 수 있도록 하는 값.
•
크기 맞춤
◦
이미지가 컨테이너 안에서 어떻게 맞춰질지 설정
•
테두리 곡률
◦
이미지 모서리를 둥글게 조정
3-4. 동영상
주요 개념•
사이트에 비디오 콘텐츠를 직접 삽입하는 기능입니다.
설정
•
불러오기
◦
파일 업로드
▪
MP4형식의 파일을 업로드하여 배경으로 설정합니다.
◦
임베드
▪
YouTube, Vimeo 등의 외부 동영상 URL을 사용하여 배경에 적용합니다.
•
너비, 높이
◦
동영상 콘텐츠의 가로/세로 길이를 의미.
◦
단위 : %, px..로 입력 가능하며 단위 필수 입력.
▪
*auto : 내부 요소가 콘텐츠 크기에 따라 자동 크기로 조정할 수 있도록 하는 값.
•
자동 재생
◦
페이지 로드 시 자동으로 동영상 재생 여부 설정
•
반복 재생
◦
동영상을 무한 반복할지 여부 설정
3-5. 임베드
주요 개념•
사이트에 외부 콘텐츠를 삽입하는 기능입니다.
설정
•
주소
◦
URL 입력 : 외부 콘텐츠의 링크를 입력 (예: YouTube, Google Maps, 소셜 미디어 등)
•
크기
◦
너비, 높이
▪
임베드된 콘텐츠의 가로/세로 길이를 의미.
▪
단위 : %, px..로 입력 가능하며 단위 필수 입력.
•
*auto : 내부 요소가 콘텐츠 크기에 따라 자동 크기로 조정할 수 있도록 하는 값.