테스트 사이트 - 개발 중인 베타 버전입니다

뷰페이지 좌우 확장기능 채택완료

더루차 2년 전 조회 4,201

https://www.law.go.kr/lsSc.do?section=&menuId=1&subMenuId=15&tabMenuId=81&eventGubun=060101&query=%EB%B2%95%EC%9D%B8%EC%84%B8#undefined">국가법령정보센터 | 현행법령 > 법령명 (law.go.kr)

 

안녕하세요 국가법령정보센터 라는 정부 페이지의 법령을 볼때 

왼쪽엔 리스트 오른쪽엔 법령이 나오게 되는데

 

가운데 버튼을 눌리면 리스트만 나오거나 둘다 나오거나 뷰페이지만 나오거나 할 수 있습니다.

 

아래 캡쳐와 같은 기능을 가진 스킨이 이미 있을까요..?

 

혹은 기능을 구현 하려면 자바스크립트로 css만 변경해주면 될까요..?

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

해당 페이지는 자바스크립트로 비동기 통신(ajax)를 이용하여 구현한 페이지입니다.

 

법령명을 클릭시 법령명에 해당하는 ID를 ajax로 요청하면, 해당 페이지가 구성된 html을 응답한후, 응답된 데이터를

자바스크립트로 교체해주는 방식으로 구현되었습니다.

 

저대로 기능을 구현하시려면

 

1. list 페이지에서 list의 제목을 클릭하면 자바스크립트로 ajax요청을 view페이지로 한다음

2. view 페이지에서는 본문만 (헤더와 푸터 등 제외하고) 응답

3. 응답된 본문을 list 페이지의 어느 한곳에 출력.

 

구현 흐름은 이렇게 하시면 될것 같습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

더루차
2년 전
댓글 감사합니다! 서버가 불안정 해서 겨우 들어왔습니다 ..

현재 제 사이트에는 말씀하신대로 리스트에서 제목 클릭시 ajax로 뷰페이지를 불러와서 보여주고 있습니다.

제 질문은 스크린샷에 표시된 곳의 화살표를 눌러서 좌우로 확장하는 기능 말씀드린건데
혹시 그 부분 설명 해주신 걸까요~?
N
NDWEB
2년 전
데이터를 불러오고 계시다면 UI 쪽만 구현해주시면 되겠네요.

UI 구현중 어려운 부분이 있으신가요?

구현 기술은 html, css, javascript 입니다.
더루차
2년 전
javascript 사용해서 css 변경으로 조금 진행해보려고 하는데 어렵네요 .. list 안 보이게 하면서 동시에 뷰페이지를 늘려야 하니..

댓글을 작성하려면 로그인이 필요합니다.

4
2년 전

그냥 메뉴만 움직이는거면

 

https://codepen.io/4st/pen/NWLQQYO

이렇게라도...

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

더루차
2년 전
비슷한 느낌이긴 한데 div로 list 쪽, view 쪽 나뉘어 있습니다.
버튼 하나를 눌리면 하나는 display : none 되고 하나는 width : 100%로 먹이면 될듯한데 어렵네요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인