초보 개발자의 개발 블로그

템플릿(template) 언어 django의 템플릿 언어(template language)는 강력함과 편리함 사이의 균형을 잡고자 설계되었다. 템플릿 언어를 사용하면 HTML 작업을 훨씬 수월하게 할 수 있다. 파이썬처럼 일부 프로그래밍 구조(if, for 등)를 사용할 수 있지만 이건 Python 코드로 실행되는 것이 아니다. django template에서 사용하는 built-in template system, 파이썬 변수 및 문법을 html 안에서 쓸 수 있도록 장고에서 제공해주는 언어이기 때문에 html과도 파이썬과도 조금 다르다. 템플릿 언어는 변수, 필터, 태그, 주석 등의 기능을 제공한다. 1. 변수, variables {{ variables }} 템플릿변수를 사용하면 뷰에서 템플릿으로 객체..

프로젝트 생성 프로젝트를 생성할 때는 Python이나 Django에서 사용중인 이름은 피해야 하며 '-'도 사용할 수 없다. $ django-admin startproject 프로젝트명 . * 서버 실행 $ python manage.py runserver 프로젝트 구조 __init__.py 빈 파일 Python에게 이 디렉토리를 하나의 Python 패키지로 다루도록 지시한다. settings.py 웹사이트의 모든 설정을 포함 만드는 모든 application이 등록되는 곳이며, static files의 위치, database 세부 설정 등이 작성된다. urls.py 사이트의 url과 view의 연결을 지정 wsgi.py Web Server Gateway Interface 장고 어플리케이션이 웹서버와 연결..

가상환경(Virtual environment) 장고 설치 전, 개발 환경을 깔끔하게 관리하는 데 큰 도움이 되는 도구를 설치해보자! 이 단계를 건너뛸 수 있지만, 한번 직접 해보는 것을 추천! 제대로 설치해야 나중에 문제가 발생하지 않는다!! 이제부터가상환경(Virtual environment), virtualenv을 만들어보자. virtualenv를 만드는 데 필요한 것은 생성할 곳을 정하는 것뿐이다. 1. 먼저 virtualenv를 만들 디렉토리를 먼저 새로 만들고 해당 디렉토리로 이동 $ mkdir 디렉토리명 $ cd 디렉토리명 2. 가상환경을 만든다. $ python -m venv 가상환경이름 3. 가상환경 활성화 $ source 가상환경이름/Scripts/activate * 비활성화 $ deac..

장고란 무엇인가? Django는 파이썬 기반의 무료 오픈소스 웹 애플리케이션 프레임워크(web application framework)이다. 쉽고 빠르게 웹사이트를 개발할 수 있도록 돕는 구성요소로 이루어진 웹 프레임워크다. 프레임워크(Framework) 웹사이트를 구축할 때, 비슷한 유형의 요소(빈번하게 반복적인 문제를 해결)들이 항상 필요하다. (→회원가입, 로그인/로그아웃 등의 사용자 인증 및 관리 문제, 자료의 업로드/다운로드 등) 이러한 기능들을 바로 사용할 수 있도록 구성요소들을 갖춘 편리한 개발환경을 만들어 놓은 것이 바로 프레임워크이다. 이는 매번 다시 발명해야 하는 문제로부터 해방감을 주고, 웹사이트를 개발할 때 뒤따르는 간접비용의 부담을 덜어준다. 장고의 특징 장점 비교적 쉬운 언어인 ..

🐸 Flexbox Froggy란 ? CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임 Flexbox의 속성을 실습하며 익히기 좋다. * FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 13단계. 개구리를 순서를 반대로 + 아래로 이동 + 가로선 상 중앙 정렬 #pond { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; } 14단계. 노란색 개구리를 제일 마지막으로 #pond { display..

🐸 Flexbox Froggy란 ? CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임 Flexbox의 속성을 실습하며 익히기 좋다. * FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 1단계. 개구리를 오른쪽으로 이동 #pond { display: flex; justify-content: flex-end; } 2단계. 개구리를 가로선 상 중앙 정렬 #pond { display: flex; justify-content: center; } 3단계. 수련잎 주위의 간격 고려하여 이동 #pond { display:..

Bootstrap Grid System Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a 12 column system, 6 default reponsive tiers, Sass variables and mixins, and dozens of predefined classes. Bootstrap이 가장 많이 사용되는 이유이자 반응형 웹페이지를 만들기 위해서 가장 많이 사용이 필요한 기능 Bootstrap Grid System은 flexbox로 제작되었다. container, rows, column으로 컨텐츠를 배치하고 정렬 반드시 기억할 2가지!!! 12개의 column, 약수가 충분..

Bootstrap Build fast, responsive sites with Bootstrap. Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. 트위터에서 시작된 오픈 소스 프론트엔드 라이브러리 웹 페이지에 많이 쓰이는 요소 거의 전부를 내장하고 있다. 별도의 디자인을 할 시간이 크게 줄어들고, 여러..

CSS Flexbox 오랫동안 CSS Layout을 작성할 수 있는 도구는 float 및 positioning 뿐이었다. 그로 인해 문제가 있는 것은 아니었지만, 어떤 면에서는 제한적이고 한계가 존재 Flexbox라 불리는 Flexible Box module은, Flexbox 인터페이스 내의 아이템 간 "공간 배분"과 강력한 "정렬"기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었다. 요소 간 공간 배분과 정렬 기능을 위한 1차원(단방향) 레이아웃 크게 딱 2가지만 기억할 것! 요소! 그리고 축! 요소 Flex Container (부모 요소) Flex Item (자식 요소) 축 main axis (메인축) cross axis (교차축) Flexbox의 시작 Flex Container를 선언하는 것으로..

CSS Float 한 요소(element)가 정상 흐름(normal flow)으로부터 빠져, 텍스트 및 인라인(inline)요소가 그 주위를 감싸 요소의 좌/우측을 따라 배치되는 것을 지정한다. (블록 요소는 아니다!!) 본래는 이미지 좌, 우측 주변으로 텍스트를 둘러싸는 배치 용도로 도입 (ex. 신문형식) 더 나아가 이미지가 아닌 다른 요소들에도 적용해 웹 사이트의 전체 레이아웃을 만드는데까지 발전했다. Float 속성 none : 띄우지 않음 (기본 값) left : 선택한 요소를 왼쪽으로 띄움, 페이지 내용은 박스 오른쪽에 위치 right : 선택한 요소를 오른쪽으로 띄움, 페이지 내용은 박스 왼쪽에 위치 inherit : 부모 요소로부터 상속함 Float clear float 속성을 통해 태그를..