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


<데스크톱 버전>


구분선 요소 가이드


*구분선 요소는 수평의 선을 그어 요소와 요소 간의 영역 구분 또는 디자인적인 요소로도 자주 활용되는 요소입니다.








1) 구분선 요소를 추가할 섹션 위에서 마우스 우 클릭 -> 요소 추가를 클릭하여 요소 추가 사이드바를 열고  "구분선" 요소 아이콘을 클릭하여 요소를 추가합니다.





image.png








2) 구분선 요소를 삽입 시 위 사진과 같이 하나의 수평선이 추가됩니다.(본 가이드에서는 설명을 위해 3개의 요소를 추가)


3) 추가된 구분선의 스타일을 변경하기 위해 변경할 구분선 요소 위에 마우스 우 클릭 -> 구분선 설정 창을 열어줍니다.




image.png








4) 설정 창에서 선의 너비, 두께, 모양, 정렬 위치, 색상 등의 스타일 값을 적용할 수 있습니다.




image.png







<삽입된 구분선의 스타일 값을 적용한 모습>




image.png







<구분선 활용 사례>


image.png





<구분선 활용 사례>


image.png










<모바일 버전>


구분선 요소 가이드


*구분선 요소는 수평의 선을 그어 요소와 요소 간의 영역 구분 또는 디자인적인 요소로도 자주 활용되는 요소입니다.








1) 구분선 요소를 추가할 섹션 위에서 마우스 우 클릭 -> 요소 추가를 클릭하여 요소 추가 사이드바를 열고  "구분선" 요소 아이콘을 클릭하여 요소를 추가합니다.




image.png









2) 구분선 요소를 삽입 시 위 사진과 같이 하나의 수평선이 추가됩니다.(본 가이드에서는 설명을 위해 3개의 요소를 추가)


3) 추가된 구분선의 스타일을 변경하기 위해 변경할 구분선 요소 위에 마우스 우 클릭 -> 구분선 설정 창을 열어줍니다.



image.png









4) 설정 창에서 선의 너비, 두께, 모양, 정렬 위치, 색상 등의 스타일 값을 적용할 수 있습니다.



image.png








<삽입된 구분선의 스타일 값을 적용한 모습>




image.png