반응형



## 모든 요소들의 기본 position :  static(원래 있어야 할 곳에 배치한다)


1. Relative position

-> 기존 static 위치 기준으로 top/right/bottom/left 방향으로 주어진 픽셀만큼 이동

-> z-index : 태그들이 겹칠 때 누가 더 위로 올라가는지 결정하는 속성 / 기본값 0


2. absolute position

-> 가장 가까운 포지셔닝이 된 조상 요소 기준

-> 부모 포지션이 relative, absolute, fixed 태그가 없었다면, 가장 위의 태그(body)가 기준


3. fixed position

-> 브라우저 윈도우가 기준 / 항상 특정 위치에 고정되어 있


반응형

'Web > HTML & CSS' 카테고리의 다른 글

10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
7. display  (0) 2019.03.19
6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
반응형

### 모든 요소는 딱 한 개의 display 값을 갖고 있다!

 

1. display 종류 

 

- inline display : 다른 요소들과 같은 줄에 머무르려고 하는 성향, 필요한 만큼의 가로 길이만 차지하는 성향

=> 기본 display : inline ==> <span> / <a> / <b> / <i> / <img> / <button>

 

-block display : 다른 요소들과 독단적인 줄에 가려고 하는 성향, 최대한 많은 가로 길이를 차지하는 성향

=> 기본 display : block ==> <div> / <h1> ~ <h6> /  <p> / <nav> /  <ul>  / <li> 

 

 

- display  바꾸기 (css 에서 바꿀 수 있음)

=> inline -> block

 

1
2
3
4
{
  display: block; /* <i> 태그를 block으로 바꾸기 */
  background-color: green;
}
cs

 

 

=> block -> inline

 

1
2
3
4
5
6
7
8
9
10
11
12
div {
  display: inline; /* <div> 태그를 inline으로 바꾸기 */
}
 
.div1 {
  background-color: green;
}
 
.div2 {
  background-color: blue;
}
 
cs

 

 

2. inline-block 

 

## block 요소에는 가로 , 세로 길이 직접 설정가능하지만 / inline 요소는 자동으로 설정 

 

- inline요소처럼 다른 요소와 같은 줄에 머물며 block 요소처럼 가로, 세로 길이도 설정해주고 싶다면? 

=> inline-block 사용

1
2
3
4
5
6
7
{
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: green;
}
 
cs

 

3. <img> 태그의 비밀

1
<div class="container">아이스크림<img src="images/ice_cream.png" height="100">먹고싶다!</div>
cs

 

## 사실 , <img>태그는 대체요소(replaced element)라고 함

    -> 가로, 세로를 정할 수 있는 특별한 inline

-> 텍스트처럼 다룰 수 있음 (vertical-align)

-> 상위 class 또한 text-align으로 사용 가능 

 

##다시 한번 이미지를 가운데 정렬하는 방법/부모에게 text-align을 줘도 가운데 정렬 가능하지만 조금 부적합함

1
2
3
4
5
img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
cs

 

4. 다양한 링크 

    

<html>

1
2
3
4
5
<a class="google-link" href="https://google.com" target="_blank">
<img src="images/google.png" width="200">
<h1>구글</h1>
<p>이걸 누르면 구글로 갑니다!</p>
</a>
cs

<css>
1
2
3
4
5
.google-link{
    display:block;
    color: black;
    text-decoration:none;
}
cs

 

5. Baseline

## text : 바로 밑이 baseline

## img : 사진 바로 밑이 baseline

 

6. vertical-align 

 

-base line : vertical-align의 조건들을 충족시키면서, 줄의 높이를 최소화시키는 곳에 위치

 

7. 세로 가운데 정렬 꿀팁

 

<가로 가운데 정렬>

- inline & inline-block 요소 : 부모 태그에 text-align:center;

1
2
3
4
.container {
  text-align: center;
  background-color: lime;
}
cs

 

-block 요소 : margin-left: auto; , margin-right: auto;

1
2
3
4
5
6
7
.block-element {
  width: 100px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  background-color: lime;
}
cs

 

<세로 가운데 정렬>

#vertical-align 속성은 인라인, 인라인 블록에서만 적용 

-가짜 요소 더하기(세로 길이 100%인 요소 생성 -> 그 요소에 vertical-align: middle; -> 띄어쓰기 공간만큼 마이너스여백 주기)

<html>

1
2
3
4
5
6
7
8
<div class="container">
  <div class="helper"></div>
  <div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>
 
cs

<css>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}
 
.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
 
.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
 
  /* 이 경우 띄어쓰기는 5px 정도였습니다! */
  margin-left: -5px;
}
cs

 

