웹 프로젝트를 진행하면서 html에서 views.py로 데이터를 전송해줘야 할 필요가 있었는데 데이터를 딕셔너리 형태로 변환해 줘서 보내야 했다. 딕셔너리는 key값과 value값을 가지고 저장이 되어서 key값으로 접근하여 원하는 값을 빠르게 찾을수 있다는 장점이 있어다. 물론 파이썬에서는 딕셔너리를 완벽히 구현할 수 있으나 자바스크립트는 아직 부족한 부분이 많아 정리해 두려고한다 아래의 예제들만 알면 앞으로 딕셔너리 구현은 쉽게 할수 있을거 같다. 소스코드 // Dictionary 사용하는 방법 var dictObject = {} dictObject['apple'] = '사과'; dictObject['banana'] = '바나나'; dictObject['orange'] = '오렌지'; console...
부가적인 기술 스펙트럼/자바스크립트
자바스크립트를 이용하여 html에서 이미지첨부를 할 수 있는 기능이다. 구현한 기능 이미지는 선택사항입니다. 라는 글을 선택 시 이미지를 선택할 수 있는 창이 뜹니다. 이미지 선택후 확인을 누르면 아래의 검은색 상자에 선택한 이미지가 들어갑니다. HTML구조 이미지는 선택사항입니다. (PNG, JPG) CSS 구조 .img_upload_box{ margin: 0px 50px; } .img_upload_text{ text-align: center; margin: 3px 0px; } form li{ background: #f5efe8; border: solid 2px #e0dbd4; display: flex; justify-content: space-between; margin-bottom: 10px; } ..
자바스크립트를 통해 원하는 필터를 클릭하여 설정하여 주는 기능을 추가하는 기능이다. 구현한 기능 1. 기본적으로 전체 선택만 클릭된 상태에 다른 선택지를 선택하면 클릭한 부분을 선택하고 전체선택이 해제된다. 2. 아무 선택지나 선택이되어 있는 상황에서 전체선택을 누르면 전체선택만 선택되고 나머지는 해제된다. HTML 구조 전체 선택 면 밥 빵 CSS구조 .menu-link { float: left; width: 25%; font-size: 18px; font-weight: bold; line-height: 60px; height: 60px; color: #a4a29d; cursor: pointer; } .menu-active { color: #FF8868; } 자바스크립트 구조 function check..
