× 4월의 특별한 혜택 프리미엄 12개월 요금 결제 시 NHN KCP(전자결제 PG)가입비 22만원 면제! 자세히 보기
가이드
[요소 가이드] 텍스트
빈페이지닷컴 2020-08-12 16:20:59


<데스크톱 버전>


텍스트 요소 가이드


1. 텍스트 입력







1) 텍스트 요소를 삽입할 섹션에서 요소 추가 사이드 메뉴를 열고 "텍스트" 요소 아이콘을 클릭하면 텍스트 요소가 아래와 같이 삽입됩니다.


2) 최초 삽입 시에는 더미 텍스트가 적혀있지만 편집모드에서만 보이는 가상 텍스트이며 원하는 텍스트로 수정 가능합니다.


image.png










3) 삽입된 텍스트 요소 위에 마우스 커서를 올린 후 더블 클릭(좌)을 하면 텍스트 편집창이 열리게 됩니다.




image.png









4) 아래 사진과 같이 텍스트 편집창이 열리면, 편집 도구를 활용하여 편집 영역 내부에 자유롭게 텍스트를 입력하고 스타일을 적용할 수 있습니다.





image.png










5) 원하는 내용을 모두 입력하였다면, X 버튼 또는 편집창 외부를 클릭(좌) 하면 편집창이 닫히면서 아래 사진과 같이 편집창에서 입력한 내용이 적용됩니다.



<편집창에서 입력한 텍스트가 적용된 모습>



image.png










2. 텍스트 요소 영역에 스타일 적용하기






1) 삽입된 텍스트 요소 위에 마우스 커서를 올린 후 우 클릭 팝업메뉴를 호출한 후 "텍스트 설정"을 클릭하여 요소 설정 창을 엽니다.



image.png








2) 요소 설정 창에서는 텍스트는 직접 편집하는 것이 아닌 텍스트 요소가 차지하는 영역에 대한 스타일을 지정할 수 있습니다.



image.png









3) 위 사진과 같이 배경 이미지 삽입 및 색상, 여백, 선 두께 설정 등을 한 후 설정 창을 닫으면 아래 사진과 같이 지정한 스타일이 텍스트 요소 영역에 적용된 것을 확인할 수 있습니다.



<요소 설정 값이 적용된 텍스트 요소>



image.png









<모바일 버전>


텍스트 요소 가이드


1. 텍스트 입력






1) 텍스트 요소를 삽입할 섹션에서 요소 추가 사이드 메뉴를 열고 "텍스트" 요소 아이콘을 클릭하면 텍스트 요소가 아래와 같이 삽입됩니다.


2) 최초 삽입 시에는 더미 텍스트가 적혀있지만 편집모드에서만 보이는 가상 텍스트이므로 신경 쓰지 않으셔도 됩니다.



image.png











3) 삽입된 텍스트 요소 위에 마우스 커서를 올린 후 더블 클릭(좌)을 하면 텍스트 편집창이 열리게 됩니다.




image.png











4) 아래 사진과 같이 텍스트 편집창이 열리면, 편집 도구를 활용하여 편집 영역 내부에 자유롭게 텍스트를 입력하고 스타일을 적용할 수 있습니다.




image.png









5) 원하는 내용을 모두 입력하였다면, X 버튼 또는 편집창 외부를 클릭(좌) 하면 편집창이 닫히면서 아래 사진과 같이 편집창에서 입력한 내용이 적용됩니다.



<편집창에서 입력한 텍스트가 적용된 모습>




image.png













2. 텍스트 요소 영역에 스타일 적용하기






1) 삽입된 텍스트 요소 위에 마우스 커서를 올린 후 우 클릭 팝업메뉴를 호출한 후 "텍스트 설정"을 클릭하여 요소 설정 창을 엽니다.



image.png









2) 요소 설정 창에서는 텍스트는 직접 편집하는 것이 아닌 텍스트 요소가 차지하는 영역에 대한 스타일을 지정할 수 있습니다.




image.png










3) 위 사진과 같이 배경 이미지 삽입 및 색상, 여백, 선 두께 설정 등을 한 후 설정 창을 닫으면 아래 사진과 같이 지정한 스타일이 텍스트 요소 영역에 적용된 것을 확인할 수 있습니다.


<요소 설정 값이 적용된 텍스트 요소>



image.png