UBUNTU - ESP3D로 서버 연동 웹사이트 만들기(3. 이미지검색 페이지 만들기)

1. 저번에 진행 하던데에서 tab 내부의 내용을 구성하는 파일은 "LSH_commandpanel.html"이었습니다. 즉 이 부분을 잘 수정 하면 제가 원하는 이미지 검색하고 결과를 표시 하는 틀을 만들 수 있을 것입니다.

 

2. 일단 구상을 해 보면

(1) Commands 라는 글자와 Clear 버튼은 없애고

(2) 검색바와 검색 버튼을 위로 올리고

(3) 중간 부분에 이미지 결과를 도출 하면 될것 같습니다.

3. 일단 위에 구상 한 것 중에 (1) 부터 해 보겠습니다. 

   3-1. 이건 가장 쉬운데 그냥 Commands 와 버튼 있는 부분을 지우면 됩니다. 찾아 보니 '2 ~ 5' 번 라인이네요. 지워 주고 실행 해 봅니다.

   3-2. (2번은) 가장 아래의 검색바가 있는 위치에서 "check box" 를 없애고 div 째로 위로 올려 주면 될것 같습니다. "3-1" 이 진행 된 다음 5~끝까지가 해당 범위이니 이걸 수정 해 주고 위로 올려 줍니다.

4. 이제 검색어를 입력 하고 버튼을 눌렀을때 이미지를 검색 할 수 있도록 제가 만든 함수를 호출 하도록 짜 보겠습니다.

    4-1. LSH_commandpanel.html 안에서 onclick 시 호출 하는 함수를 바꾸어 주고 해당 함수를 만들어 주면 됩니다.

    4-2. 우선 호출 할 함수를 만들어 보겠습니다. 우선 (www -> js)폴더에 본인이 원하는 (저는 "lsh_app.js 로 했습니다.)파일을 만들고 함수를 그 한에서 생성 해 줍니다.

    4-3. 당연히 "LSH_commandpanel.html" 파일 내부의 함수 이름도 수정 해야 하며 index.html 파일에 "lsh_app.js" 를 include 해 주어야 합니다.

버튼을 눌러 보니 정상적으로 동작 함