-line-height으로 해결(info를 인라인 블록으로 설정 -> 부모에 line height -> info에 line-height: normal;(자식들에게 상속되기에)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
  line-height: 400px;
}
 
.info {
  background-color: lime;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}
 
cs

 

반응형

'Web > HTML & CSS' 카테고리의 다른 글

9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03
반응형

1. 선택자 정리 

 -> CSS에서는 스타일링 해줄 요소를 선택자로 결정 

 

 -태그 이름 

1
2
3
4
/* 모든 <h1> 태그 */
h1 {
  color: orange;
}
cs

 

 

-클래스 / 아이디 선택자

1
2
3
4
5
6
7
8
9
/* 'important'라는 클래스를 갖고 있는 모든 태그 */
.important {
  color: orange;
}
 
/* 'favorite'라는 아이디를 갖고 있는 태그 */
#favorite {
  color: blue;
}
cs

 

-자식 선택자

1
2
3
4
5
/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
  color: orange;
}
 
cs

 

-직속 자식(direct children)

1
2
3
4
/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}
cs

 

-복수 선택

1
2
3
4
/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
  color: orange;
}
cs

 

-여러 조건 

1
2
3
4
5
6
7
8
9
10
/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}
 
/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}
 
cs

 

-Pseudo-class (가상 클래스) -> :(클론) 사용하여 가상 클래스 선택

 

-> n번째 자식

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
/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
  color: blue;
}
 
/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
  color: red;
}
 
/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
  color: green;
}
 
/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
  font-size: 150%;
}
 
/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
  text-decoration: line-through;
}
 
cs

 

-> 마우스 오버(hover)

1
2
3
4
5
6
7
8
h1 {
  color: orange;
}
 
/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
  color: green;
}
cs
 
2. CSS 상속(부모 요소의 속성들을 자식들한테 넘겨줌 -> div에 속성을 주면 밑에있는 자식들 까지 상속되어 모두 바뀜)

 

-상속되는 속성들 colorfont-family/ font-size/ font-weight/ line-height/ list-style/ text-align/ visibility

-항상 상속되는 것은 아님 (ex) <a>태그에는 color속성 상속 X => 억지로 받아오려면 inherit 값 사용

 

1
2
3
4
.div2 a {
  color: inherit;
}
 
cs

 

3. CSS 우선 순위 

-순서 : 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어 쓰게 됨

 

-명시도(specificity)에 따라 우선순위 결정

a.인라인 스타일 (가장 우선순위 높음)

b. 선택자에 id 多 우선 순위 높음

c. 선택자에 class , attribute , pseudo-class 多 우선 순위 높음

d. 그냥 요소(가상요소) 많은 순 

 

 

4. CSS 다양한 단위

-px : 절대적인 값 / 다른 요소의 값에 영향 x

 

-rem : 상대적인 값 / html 태그의 font-size 영향 받음 / 2rem : html 태그의 font-size X2

 

-em : 상대적인 값/ 자기 자신의 font-size 기준/ 자기의 size를 따로 정해주지 않았다면 상위 요소에서 상속받은 값 기준

 

-%(퍼센트) : 상대적인 값 / 어떤 항목에 쓰이냐에 따라 다른 기준 적용 / ex) font-size에서 %사용 시 곱해주는 방식 계산

 

1
2
3
4
5
6
7
8
9
10
11
.container {
  font-size: 20px;
  background-color: lime;
}
 
.text {
  font-size: 180%; /* 상위 요소인 container의 font-size * 1.8 = 36px */
  background-color: skyblue;
  margin: 0;
}
 
cs

 

     / margin, padding 단위로 사용 -> 상위 요소 width 기준 계산 , margin-top , padding-bottom 등 상하 속성 조절 시 상위요소 height가 아닌 width 기준으로 계산

1
2
3
4
5
6
7
8
9
.container {
  width: 200px;
  background-color: lime;
}
 
.text {
  padding-left: 30%; /* 상위 요소의 width * 0.3 = 60px */
}
 
cs

 

-참고 : https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

반응형

'Web > HTML & CSS' 카테고리의 다른 글

8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19
5. BOX Model -(2)  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03
4. text 스타일링  (0) 2019.02.27
반응형

1. 박스 꾸미는 다른 방법 

 

-border-radius : 요소 모서리 둥글게 만듬 /크면 수록 둥글게 /개별 설정도 가능 

1

2

3

4

5

6

.div1 {

  border: 1px solid green;

  border-radius: 5px;

  margin-bottom: 20px;

}

 

cs

 

-background-color : 배경색 지정 

    

1

2

3

h1 {

  background-color: #4d9fff;

}

