! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

CSS로 UI 요소 수정 하는 방법 문의 > Q&A | 토론

본문 바로가기

Forguncy

Q&A | 토론

기타 CSS로 UI 요소 수정 하는 방법 문의

페이지 정보

작성자 eunt20 작성일 2022-04-28 11:15 조회 805회 댓글 2건
제품 버전 : V7

본문

안녕하십니까. 노고에 수고가 많으십니다.




 


위 그림에 나타나는 페이지 탐색 기능을 사용하고 싶은데, 중간에 있는 숫자를 지우고 싶습니다. CSS를 써야 할 거 같은에 페이시 설정에는 화면에 Javascript만 업로드 할 수 있도록 되어 있네요.


CSS를 별도로 만들어 UI 요소를 수정하는 방법이 있을까요?



  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

천년나무님의 댓글

천년나무 작성일

그림 안나와요. 아마 이 글을 참고하셔야 할 거 같네요.

https://dev.grapecity.co.kr/bbs/board.php?bo_table=forguncy_qna&wr_id=20&page=4

1 답변

기타 Re: CSS로 UI 요소 수정 하는 방법 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK싸이먼 작성일 2022-04-28 15:15 댓글 0건

본문

eunt20 님 안녕하세요? GCK 싸이먼 입니다.


Forguncy는 JavaScript와 CSS를 사용하여 고객님들이 원하는 디자인과 동작을 커스터마이징 하실 수 있습니다. 고객님이 작성한 CSS를 사용하는 방법은 아래의 링크를 참고하시면 고객님의 프로젝트에 CSS 코드를 적용하시는 데 도움이 될 것입니다.

Forguncy 프로젝트에서 사용자 작성 CSS를 적용하는 방법


문의하신 내용으로 eunt20 님께서는 아래 그림과 같이 페이지 탐색 기능을 디자인하고 싶으신 것으로 이해했습니다.

6d88cd764db9c9ff51e0d5d7bb042032_1651126385_0455.jpg 


사용자가 작성한 CSS를 적용하여 페이지 탐색 기능에서 가운데 숫자를 지우는 방법은 아래와 같습니다.


1. 페이지 탐색 요소를 선택하여 CSS 클래스 이름을 부여합니다.

6d88cd764db9c9ff51e0d5d7bb042032_1651126396_2385.jpg


2. 프로젝트를 실행합니다. 웹 브라우저가 실행되면 개발자 도구(단축키 F12)를 사용하여 부여된 CSS 클래스 하위 항목들의 구성요소를 확인합니다.

6d88cd764db9c9ff51e0d5d7bb042032_1651126405_1315.jpg


3. 우리가 없애고 싶은 항목은 test로 명명된 클래스의 하위 div 요소의 하위 div 요소 안의 3번째 div에 위치하고 있습니다.(글로는 이해가 어려울 수 있으니 아래 그림 속의 화살표를 참고해 주십시오.)

6d88cd764db9c9ff51e0d5d7bb042032_1651126413_6677.jpg


4. 아래와 같이 CSS 코드를 작성합니다.

6d88cd764db9c9ff51e0d5d7bb042032_1651126425_1258.jpg 


※ 페이지 탐색 기능은 element.style에 display: inline-block 코드가 적용되어 있습니다. 우리가 작성한 코드보다 우선순위가 높기 때문에 작성한 코드가 적용되지 않습니다. 따라서 display: none important;로 작성해야 고객님께서 원하시는 동작을 보실 수 있습니다.



5. [시작] 버튼을 클릭하여 CSS가 적용된 화면을 확인합니다.

6d88cd764db9c9ff51e0d5d7bb042032_1651126385_0455.jpg 


관련하여 궁금하신 사항은 언제든 Q&A 게시판에 질문 남겨주십시오. 최선을 다해 설명드리겠습니다. 감사합니다.


Simon 드림.


댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.