Programming/프로그래밍 (16) 썸네일형 리스트형 클릭하면 나타나는 이미지 클릭하면 나타나는 이미지 html, CSS, jQuery, Javascript를 이용해 웹페이지에서 특정 영역을 누르면 이미지가 나타나고 해당 이미지를 누르면 이미지가 사라지는 소스를 간단히 작성해 보았습니다. 동그란 영역을 누르면 이미지가 나타납니다. 그리고 나타난 이미지를 다시 누르면 해당 이미지가 사라집니다. 직접 사이트 링크를 걸어 놓았으니 테스트 해보실 분들은 링크에서 확인 하시면 됩니다. - http://enjoyrank.com/blog/jjangku.html 소스는 아래 걸로 가져다 쓰시면 됩니다. 이미지와 jQuery 모두 웹에 있는 것을 가져와 사용한 것이기에 소스 그대로 가져와 사용 하시면 됩니다. Click Me!! 비주얼 스튜디오 코드 한글 설정 방법 비주얼 스튜디오 코드 한글 설정 방법 텍스트 파일 작업을 할 땐 메모장을 주로 사용하다 이후엔 에디트플러스를 주로 사용했습니다. 그리곤 최근엔 비주얼 스튜디오 코드 프로그램을 주로 사용합니다. 텍스트 관련 작업할 것이 많다 보니 가벼우면서 좋은 기능이 담겨 있는 프로그램으로 선택하게 되었던 것 같습니다. 그런데 처음 설치를 하고 보니 메뉴가 모두 영어로 표시되더군요. 한글로 변경하기 위해 노란색 화살표 방향에 확장 메뉴를 선택해 주세요. 그리고 Korean Language Pack 글자를 입력하시면 설치 목록이 표시되며 Korean Language Pack for Visual Studio Code를 install 해주시면 됩니다. 설치가 완료되면 오른쪽 하단에 Change Language and Rest.. 크롬 개발자모드 CSS 코드 추가하기 크롬 개발자모드 CSS 코드 추가하기 이해되지 않는 CSS 코드가 있는 경우 크롬 브라우저에서 테스트 코드를 작성하는 편 입니다. 직접 눈으로 보며 CSS 코드를 적용하다 보면 브라우저에서 CSS 코드를 적용할 때 불편한 부분이 몇 가지 있지만 개발자 도구를 잘 활용하면 좀 더 편해집니다. 크롬 개발자 도구 오른쪽 부분에는 현재 웹페이지의 CSS 코드가 표시됩니다. 이미 기존에 표시된 CSS 코드의 아이디, 이름, 태그를 직접 수정해 CSS 코드를 수정해서 테스트해 봐도 되지만 기존 CSS를 수정하지 않고 CSS 코드 라인을 추가하는 방법이 있습니다. CSS 코드가 표시된 영역을 자세히 보시면 +로 표시된 아이콘이 하나 있습니다. 해당 버튼을 눌러 보시면 현재 웹페이지에서 선택한 태그를 기준으로 새로운 .. 국비지원 프로그래밍 후기와 개인적인 생각 국비지원 프로그래밍 후기와 개인적인 생각 오래전 이야기지만 대학 때 처음 프로그래밍 언어를 접하였고 졸업 이후 취업을 하기 전까지 국비 지원으로 자바언어를 활용한 웹 프로그래밍 관련 수업을 들었습니다. 대학 수업 과목 중 자바 과목이 있었지만, 책에 있는 코드를 그대로 따라치고 실행 결과를 보는 것만으로는 프로그래밍 언어에 대해서 제대로 이해할 수 없었던 기억도 납니다. 국비지원 프로그래밍 교육에 대한 현실이나 후기에 대해 인터넷에 있는 정보들을 좀 찾아보게 되면 부정적인 의견이 꽤 있었던 기억이 납니다. 그런 수업을 듣는 것보다 스스로 어떠한 프로그램이나 환경을 구성하며 문제를 해결하는 방식으로 배우는 게 더 좋다고 하는 이야기들이 주로 있었던 것 같습니다. 이러한 의견에 대해서는 전적으로 동의하며 프.. 크롬 브라우저 개발자 모드 활용ㆍ 소스 파일에 있는 특정 단어를 검색해 파일 찾기 크롬 브라우저 개발자 모드 활용ㆍ 소스 파일에 있는 특정 단어를 검색해 파일 찾기 웹 프로그래밍 관련 작업을 진행하면서 특정 소스 코드 파일을 찾기 쉽지 않은 경우가 있습니다. 물론 소스를 열어서 직접 소스 구문을 확인하며 첨부된 파일들을 찾을 수 있지만 첨부된 파일이 많은 경우나 소스 코드가 복잡하게 작성된 경우 찾기 쉽지 않은 경우도 꽤 있습니다. 소스 코드 파일의 특정 단어를 검색해 해당 파일을 찾으시려면 크롬 브라우저에서 F12를 눌러 개발자 모드를 열어 주시면 됩니다. 아래 이미지와 같이 크롬 브라우저의 개발자 모드에서 Sources 메뉴를 선택하시고 구름 모양의 아이콘에 현재 웹페이지의 주소가 나오는 부분을 마우스 오른쪽 버튼으로 선택해 주시면 Search in all files 팝업이 하나 .. 누구나 쉽게 소스 코드를 작성하고 결과를 확인할 수 있는 방법은? 누구나 쉽게 소스 코드를 작성하고 결과를 확인할 방법은? 프로그래밍 언어에 따라서 코드를 작성하고 테스트하기 위해서 설치해야 하는 프로그램의 종류도 굉장히 다양했고 환경을 설정해야 하는 부분 때문에 굉장히 불편했었습니다. 그래서 개인적으로 가장 간편하고 쉽게 바로 프로그래밍 코드를 작성하고 결과를 바로 확인해 볼 수 있는 게 어떤 게 있을까 생각을 해보니 JavaScript 언어를 통해서 가장 간편하고 쉽게 프로그래밍 코드를 작성하고 테스트해 볼 수 있었던 것 같습니다. 클라우드 개발 툴 같은 것을 이용해 자신이 원하는 언어의 환경을 웹상에서 세팅하여 코드를 테스트해 볼 수 있긴 합니다만 개인적으로 가장 쉬운 방법으로 Javascript 언어가 떠올랐습니다. 작성하는 기준은 윈도우 환경 기준이지만 어떠한.. 크롬 브라우저 개발자 모드를 활용해 이동경로 추적 및 로그 확인 크롬 브라우저 개발자 모드를 활용해 이동경로 추적 및 로그 확인 웹 프로그래밍을 하면서 이전에 크롬 브라우저의 개발자 모드를 활용하는 방법에 대해 간략히 작성한 적이 있습니다. https://zzarungna.com/1400 예전엔 웹페이지의 이동 경로를 추적하기 위해서 특정 프로그램을 설치해 웹페이지에서 이동되는 경로를 확인한 적이 있었는데 이제는 크롬 브라우저를 활용하면 그럴 필요가 없었습니다. 크롬 브라우저의 네트워크 기능을 제대로 활용한 건 얼마 전 업무를 보던 중 중간에 다른 서버에 있는 API 경로를 다녀오고 다시 제가 관리하는 서버로 돌아오는데 그러한 경로들이 크롬 브라우저에 Network log에 전혀 찍히지 않다 보니 소스만으로는 제대로 된 경로들을 확인하기 힘들었습니다. 결과적으론 다른.. 프로그래밍 언어의 종류 및 통계 어떠한 언어를 선택할까? 프로그래밍 언어의 종류 및 통계 어떠한 언어를 선택할까? IT 기술이 발전하며 프로그래밍 언어도 점차 진화되었습니다. 최초 기호나 부호를 이용했던 프로그래밍 언어는 시대 발전 흐름에 따라 사용할 수 있는 프로그래밍 언어의 종류도 굉장히 다양해졌습니다. 최근에는 어떠한 프로그래밍 언어가 많이 사용되며 인기 있는 프로그래밍 언어에는 어떠한 것들이 있는지 알아보고자 합니다. 현재 사용하고 있는 언어들이 중 많이 사용되는 것들은 동그라미가 좀 더 큽니다. 처음 보는 언어도 매우 많기도 익숙한 프로그래밍 언어들도 꽤 있는 것 같습니다. 아래 이미지는 이렇게 프로그래밍 언어가 다양하다는 것을 보여드리기 위해서 가져왔습니다. 프로그래밍 언어 사용 통계(github) 2014년~2019년까지 github 사이트에서 제.. 이전 1 2 다음