cs

 

-페이지 전체 배경색 : <body>태그 -> background-color 속성 /투명 : transparent 설정

    

1

2

3

4

5

6

7

h1 {

  background-color: white;

}

h2 {

  background-color: transparent

}

cs

 

-box-shadow : 요소에 그림자 /기본 : none / 위치 설정(가로, 세로 위치) /기본 (검정) 변경하고 싶을 써줌

 

    

1

2

3

4

5

6

.div1 {

  background-color: #eeeeee;

  width: 400px;

  height: 300px;

  box-shadow: 40px(가로) 10px(세로) 10px(흐림정도:blur) 20px(그림자 크기:spread) #4d9fff();

}

Colored by Color Scripter

cs


2. box-sizing

-box sizing 에서 항상 테두리와 패딩을 고려해서 게산을 해줘야 한다

-> 해결책 : box-sizing 속성 : border-box

                 따로 설정해주지 않으면 기본값은 content-box -> 이걸 border-box

               -> width height 테두리와 패딩 , 내용물을 모두 포함한 길이가

               -> 모든 요소에 나타내는 *속성 사용

1
2
3
4
5
6
7
8
9
10
{
  box-sizing: border-box;
}
.div1 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}\
 
cs

3. background 이미지

- background-repeat : 이미지 반복시킬 것인지, 아닌지, 어떻게 반복할지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div{
/*반복하지 않음*/
background-repeat: no-repeat;
/*가로 방향으로만 반복*/
background-repeat: repeat-x;
/*세로 방향으로만 반복*/
background-repeat: repeat-y;
/*가로와 세로 모두 반복*/
background-repeat: repeat;
/*반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분*/
background-repeat: space;
/*반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분*/
background-repeat: round;
}
cs

- background-size

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
/* 원래 이미지 사이즈대로 출력 */
background-size: auto;
/* 화면을 꽉 채우면서, 사진 비율을 유지 */
background-size: cover;
/* 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력 */
background-size: contain;
/* 픽셀값 지정 (가로: 30px, 세로: 50px로 설정) */
background-size: 30px 50px;
/* 퍼센트값 지정 (가로: 부모 요소 width의 60%, 세로: 부모 요소 height의 70%로 설정) */
background-size: 60% 70%;
}
 
cs

-background-position : 배경 이미지의 위치를 정해주는 속성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */
/* 아래와 같은 총 9개의 조합이 가능 */
div{
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
/* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */
background-position: 25% 75%;
/* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */
background-position: 100px 200px;
}
cs

반응형

'Web > HTML & CSS' 카테고리의 다른 글

7. display  (0) 2019.03.19
6. CSS 활용  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03
4. text 스타일링  (0) 2019.02.27
2. class & id & div  (0) 2019.02.27
반응형
def fibonacci(n):

    answer = [0,1]    #list의 초기값을 0,1로 지정

 

    for i in range(2,n+1):#i= list의 주소를 뜻함

        answer.append(answer[i-1]+answer[i-2])#list에 추가

    #print(answer)  # 피보나치 list를 출력위해

    #print(i)       #리스트 주소가 잘 돌고있는지 확인

    return answer[-1]    #리스트에서 가장 마지막것만 출력해줌

 

$print(fibonacci(30))

832040

초기에 python으로 해결하려 하였으나 실패ㅜㅜ 시간 계산 함수가 따로있다고 하는데 조금 더 찾아보고싶었지만 노타임.. 노열정..

 

<python 으로 반복문 사용하여 피보나치 계산> -> 아 잘되는데 시간 계산 .....



<java 피보나치 합 /시간 계산>

 

import java.util.Scanner;
 
public class recursionVsIteration {
 
    public static void main(String[] args) {
 
        Scanner sc = new Scanner(System.in);
 
        //원하는 숫자 입력
 
        System.out.print("Enter the last element of Fibonacci sequence: ");
 
        long n = sc.nextInt();
 
        //반복문 출력
 
        System.out.println("Fibonacci iteration:");
 
        long start = System.currentTimeMillis();
 
        System.out.printf("Fibonacci sequence(element at index %d) = %d \n", n, fibIteration(n));
 
        System.out.printf("Time: %d ms\n", System.currentTimeMillis() - start);
 
        //재귀함수 출력
 
        System.out.println("Fibonacci recursion:");
 
        start = System.currentTimeMillis();
 
        System.out.printf("Fibonacci sequence(element at index %d) = %d \n", n, fibRecursion(n));
 
        System.out.printf("Time: %d ms\n", System.currentTimeMillis() - start);
 
    }
 
    //반복문 method
 
