본문 바로가기

컴퓨터 프로그래밍

 (78)
[Django] 기본중의 기본 python, Django를 들어가기 전에 알아야 될 것들 장고를 시작하기 앞서 python 자주 사용하는 자료형과 함수형태에 대해서 알아보도록 하겠습니다. 매번 args, kwargs가 해깔렸었잖아요 먼저 자료형에 대해서 정리해보겠습니다. 딕셔너리란? {Key1: Value1, Key2: Value2, Key3: Value3, ...} 먼저 딕셔너리는 중괄호로 둘러쌓여 있습니다. 그리고 key 와 value값을 쌍으로 이루어져 있습니다. 이 딕셔너리 타입은 json 형태와 동일하며, serializer를 사용할때 자주 보실 형태입니다. key값을 통해 value값을 찾을 수 있습니다. 리스트란? 리스트명 = [요소1, 요소2, 요소3, ...] 리스트는 우리가 흔히 알고 있는 배열과 같은 형태에요. 단순히 요소들을 넣을수 있는 자료형입니다. 간단하게 순서대로 ..
[Django] VSCode 에서 django 자동완성이 안될 경우 우리가 개발하다 보면 이런 경우가 많이 발생한다. 바로 자동완성이 안되는 경우이다. 방법을 찾아봐도 뭐가 문제인지 잘 문제 파악이 안된다. VS Code 아래쪽 interpreter문제인지 해서 클릭해본다. 으음...? 잘 잡혀있는거 같은데 뭐가 문제일까. 여러가지 인터프리터가 있네요. 어떤걸 선택해야될지도 모르겠고. 한번 선택 해 보아도 자동완성 기능이 활성화 되지 않는다. 여전히 똑같은 현상 발생.... 아 몇일 전까지 잘되던 자동완성 기능이 왜 안되냐고!!! 프로젝트를 다시 불러와서 틀어서 그런가 ?
피그마 7일차 - 플러그인 Break points를 이용한 반응형 웹사이트 만들기! 안녕하세요 시란입니다. 이번 시간에는 반응형 홈페이지를 쉽게 작업하는 방법을 알아보도록 하겠습니다. 먼저 준비물은 각 웹 홈페이지가 되겠습니다. 사이즈별로 desktop 버전, 모바일버전, 태블릿버전을 만들어줍니다. 그리고 버튼 배치나 아이콘 배치를 각각 해주면 됩니다. 저는 아래 사진과 같은 예시 페이지들을 가져왔습니다. 그리고 나서 반응형 페이지 작업을 쉽게 도와주는 breakpoints라는 어플을 설치하도록 하겠습니다. 현재 breakpoints는 유료네요. 이 breakpoints라는 플러그인은 우리가 지금 준비한(만든) 모바일화면, 태블릿 화면, 데스크톱 화면을 하나의 프레임으로 만들어서 해당 프레임의 크기를 변경하면 자동으로 모바일, 태블릿, 데스크톱으로 변경해줍니다. 무료버전 사용하기를 통해..
피그마 6일차 - 피그마 필수 과정 Layout Grid 설정 안녕하세요 시란입니다. 레이아웃에 그리드 설정하는 방법을 알아보도록 하겠습니다. 먼저 레이아웃 그리드는 디자인을 할때 정렬 및 컴포넌트들을 배치하는데 도움이 됩니다. 디자인 할때 기본 구조 작업을 한다고 생각하면 편합니다. 다음번에 기회가 된다면 그리드 또는 작업선에 대해서 좀더 자세한 얘기를 해보고 싶네요. 일단 레이아웃 그리드를 만드는 방법에 대해서 알아보도록 하겠습니다. 자 먼저 데스크톱 프레임을 만들어줍니다. 작업 크기는 조금 변경해서 w, h 값을 1600과 2000으로 맞춰봅니다. 그리고 나서 프레임을 클릭한 후 우측 아래쪽 작업창을 보시면 layout grid 라는 항목이 있습니다. 해당 항목을 +를 눌러줍니다. 그럼 아래 그림과 같이 빽빽하게 그리드가 생성됩니다. 이 그리드는 우리가 원하는..
피그마 5일차 - 컴포넌트를 이용한 슬라이드쇼 만들기 안녕하세요 시란입니다. 이번 포스팅에서는 저번 포스팅에서 배운 컴포넌트를 이용해서 이밎 슬라이드쇼를 한번 만들어보겠습니다. 저번 포스팅에서 다룬 컴포넌트와 애니메이션을 응용한 내용들이니 만약 모르는 개념이 있다면 저번 포스팅을 참고하는것도 나쁘지 않겠네요 https://siran.tistory.com/277 먼저 완성본을 보여드릴께요. 아래처럼 사진들이 쭉 배치되어있고 화살표 버튼이 있어요. 화살표 버튼을 누르면 아래처럼 그림이 변경되고, 아래 프리뷰 사진도 변경되어야 합니다. 우리가 자주 보던 이미지 슬라이드쇼랑 비슷하죠? 한번 만들어보도록 하겠습니다. 일단 사진 4장을 먼저 준비해주세요. 그리고 나서 제일 처음에 해야될 부분은 프레임 생성이에요. 가장 기본이죠? 프레임 클릭한후 오른쪽 작업창에서 맥북..
피그마 4일차 - 컴포넌트 개념 및 애니메이션 효과 ..2 저번 포스팅에 이어 이번에도 컴포넌트 작업과 애니메이션 효과를 표현해보겠습니다. 자 여기까지 지난 작업 내용이였어요. 이 만든 버튼을 컴포넌트화 시켜보겠습니다. 먼저 만든 버튼을 마우스 드래그 해서 선택합니다. 그리고 나서 메뉴의 빨간 사각형 부분을 클릭해줍니다. 그러면 왼쪽 작업 화면이 변화된 것을 확인할 수 있습니다. 자세히 보시면 아이콘도 변경되었어요. 바로 컴포넌트화 되었다고 할수 있습니다. 이제 이 컴포넌트의 variant를 추가해보겠습니다. 아래 화면처럼 해당 버튼을 누르면 됩니다. 버튼을 누르면 아래처럼 우리가 만든 버튼 모양이 하나 더 생기게 됩니다. 이런식으로 + 버튼을 눌러서 새로운 variant를 추가시킬 수 도 있습니다. 여기까지 잘 따라하셨죠? 이제는 두번째 버튼의 색을 변경해봅시..
피그마 3일차 - 컴포넌트 개념 및 애니메이션 효과 ..1 안녕하세요 시란입니다 . 이번시간엔 피그마의 꽃이라 할수있는 컴포넌트의 개념에 대해서 알아보고 프로토타입 탭을 통한 애니메이션 효과를 주는 방법에 대해 알아보겠습니다. 피그마는 컴포넌트 개념을 통해서 내가 만든 UI/UX가 어떻게 동작하는지 정확하게 동료들에게 보여줄 수 있겠죠? 예를 들어 버튼을 클릭했을 때 색깔이 변했으면 좋겠다. 또는 버튼을 클릭했을때 다른곳으로 이동하면 좋겠다. 등등이 있겠죠? 물론 말로 설명해도 좋지만 직접 보여준다면 그보다 더 효과적인 의사소통이 없겠죠? 이런 애니메이션 효과와 인터렉션효과를 줄수있는 부품, 요소들을 만들어서 여러 페이지에 사용할 수 있는 작업을 하면 됩니다. 컴포넌트란 간단하게 말하면 부품이라는 의미이며, 부품 틀을 만들어서 해당 부품들을 찍어낸다 생각하시면 ..
피그마 2일차 - 에디터를 활용한 카드 UI 만들어보기 안녕하세요 시란입니다. 이번시간에는 앞서 배운 에디터를 이용해서 카드UI를 만들어보겠습니다. 우리가 직장에서 일하다보면 카드뉴스라던지 카드콘텐츠들을 많이 보거나 받아보셨을꺼에요 이번시간에는 에디터를 활용해서 웹사이트에서 볼법한 콘텐츠 카드를 한번 만들어보겠습니다. 먼저 pixabay를 통해서 무료사진을 하나 가져왔습니다. 이 사진을 가져올 프레임을 먼저 만들어야겠죠? 프레임 크기는 240 x 400으로 만들어줍니다. 오른쪽에 W와 H값을 변경하면 240x 400 사이즈로 제작 가능하겠죠? 카드의 배경이 될 프레임의 색상은 FFFFFF로 고정합니다. 오른쪽 메뉴중 FILL부분을 수정하면 되겠죠? 그리고 카드 이미지의 모서리를 둥글게 만들어주겠습니다. 마찬가지로 오른쪽 메뉴에서 아래와 같이 라운드 입력란을 ..

티스토리툴바