반응형 ○ WEB157 [장고 실전2] 1. 블로그 : DB, CRUD, 파이썬 DB 반영하기 CRUD Create, Read, Update, Delete 데이터 처리의 기본 덕목 데이터를 저장하고 저장 대상을 가공하는 행동 예시) 인스타그램에서 게시글 작성, 읽기, 수정, 삭제 / 쿠팡 회원정보 작성, 읽기, 수정, 삭제 장고를 위한 DB의 상호작용 장고 : 백엔드 웹프레임워크 장고에서 DB를 활용하려면 DB와 연결, 상호작용해야해 장고와 같은 SW가 DB에 접근할 수 있게 SW를 DBMS라고해 DB Server DB안에 데이터를 삽입/삭제/수정 등을 할 것인데 이 데이터를 관리하기 위해 DBMS라는 프로그램을 이용. DBMS에는 MySQL, ORACLE, SQL Server, SQLite 등이 있다. 데이터를 표처럼 관리해주는 DBMS를 RDBMS(관계형 데이터베이스)라고 한다. 참고로 DB접.. 2021. 3. 12. [장고 실전] 3. 카페앱 : 디테일 페이지 만들기 1-1. 프로젝트폴더 > urls.py에 다음 코드 추가 path('detail/', views.detail, name="detail") 1-2. index.html 1.에서 url : ~detail/ 을 'detail'로 지정했기에 를 하단 처럼 단순화 시켜주자. 나머지 portfolio-details.html으로 지정된 값들도 {% url 'detail' %} 으로 수정한다. 2. 앱폴더 > views.py에 다음 코드 추가 def detail(request) : return render(request,'portfolio-details.html') 3. runserver를 통해 portfolio-details.html 이 정상적으로 실행되는지 확인 4. base.html : 템플릿 상속을 통해 por.. 2021. 3. 12. [장고 실전] 2. 카페앱 : 웹에 구글 지도 위치 사용하기 www.google.co.kr/maps Google Maps Find local businesses, view maps and get driving directions in Google Maps. www.google.co.kr 위 링크로 들어간 뒤, 사용하고자 하는 주소를 검색한다. 그 후 공유 클릭 공유에서 지도퍼가기 > HTML 복사를 클릭해서 사용하면 된다. 지도 크기 조절도 가능하다. 2021. 3. 12. [장고 실전] 1. 카페앱 : img위치를 static 폴더로 수정 우선 기본적으로 1. 가상환경 설치 / 실해 2. 장고설치 3. 프로젝트 및 앱 설치 4. 프로젝트폴더 > settings.py 앱 등록 5. 프로젝트폴더 > urls.py : url, 함수 연결 6. 앱 폴더 > views.py : 함수 및 연결 html 작성 7. 앱 폴더 > templates 폴더 생성 8. 부트스트랩 활용 : 부트스트랩에서 다운받은 html을 templates 폴더로 이동 9. 프로젝트 폴더 > settings.py : static 위치 설정 10. 베이스 디렉터리에 static 폴더 생성 11. static 폴더에 디자인 요소 폴더(css,img,js,vendor) 넣기 옮겨야하는 폴더들의 위치는 다음과 같다. 위 폴더들을 그대로 static폴더로 넣어준다. 11. runserv.. 2021. 3. 12. [드림코딩] 무료 폰트, 무료 로고 이미지 사이트 폰트 어썸 : 다양한 로고, 아이콘을 제공해주는 사이트Font AwesomeThe world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.fontawesome.com구글 폰트 : 다양한 폰트 다운로드Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com CSS를 게임으로 길러보자CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.ioCSS FlexBox 연습.. 2021. 3. 3. [드림코딩] 반응형 헤더(Responsive Header) 만들기. 종합 정리 간단하게 반응형 헤더를 만들어보자이를 위해 사용할 파일 3가지index.htmlstyle.cssmain.js1 단계 : 기본적인 반응형 웹 형태 만들기1. html1-1. head- 구글 폰트에서 사용할 폰트의 링크를 복사,붙여넣기- 폰트 어썸의 CDN을 복붙한다. 우측 최상단 프로필이미지 클릭 > CDN 클릭 현재 index.html의 헤드태그는 다음과 같다. 1.2 body참고로 Font Awesome에서 이미지의 Copy HTML은 다음 위치에 있으며 이를 body태그에 넣어준다. 현재 body 태그 InformationCenter 여기서 잠깐!코드를 수정하는 즉시 새로고침없이 확인할 필요가 있다.Live Server라는 Vscode 익스텐션을 활용하면 된다.설치했다면 F1 > Live Server.. 2021. 3. 2. [드림코딩] CSS : em, rem / Responsive CSS Units 프론트엔드 필수 반응형 CSS 단위 EM과 REMCSS 기본 형태selector { property : value; } 절대적 사이즈 유닛 : pxpx : Pixels픽셀이란, 모니터위에서 화면에 나타낼 수 있는 가장 작은 단위고정된 사이즈라 컨테이너 사이즈가 바뀌어도 폰트사이즈 그대로. 컨테이너에 따라 사이즈가 바뀔 수 있도록 px대신 %로 설정하기도 한다. 상대적 사이즈 유닛 중 주로 쓰이는 유닛부모 엘리먼트 기준으로 사이즈 할당부모 무관하게 브라우저 기준으로 사이즈 할당 1. 부모 엘리먼트 기준 할당em (%도 마찬가지)부모 엘리먼트를 기준으로 상대적으로 사이즈 반영현재 지정된 폰트 사이즈를 나타내는 단위.동일한 font-size라도 폰트 종류에 따라 사이즈가 달라짐1em == 16px (기본 ht.. 2021. 3. 2. [드림코딩] CSS 기초 : padding, display, position, flexbox, justify, align 기본 사이트CSS 참고서 - CSS: Cascading Style Sheets | MDNstyle-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] 아래 선택자, 의사 클래스, 의사 요소 목developer.mozilla.org기존 CSS 정리 목록CSS의 구성 모든 태그에 green 색상 적용하기 div태그는 빈박스라서 색상을 넣어도 반영이 되지 않는다.하지만 width, height를 지정하면 색상이 반영.. 2021. 3. 1. [드림코딩] HTML Emmet 문법 작성하기 div태그안에 ul태그 안에 li태그가 있는데 ol태그는 ul태그의 형제다.div>ul>li^ol div>header>(ul>(li>a)*2)^footer>pdiv>(header>ul>(li>a)*2)+footer>p p태그의 컨텐츠는 hellop{hello}hellop태그의 클래스 네임은 'class숫자' 이며 클래스네임은 'item숫자'. 1~5까지 총 5개를 만들어보자p.class${item$}*5 item1 item2 item3 item4 item5p태그에 더미용 텍스트를 넣자p>loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, eius, quos. Cumque dolorem veritatis non ipsa quasi d.. 2021. 3. 1. [드림코딩] HTML 시작하기 기본 참고서 : developer.mozilla.org/ko/docs/Web/HTML HTML: Hypertext Markup Language | MDN 와 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다. HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠 developer.mozilla.org ko.wikipedia.org/wiki/HTML HTML - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 최신 HTML 버전인 HTML5의 로고이다. 하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지를 ko.. 2021. 3. 1. [장고 실전] 1. free bootstrap template 검색 bootstrapmade.com/bethany-free-onepage-bootstrap-theme/download/ Bethany - Free Onepage Bootstrap Theme | BootstrapMade Subscribe to our newsletter to receive notifications of new templates and updates! bootstrapmade.com 2021. 2. 27. [장고 입문] 11. HTML 템플릿 언어 활용 / extends 템플릿 상속으로 중복코드관리 HTML에서 템플릿 태그를 통해 어떻게 URL 사이를 이동시킬지 배워보자 템플릿 상속이라는 개념을 통해 어떻게 하면 이 HTML을 효율적으로 활용할 수 있는지를 배우자 템플릿 언어로 html 지정하기 1,2,3 부분에 해당 먼저 프로젝트폴더 > urls.py 에서 name을 지정한다. 4,5 부분에 해당 프로젝트폴더 > urls.py에서 호출할 함수들은 앱 폴더 > views.py에서 작성됐으며 views.py에서 호출한 html은 앱 폴더 > templates 폴더 안에 작성됐다. 6 번에 해당 이 html을 템플릿 네임으로 불러오려면 앱 폴더 > templates > html파일안에 다음과 같이 작성해줘야 한다. {% url "name" %} 참고로 css를 호출한 템플릿 언어는 다음과 같다. 중복코.. 2021. 2. 26. [장고 입문] 10. 부트스트랩 활용편 getbootstrap.com/docs/5.0/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 이용방법 1. CDN 이용하기 (네트워크로 건네받아서 사용하는 방식) 2. 다운로드 : 실제 서비스를 할 때는 다운로드방식이 낫다. CDN방식 : 네트워크상으로 가져오기 위 코드를 프로젝트폴더 > 앱폴더 > templates폴더 > home.html의 헤드 태그에 복붙해준다. 다운로드방식.. 2021. 2. 26. [장고 입문] 9. Static 실전 / StaticFiles경로 설정 / Static_Root 사용 이유? 1. STATICFILES 경로 입력 프로젝트폴더의 settings.py 파일에서 최하단으로 내려보자 STATIC_URL : static파일이 제공되는 URL 위 코드에 이어서 STATICFILES_DIRS을 만들어 줘야 한다. 이를 위해 Static file들의 디렉터리 static을 만들자. 위치는 최상위 폴더인 프로젝트 폴더(베이스 디렉터리)의 바로 밑. 참고로 static폴더의 하위에는 css, img, js폴더를 만들어서 관리한다. 베이스 디렉터리의 settings.py로 돌아와서 다음과 같이 작성하여 static폴더를 지정하자. STATICFILES_DIRS = [ BASE_DIR / 'static', ] ※ 참고로 static이라는 이름으로 폴더를 만들어야 장고에서 인식한다. 2. html파.. 2021. 2. 26. [장고 입문] 8. static 개념 설명 웹 서비스 내부 데이터 1. static : 개발자가 웹 서비스 내부에서 미리 준비. css, js, img 2. media : 사용자가 업로드한 데이터 settings.py에서 다음 3개에서 static파일을 관리함 STATICFILES_DIRS : static 파일 경로 STATIC_ROOT : static 복사 파일 경로 모음 배포를 할 때 다음 명령어를 입력해서 STATIC_ROOT를 설정함 STATIC_URL : static 파일 제공 url 이렇게 함으로써 브라우저 단에서 접근할 수 있음 규모있는 웹 서비스를 만들게 될 때 필요한 기능 static파일들을 효율적으로 찾기 위함 Static file은 Javascript, CSS, Image 파일처럼 웹 서비스에서 사용하려고 미리 준비해 놓은 정.. 2021. 2. 26. [장고 입문] 7. include를 통해 프로젝트의 urls.py와 앱의 urls.py 연결하기 (url mapping) 전체 윤곽은 다음과 같다 기존 방식 : (프로젝트) Urls.py > (앱) Views.py > (앱) Templates (html) include를 활용한 urls매빙 방식 : (프로젝트) Urls.py > (앱) Urls,py > (앱) Views.py > (앱) Templates(html) 프로젝트 폴더의 urls.py 앞서 프로젝트 폴더의 urls.py에는 다음과 같이 작성했다 include('앱명칭.urls') 앱 폴더의 urls.py 이제 앱의 urls.py를 수정해보자 우선 체크 표시한 review앱의 urls.py를 수정하자. 작성할 URL 경로는 다음 2가지이며 127.0.0.1:8000/review 127.0.0.1:8000/review/first 각 URL에서 사용할 함수명은 다음과 .. 2021. 2. 26. [장고 입문] 6. urls.py 계층적 구성 : include 사용 기존 방식 (include 적용전) 프로젝트 폴더의 urls.py에선 url에 따른 동작을 함수로 지정했었다. 하지만 모든 url을 지정해야 하는 번거로움이 있다. 가령 127.0.0.1:8000/vision 은 함수로 지정했으나 127.0.0.1:8000/vision/1 그리고 127.0.0.1:8000/vision/2 와 같은 경우, 아직 지정함수가 없어서 하나하나 작성해야한다. 이제 이 작업을 단순화 시켜보자. 추가 앱 생성 settings.py에 생성한 앱 등록 생성한 각각의 앱 폴더안에 urls.py 생성 이후 프로젝트폴더의 urls.py에 다음처럼 include로 작성해준다. include('앱명칭.urls') 이렇게 작성해주면 뭐가 좋을까? 127.0.0.1:8000/review/ 127.0.. 2021. 2. 26. [실전] 1. 웹제작 가상환경 설치 및 실행 python -m venv myvenv source myvenv/Script/activate pip freeze 장고설치 pip install django 프로젝트 생성 django-admin startproject new_project 프로젝트 폴더로 이동 cd new_project 서버실행 후 정상동작확인 python manage.py runserver 앱 생성 python manage.py startapp myapp 생성한 앱 등록 프로젝트 폴더의 settings.py에 작성 앱 폴더에 템플릿폴더 제작 후 html만들기 프로젝트 폴더의 urls.py에서 url, 함수 지정하기 사용할 함수는 first 앱 폴더의 views.py에서 first함수 만들기 2021. 2. 24. 이전 1 2 3 4 5 ··· 9 다음 반응형