    static long fibIteration(long n) {
 
        long x = 0, y = 1, z = 1;
 
        for (long i = 0; i < n; i++) {
 
            x = y;
 
            y = z;
 
            z = x + y;
 
        }
 
        return x;
 
    }
 
    //재귀 method
 
    static long fibRecursion(long  n) {
 
        if ((n == 1) || (n == 0)) {
 
            return n;
 
        }
 
        return fibRecursion(n - 1) + fi

 

 

 


<피보나치 수열>

1

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ...

 

 

<피보나치 수열의 호출 방법>

1. 재귀 호출 

-함수 호출 횟수가 너무 큼                                                     -> 해결책 : recursive를 한겹만 쓰면 확실히 줄어들 것

-stack 깊이가 너무 깊어져서 컴퓨터 터짐..(stack overhead)-> 해결책 : stack을 쓰되 새로 만들지말고 누적해서 재사용하자

 

-대신 적은 코드 사용해 효율적으로 처리                              -> 종료하는 지점 정의해줬을 때 얘기이다..

 

2. 반복 호출 

- 반복 할 때마다 나온 계산 값을 어딘가에 저장해 두고 그 다음 반복에서는 앞 단계에서 저장된 값에 새로운 값 내용 누적 시킨다.

- 매개변수 리스트 보관(메모리 영역) / 메소드 실행공간(복사 공간) 필요하다

 

3. 꼬리 재귀(tail-recursion)

-재귀가 느려지는 이유(작업 끝마쳐도 해야할 일 남아)를 보완해서 함수의 꼬리 부분에 호출하여 원래 시점으로 돌아갔을 때 해야할 일 이 없게 만드는 호출

 


 

-참고 블로그 : https://nittaku.tistory.com/81

 

 

 

 

 

 

반응형
반응형

#Form -> model 형식에 맞는 입력 공간 (html form 의 한계성) / Django 기능 활용 (form 만들기 = model 만들기와 유사)

-form.py: html에서 보여지는 form / -models.py  : DB


1.blog app / forms.py(생성) 

 # Blog class를 기반으로 만들 것이기 때문에 blog 안에 form.py 생성/ models.py있으니까
from django import forms
from .models import Blog 
 
# 모델기반이 아니면 forms.Form
class BlogPost(forms.ModelForm):
    class Meta: #어떤 모델을 기반으로 한 입력공간, 그 모델 중에 어떤 항목 입력?
        model = Blog
        fields = ['title''body'
cs 



2.blog app/urls.py

1
 path('newblog/', views.blogpost, name='newblog'),
cs


3.blog app/views.py

from .forms import BlogPost
 
def blogpost(request):
    # 1. 입력된 내용 처리 : POST
    if request.method == 'POST':
        form = BlogPost(request.POST)
        if form.is_valid(): 
    #적절한 값이 잘 입력되었는지 확인 // 입력값이 형식에 맞게 입력되었으면 true ,문제가 있다면 false 반환.
            post = form.save(commit=False) #일단 저장하지 말고 form객체 말고 model 객체 접근
            post.pub_date = timezone.now() 
            post.save()
            return redirect('home')
    # 2. 빈 페이지 띄워주는 기능 : GET
    #new.html에 빈 페이지 띄우기
    else:
        form = BlogPost()
        return render(request, 'new.html', {'form': form})
cs


 



4.blogapp/templates/new.html



반응형

'Web > Django' 카테고리의 다른 글

[Django_심화]2 - Rest, Serializer  (0) 2019.11.03
[Django_심화]1 - 준비운동  (0) 2019.11.02
[5.5주차]Faker  (0) 2019.03.05
[5주차]2.Pagination  (0) 2019.03.05
[5주차]1.로그인,회원가입  (0) 2019.03.05
반응형

faker = 말 그대로 가짜 데이터


1.설치

1
2
USER@DESKTOP-SRO5U54 MINGW64 ~/Desktop/likelion2/second_assignment
$ pip install faker
cs


2.fake.py 생성 -> myvenv와 같은 위치에 파일 생성

<fake.py>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 가짜 데이터 생성 능력 있는 클래스 Faker import
from faker import Faker
 
myfake = Faker()
 
# Faker의 메소드로 어떤 종류의 가짜데이터를 뽑아낼지 결정
print("===========")
print(myfake.name()) # 가짜 이름 데이터 생성
print(myfake.address()) # 가짜 주소 데이터 생성 
print(myfake.text())
print(myfake.state())
print(myfake.sentence())
print(myfake.random_number())
print("===========")
cs


3.터미널 실행 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
USER@DESKTOP-SRO5U54 MINGW64 ~/Desktop/likelion2
$ python fake.py
===========
Dawn Werner
423 Benjamin Ridges Suite 803
New Michael, NV 06493
Reach strong rather important a.
Some stand war half back start. Something Congress interview himself something financial source.
Street human network reflect. Past gas ahead government.
Nevada
During as baby make leader really magazine among.
54
===========
(myvenv)
cs

 

#한국말로 출력 원할 때 -> 근데 .text/.state/.sentence는 생성하지 못함

1
myfake = Faker('ko_KR')
cs


#매번 바뀌는 데이터 X-> 가짜를 FIX하고 싶으면 

1
2
# Seed 파일
myfake.seed(1# 각각 가짜데이터의 데이터번호
cs


4. faker를 데이터 db에 저장, 삭제 가능 

반응형

'Web > Django' 카테고리의 다른 글

[Django_심화]1 - 준비운동  (0) 2019.11.02
[6주차]Form  (0) 2019.03.06
[5주차]2.Pagination  (0) 2019.03.05
[5주차]1.로그인,회원가입  (0) 2019.03.05
[4주차]2.blog-(3)  (0) 2019.03.05
반응형

<home.html> 의 블로그 글들 페이지네이션 하고 싶을 때 -> 방법은 많음


요약하자면

1.무슨 객체를 , 한 페이지 당 몇개씩 실을 것인지 결정 -> Paginator(object, num)

2.내가 원하는 페이지 갖고 오기                     -> 페이지네이터객체.get_page(갖고오고싶은 페이지번호)

3.갖고 온 페이지 html에 띄우기                     -> 페이지객체의 매소드함수 + template언어


#page 객체의 메소드 함수

-page.count() : 총 객체 수(총 블로그 글 개수)

-page.num_pages() : 총 페이지 개수

-page.page(n)  : n번째 페이지 리턴

-page.page_range() :(1부터 시작하는) 페이지 리스트 반환

-page.get_page(n) :n번째 페이지 갖고 오기

-page.has_next() : 다음페이지 있으면 true/ 없으면 false

-page.has_previous() : 이전 페이지 있으면 true/없으면 false

-page.previous_page_number() : 이전 페이지 번호 반환


1.blog app /views.py -> home.html이 있는 app에서 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from django.core.paginator import Paginator
 
def home(request):
    blogs = Blog.objects
    # 블로그 모든 글을 대상으로
    blog_list = Blog.objects.all()
    # 블로그 객체 세 개를 한 페이지로 자르기
    paginator = Paginator(blog_list, 3)
    # request된 페이지가 뭔지 알아내고 (request 페이지를 변수에 담아내고)
    page = request.GET.get('page')
    # request된 페이지를 얻어온 뒤 return 해준다
    posts = paginator.get_page(page)
    return render(request, 'blog/home.html', {'blogs': blogs, 'posts':posts})
 
cs


## 갑자기 한글 파일 깨짐 그럴 때는 base.html 에

1
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
cs


2.home.html 에서 사용 

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
{% extends 'base.html' %}
 
 
{% block content%}
 
{% for blog in posts %}
<div style="margin:30px auto 30px auto; display: block" class="container" >
    <div class="card">
    <div class="card-body">
    <h5 class="card-title">{{blog.title}}</h5>
    <h6 class="card-subtitle mb-2 text-muted">{{ blog.pub_date}}</h6>
    <class="card-text">{{blog.summary}}</p>
    <a href="{% url 'detail' blog.id %}" class="card-link">..more</a>
    </div>
    </div>
</div>
{% endfor %}
 
{#First Previews 3of4 Next Last#}
 
{#first previous#}
{% if posts.has_previous%}
<a href="?page=1">First</a>
<a href="?page={{posts.previous_page_number}}">Previous</a>
{% endif %}
{#3of4#}
<span>{{posts.number}}</span>
<span>of</span>
<span>{{posts.paginator.num_pages}}</span>
{#Next Last#}
{% if posts.has_next%}
<a href="?page={{posts.next_page_number}}">Next</a>
<a href="?page={{posts.paginator.num_pages}}">Last</a>
{% endif %}
{% endblock %}
 
cs


##container가 전부를 감싸는 오류 생김 -> div어디 감싸는지 endblock 어디에 넣어주는 지 잘 보쟈

반응형

'Web > Django' 카테고리의 다른 글

[6주차]Form  (0) 2019.03.06
[5.5주차]Faker  (0) 2019.03.05
[5주차]1.로그인,회원가입  (0) 2019.03.05
[4주차]2.blog-(3)  (0) 2019.03.05
[4주차]2.blog-(2)  (0) 2019.03.04

+ Recent posts