웹 (23) 썸네일형 리스트형 [Django] 템플릿 언어 (Template Language) / 2021.08.27 * 참고 자료 : 코드잇 Django 강의 템플릿 언어는 장고가 Template을 작성할 때 보다 편리하게 작성할 수 있도록 도와주는 것이다. 쉽게 말해, html을 작성할 때 프로그래밍을 하듯 작성할 수 있도록 해준다. 1. 템플릿 언어 템플릿 언어는 크게 4가지로 구분할 수 있다. (1) 템플릿 변수 : 우리가 지정한 데이터로 변환 {{ 변수명 }} view에서 template으로 원하는 데이터를 전달하고 template은 이 템플릿 변수를 이용해서 전달받은 데이터를 사용한다. 즉, 템플릿 변수는 view에서 템플릿으로 넘겨준 데이터로 해석되어서 변환된다. 그리고 템플릿 변수는 점 연산자를 지원한다. {{ 변수명.속성 }} 이 점 연산자는 변수의 내부 속성에 접근할 때 사용한다. 다음과 같은 순서로 .. [Django] 정적(static)파일 관리하기 / 2021.08.27 * 참고 자료 : 코드잇 Django 강의 * 코드잇에서 제공하는 파일을 사용하겠습니다. 1. 정적 파일 (static files) 정적 파일이란 html 파일을 제외하고 웹 페이지를 렌더링 하는 과정에서 필요한 추가적인 파일들을 말한다. 예를 들어 css, javascript, img, font 파일 등을 말한다. (1) 정적 파일 디렉터리 만들기 먼저 우리가 작업하고 있는 foods앱 안에 정적파일 관리를 위한 static디렉터리를 생성하고 static 디렉터리안에 앱 이름과 같은 foods 디렉터리를 생성하자. (2) 하위 디렉터리 만들기 static/foods 디렉터리 안에 정적 파일들을 그냥 넣을 수도 있지만 보통은 나누어서 하위 디렉터리를 생성해준다. static/foods 디렉터리 하위에 c.. [HTML/CSS] Border 테두리/ 2021.08.26 * 참고 자료 : 코드잇 HTML/CSS 강의 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 border .p1 { } Ice cream, chillin', chillin' Ice cream, chillin' Ice cream, chillin', chillin' Ice cream, chillin' I know that my heart can be so cold But I'm sweet for you, come put me in a cone You're the only touch, yeah, that get me meltin' He's my fa.. [HTML/CSS] Width, Height, Overflow / 2021.08.26 * 참고 자료 : 코드잇 HTML/CSS 강의 이 페이지를 예시로 width와 height, overflow를 공부해보자. 1. Width 먼저 첫번째 문단에 width: 500px을 설정해보면, 이렇게 가로가 500px로 설정된 것을 확인할 수 있다. (1) min-width min-width는 요소의 최소 가로길이를 뜻한다. min-width: 500px이라고 설정하면 요소의 길이가 최소 500px이라는 뜻이다. 웹페이지의 가로를 계속 늘리면 가로의 길이가 계속 늘어나지만 가로를 계속 줄여보면 가로가 최소 500px를 유지해 문단이 잘리는 것을 볼 수 있다. (2) max-width max-width는 요소의 최대 가로길이를 뜻한다. max-width: 500px이라고 설정하면 요소의 길이가 최대 5.. [HTML/CSS] Padding, Margin 패딩, 마진/ 2021.08.25 * 참고 자료 : 코드잇 HTML/CSS 강의 1. margin & padding 요소는 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. padding은 내용과 테두리 사이의 공간이며, margin은 요소 주위의 여백이다. 즉 padding은 안, margin은 밖을 말한다. 그림으로 나타내면 이런식이다. 먼저, 다음 코드로 만들어진 사이트가 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 .. [Django] Template과 렌더링 / 2021.08.25 * 참고 자료 : 코드잇 Django 강의 앞선 포스팅에서 문자열 Hello, Django! 를 출력하기 위해 코드를 다음과 같이 적어줬었다. 하지만 여기서 단순히 문자열만 있는게 아니라 여러 요소가 포함된 코드를 출력하려면 views파일이 너무 어지럽혀진다. 만약 더 많은 요소를 views파일을 더럽히지 않으면서 리턴 하고 싶다면 어떻게 해야 할까? 1. HTML 파일로 만들기 장고에서는 HTML과 같이 화면 구성을 담당하는 것을 Template라고 한다. 많은 요소들을 더 깔끔하게 관리하기 위해서 새로운 HTML 파일을 생성해보자. (1) templates 디렉터리 생성 우리는 foods앱을 작업 중이니 foods앱 안에 Template파일을 넣어줄 templates디렉터리를 생성하자. 그다음 tem.. [Django] Hello, Django! / 2021.08.24 * 참고 자료 : 코드잇 Django 강의 앞에서 restaurant이라는 프로젝트를 생성했고 foods라는 앱을 생성했다. 이제, 간단한 웹사이트를 만들어보자. 유저가 웹브라우저에 주소 즉 URL을 입력하면 장고는 urls.py에 적혀있는 것을 보고 어떤 처리를 할지 결정한다. 일단 VScode를 실행하고 프로젝트 폴더안의 urls.py에 들어가자. 여기에 있는 urlpatterns가 바로 url을 어떻게 처리할지에 대해 써놓는 곳이다. 우리가 따로 추가하지 않아도 프로젝트를 생성하면 자동으로 path('admin/', admin.site.urls)라고 쓰여있다. 이 코드의 뜻은 우리의 사이트주소 마지막에 admin/을 추가하면 admin.site.urls로 이동하라는 뜻이다. 개발서버를 실행하고 주소.. [Django] Django 앱(App) 생성하기 / 2021.08.19 * 참고 자료 : 코드잇 Django 강의 프로젝트(Project)는 웹 서비스 전체를 말하고 앱(App)은 기능을 나타내는 단위이다. 서로 다른 기능을 하는 앱을 여러 개 모아서 하나의 프로젝트로 만드는 것이다. 하나의 프로젝트는 여러 개의 앱과 약간의 설정 파일들로 구성되어 있고 하나의 앱은 여러 개의 프로젝트에서 사용할 수 있다. 1. 앱 생성하기 먼저 프로젝트의 root 디렉터리로 이동한다. - django 앱 생성하는 명령어 python manage.py startapp 앱 이름 저는 foods라는 앱을 생성하겠습니다. VScode를 사용하여 foods를 살펴보면 여러 가지 파일이 자동으로 생성된 것을 확인할 수 있다. 여기 있는 파일을 살펴보면 admin.py는 앱을 django 관리자와 연동.. 이전 1 2 3 다음
