묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
DOM의 개념에 관하여
남겨주신 노마크코더님의 영상과 기술블로그 글을 보았는데요.DOM 의 풀네임 (Document Object Model) 말처럼HTML, CSS, JS 파일들을 객체화하여 따로 분리하여 연결해주는 모델링이 속도가 빠르게 해주는 핵심 이유이며,객체화를 통해 브라우저에서 직접 모든 렌터, 레이아웃을 계산하는게 아닌 Offline 상태에서 계산하여 결과값만 브라우저에 나타내기 때문이다. 라고 이해를 하고 있는데 맞을까요?이런 React의 동작방식과 작업방식이 가장 빠른건 아니지만웬만한 웹에서 빠르게 동작하고 충분히 빠르고 효율적이기에 많은 서비스들에서 사랑 받고 있는 프레임워크다. 혹시 이렇게 정리하는게 조금 제가 잘 이해를 못 하고 있는 부분일지요.
-
해결됨[코드캠프] 강력한 CSS
단위심화 강의 중..
안녕하세요 단위심화 강의 중 두 번째 실습 과정 중, 두 번째 줄에 사진이 3개만 들어가는데 왜 그런건지요..?? flex-wrap: wrap; 까지 적용시켰는데 영상과는 다르게 되네요..
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
목서버, "usageLimitError"
안녕하세요 콘솔에 404 에러가 떠서 목서버를 확인해보니 아래와 같은 오류가 떴는데 이러한 경우 어떻게 해결할 수 있을까요..{ "error": { "name": "usageLimitError", "header": "Usage limit reached", "message": "Your team plan allows 1000 mock server calls per month. Contact your team Admin to up your limit." } }
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
프로젝트 2 이미지 깨짐 현상
강사님이 올려주신 파일 그대로 열었는데 이런식으로 깨집니다.어떻게 해결해야하나요?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/assets/css/app.css"> <title>My Second Web</title> </head> <body> <header id="header" class="wrapper"> <section id="navTop" class="nav-top py-2 d-none d-md-block"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-3 text-start lead fast-counsel"> <a href="#" class="btn btn-outline-dark">Contact</a> </div> <div class="col-4 logo"> <a href="index.html" class="navbar-brand d-flex"> <img src="/assets/images/dummy-logo.png" alt="" class="img-fluid ms-auto" width="200px" data-bs-toggle="tooltip" data-bs-placement="bottom" title="My amazing website!!"> </a> </div> <div class="col-5 text-end socials"> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-phone.png" alt="Phone" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-kakao-channel.png" alt="Kakao Channel" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-facebook.png" alt="Facebook" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-twitter.png" alt="Twitter" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-youtube.png" alt="Youtube" width="40px" class="shadow-box"> </a> </div> </div> </div> </section> <nav id="navPrimary" class="navbar navbar-expand-md navbar-dark"> <div class="container-xxl"> <a class="navbar-brand d-block d-md-none" href="index.html"> <img src="/assets/images/dummy-logo.png" alt="Logo" class="img-fluid"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navPrimaryContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Intro </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="page.html">About us</a></li> <li><a class="dropdown-item" href="page.html">Find us</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Documents</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reviews</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reservation</a> </li> <li class="nav-item"> <a class="nav-link btn btn-outline-secondary" href="#"><i class="fa fa-search"></i></a> </li> </ul> </div> </div> </nav> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> <!-- Kakao map appkey here --> <script src="/assets/js/app.js"></script> </body> </html>
-
미해결실용적인 웹 프로그래밍
i 테그인 경우 입력방법
안녕하세요.'자바 스크립트로 뉴스 기사 본문만 보이게 하기' 강의목차를 수강하는 중간에 궁금한 점이 생겨서 이렇게 질문남깁니다.querySelector는 #이나 . 을 이용하는 걸로 알고있는데, 제가 사용하려는 부분이 i 태그인 경우에는 어떻게 입력해야하는지 모르겠습니다..
-
해결됨[코드캠프] 시작은 프리캠프
html select option 아이콘 삽입
<div class="left__body__footer"><div class="wrapper__feel"><div class="feel__title">오늘의 기분</div><select class="feel__select"><option>기쁨<i class="fa-regular fa-face-smile"></i></option>select option 에서 기쁨 뒤에 아이콘 삽입하려는데 코드를 어떻게 짜야 아이콘이 삽입이 되는지 질문합니다
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
NGINX에러
vi /etc/nginx/sites-available/default수정 전에는 정상 작동합니다.그런데 아래와 같이 수정하면 에러 발생합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
axios error
ngrok 연결도 다 했고 url에다가 POSTMAN으로 GET 요청하면 데이터도 잘 불러와지는데 결과창을 보면 데이터가 불러와지지 않아 화면이 제대로 뜨질 않네요...해결 방법이 있을까요?
-
해결됨[코드캠프] 시작은 프리캠프
노션관련질문
학습자료를 노션으로 올려주셨는데 해당 학습자료는 다운로드하여 pdf로 사용이 불가능한 것인가요? 링크를 통해서만 접근이 가능한 것일까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
error:03000086:digital envelope routines::initialization error axios오류
안녕하세요 axios 코드 실행 하면 아래 사진과 같이 오류가 뜹니다.
-
미해결그림으로 배우는 HTML/CSS, 입문!
점보트론
부트스트랩 강의에서 점보트론 을 카피하라고 하셔서 사이트 들어갔는데.점보트론이 이제 없다네요 ...? 이제 뭘로 해야하나요 ?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
Axios로 API 요청시 에러
Axios로 아래와 같이 요청시 Object가 안나오고 에러가 발생합니다.에러내용은 아래와 같습니다참고로 MySQL 데이터는 아래와 같습니다.Axios dummy 테스트는 문제가 없었는데, Network Error는 뭘까요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
reset css 에 대한 질문 드립니다.
안녕하세요. 올려주신 강의 재미있게 수강 하고 있습니다.그런데 오랫동안 궁금했던 부분이 있어서요, 가능하시다면 답변 부탁 드립니다."모던 CSS 배경 지식의 이해" 편의 8분 50초 정도부터 나오는 reset.css (css 초기화) 에 대한 내용입니다. 강사님께서는 normalize.css 의 cdn 을 사용하여 초기화 시키는 방법을 공유해주셨는데요.사실 이전까지 저는 초보자라 실전에서 사용할 경험도 없고 해서, 잘 아시겠지만 아래와 같은 방법으로 css 를 초기화 했었습니다.* { margin: 0; padding: 0; box-sizing: border-box; }그런데 normalize 를 사용해보니 위와는 다른 결과가 나오더라구요.전체 초기화는 되지 않고 margin 값 등이 남아있던데, 검색해보니 유용한 css 값들은 제거하지 않고 남겨둔다고 합니다.그런데 이 유용한 값의 기준이 무엇인지 모르겠어서 홈페이지나 깃허브에 들어가봤는데사실 못 찾았습니다. 그래서 저는 normalize css 를 사용하되, 전체 선택자로 margin 0을 주고시작하려 하는데, 이렇게 한다면 normalize css 를 사용하는 이점이 없어질까요?혹자는 reset cdn 을 사용하는 대신 전체선택자를 이용하면 브라우저 렌더링이 느려진다고하더라구요. 끝으로, 혹시 올려주신 웹 페이지 만들기 실전 프로젝트 부분 클론코딩 한 것을 개인 깃허브에 게시해도 될지 여쭙고도 싶습니다.감사합니다!
-
해결됨[코드캠프] 시작은 프리캠프
CSS 정렬 숙제
안녕하세요 선생님 수업 감사히 잘 듣고 있습니다! 다름이 아니라 숙제 진행 과정에서 질문이 생겨서 여쭤보려고 합니다!현재 진행사항은이렇게 되었고, 코드는<html><css>이렇게 작성했습니다! 근데 제목인 '회원 가입을...' 이 부분이 선생님은 왼족으로 잘 정렬이 되있는데 저는 정가운데에 와있습니다! 왜이렇게 되는지 궁금합니다!또, 전체 박스 크기도 선생님은 여유가 있는데 저는 딱 맞아 떨어집니다! 왜 이렇게 되는지, 어떻게 해결해야 할지 궁금하여 질문드립니다!
-
해결됨[코드캠프] 강력한 CSS
15:41에 나오는 grid 예시
안녕하세요 수업을 듣다가 15:41에 나오는 예시가 잘못된것같아서 질문남겨봅니다! 강사님이 써준 코드대로면 grid-column이 적용되는 범위가 첫번째 1fr과 두번째 2fr 사이까지가 아닌가요?그림으로 보여드리자면파랑색 부분이지 않나요?답변해주시면 감사하겠습니다! ++++++ 좋은 강의감사합니다 재밌게 공부중입니다!
-
해결됨[코드캠프] 강력한 CSS
단위 심화 강의 중 질문..
안녕하세요 <단위 심화> 강의 중 .item2 { background: green; width: calc(100%- 70px); height: 50px; } "- 사이에 공백을 넣지 않았다. 따라서 100% 가로값만 부여가 되었고, 이 때 100%는 입력한 100%가 아니다. item2가 블록요소이기 때문에 자동으로 부모요소의 가로값을 꽉 채워서 들어간다. 그렇기 때문에 100%의 가로줄이 입력된 것이다. 따라서 이 줄은 아무런 기능을 하지 않는다."이렇게 알려주셨는데 이해가 완벽히 되지 않습니다. 더 쉽게 설명을 해주실 수 있을까요..?
-
미해결애플 웹사이트 인터랙션 클론!
영상 속 코드와 배포하신 소스 코드가 다르네요.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 500vh; } .sample-video { position: fixed; top: 0; left: 0; width: 100%; } </style> </head> <body> <div class="container"> <!-- <video class="sample-video" src="../video/sample-low.mp4" muted></video> --> <video class="sample-video" src="../video/sample-high.mp4" muted></video> </div> <script> const videoElem = document.querySelector('.sample-video'); let videoDuration; videoElem.addEventListener('loadeddata', function() { console.log('비디오 로드 완료'); videoDuration = videoElem.duration; init(); }) let progress; let currentFrame; function init() { window.addEventListener('scroll', function () { progress = pageYOffset / (document.body.offsetHeight - window.innerHeight); console.log(progress); if (progress < 0) progress = 0; if (progress > 1) progress = 1; requestAnimationFrame(function() { videoElem.currentTime = videoElem.duration * progress; }) }); } </script> </body> </html>복붙해서 사용하세요.
-
해결됨쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
안녕하세요 visual slide 질문이 있습니다.
방금전 선생님의 강의를 완강하고 복습중인데슬라이드 부분에 대해 질문이 있어서요.강의하신내용에 vosual 슬라이드부분을 왼쪽으로 부드럽게 animate로 넘기고 싶은데아직 제가 가진 지식으로는 혼자 작성해도 검색해보고 찾아봐도 안되서 질문드립니다.코드 어떤부분을 고쳐야 하는지 여쭤봅니다.ㅜㅜ
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
포스트 목록 페이지 수정하기2 중에서 막히는 부분이 있습니다. (미분류)
안녕하세요 선생님. 강의 열심히 듣고 있습니다^^;다름이 아니라 아래와 같이 미분류 카운트가 입력되지 않아 오류가 발생하는 부분때문에 계속 찾아보았으나,답답한 마음에 질문글을 남깁니다.우선 카테고리 분류에서프로그래밍, 문화&예술 까진 카운트가 잘 입력됩니다.그렇지만 "미분류" 부분은 계속 () 으로 표시됩니다.분명 미분류 부분이 존재함에도 불구하고, 카운트가 되지 않는 건 무엇이 잘못되었는지 도저히 알기가 어렵습니다. 혹시 확인이 가능할까요?^^;; test.py 실행시 오류화면미분류() 카운트 부분을 주석처리하면 테스트는 잘 완료됩니다.총 4개의 페이지에 대한 코드를 올려봅니다.test.pybase.htmlviews.pypost_list.html test.pyfrom django.test import TestCase, Client from django.contrib.auth.models import User from bs4 import BeautifulSoup from .models import Post, Category # Create your tests here. class TestView(TestCase): def setUp(self): self.client = Client() # 방문하는 사람의 브라우저다 Client() self.user_trump = User.objects.create_user( username='trump', password='somepassword' ) self.user_obama = User.objects.create_user( username='obama', password='somepassword' ) self.category_programming = Category.objects.create( name='programming', slug='programming' ) self.category_music = Category.objects.create( name='music', slug='music' ) self.post_001 = Post.objects.create( title='첫 번째 포스트입니다.', content='Hello, world, we are the world', category=self.category_programming, author=self.user_trump, ) self.post_002 = Post.objects.create( title='두 번째 포스트입니다.', content='1등이 전부는 아니잖아요. 저는 개발을 좋아할겁니다.', category=self.category_music, author=self.user_obama, ) self.post_003 = Post.objects.create( title='세 번째 포스트입니다.', content='Category 가 없을 수도 있죠.', author=self.user_obama, ) def navbar_test(self, soup): navbar = soup.nav self.assertIn('Blog', navbar.text) self.assertIn('about_me', navbar.text) logo_btn = navbar.find('a', text='Do it Django') self.assertEqual(logo_btn.attrs['href'], '/') home_btn = navbar.find('a', text='Home') self.assertEqual(home_btn.attrs['href'], '/') blog_btn = navbar.find('a', text='Blog') self.assertEqual(blog_btn.attrs['href'], '/blog/') about_me_btn = navbar.find('a', text='about_me') self.assertEqual(about_me_btn.attrs['href'], '/about_me/') def category_card_test(self, soup): categories_card = soup.find('div', id='categories-card') self.assertIn('Categories', categories_card.text) self.assertIn( f'{self.category_programming} ({self.category_programming.post_set.count()})', categories_card.text ) self.assertIn( f'{self.category_music} ({self.category_music.post_set.count()})', categories_card.text ) self.assertIn( f'미분류 ({Post.objects.filter(category=None).count()})', categories_card.text ) def test_post_list_with_posts(self): self.assertEqual(Post.objects.count(), 3) # 1.1 포스트 목록 페이지 (post_list)를 연다. response = self.client.get('/blog/') # 1.2 정상적으로 페이지가 로드된다. self.assertEqual(response.status_code, 200) # 1.3 페이지 타이틀에 Blog 라는 문구가 있다. soup = BeautifulSoup(response.content, 'html.parser') self.assertIn('Blog', soup.title.text) self.navbar_test(soup) self.category_card_test(soup) # 3-2. 포스트 목록 페이지를 새로 고침 했을 때, response = self.client.get('/blog/') soup = BeautifulSoup(response.content, 'html.parser') # 3-3. 메인영역에 포스트 2개의 타이틀이 존재한다. main_area = soup.find('div', id='main-area') self.assertNotIn('아직 게시물이 없습니다.', main_area.text) post_001_card = main_area.find('div', id='post-1') self.assertIn(self.post_001.title, post_001_card.text) self.assertIn(self.post_001.category.name, post_001_card.text) post_002_card = main_area.find('div', id='post-2') self.assertIn(self.post_002.title, post_002_card.text) self.assertIn(self.post_002.category.name, post_002_card.text) post_003_card = main_area.find('div', id='post-3') self.assertIn(self.post_003.title, post_003_card.text) self.assertIn('미분류', post_003_card.text) self.assertIn(self.post_001.author.username.upper(), main_area.text) self.assertIn(self.post_002.author.username.upper(), main_area.text) self.assertIn(self.post_003.author.username.upper(), main_area.text) def test_post_list_without_post(self): Post.objects.all().delete() self.assertEqual(Post.objects.count(), 0) response = self.client.get('/blog/') self.assertEqual(response.status_code, 200) soup = BeautifulSoup(response.content, 'html.parser') self.navbar_test(soup) self.assertIn('Blog', soup.title.text) # 2-2. 메인영역에 "아직 게시물이 없습니다." 라는 문구가 나온다. main_area = soup.find('div', id='main-area') self.assertIn('아직 게시물이 없습니다.', main_area.text) def test_post_detail(self): self.assertEqual(Post.objects.count(), 3) # 1.2 그 포스트의 url은 '/blog/1/' 이다. self.assertEqual(self.post_001.get_absolute_url(), '/blog/1/') #.2. 첫 번째 포스트의 상세 페이지 테스트 # 2-1. 첫 번째 포스트의 url로 접근하면 정상적으로 작동한다. (status code : 200). response = self.client.get(self.post_001.get_absolute_url()) self.assertEqual(response.status_code, 200) soup = BeautifulSoup(response.content, 'html.parser') # # 2-2. 포스트 목록 페이지와 똑같은 네비게이션 바가 있다. self.navbar_test(soup) # 2-3. 첫 번째 포스트의 제목이 웹 브라우저 탭 타이틀에 들어있다. self.assertIn(self.post_001.title, soup.title.text) # 2-4. 첫 번째 포스트의 제목이 포스트 영역에 있다. main_area = soup.find('div', id='main-area') post_area = main_area.find('div', id='post-area') self.assertIn(self.post_001.title, post_area.text) # # 2-5. 첫 번째 포스트의 작성자(author)가 포스트 영역에 있다. (아직 구현할 수 없음) self.assertIn(self.user_trump.username.upper(), post_area.text) # # 2-6. 첫 번째 포스트의 내용(content)이 포스트 영역에 있다. self.assertIn(self.post_001.content, post_area.text) base.html<!DOCTYPE html> {% load static %} <html> <head> <title>{% block head_title %} Blog | 하도영 웹사이트 {% endblock %}</title> <link href="{% static 'blog/bootstrap/bootstrap.min.css' %}" rel="stylesheet" type="text/css"> <!-- <link href="./practice.css" rel="stylesheet" type="text/css"> --> <!-- 주석처리 키 ctrl + / --> <script src="https://kit.fontawesome.com/c1d4d1ab30.js" crossorigin="anonymous"></script> </head> <body> {% include 'blog/navbar.html' %} <div class="container"> <!-- 블로그 리스트 페이지 만들기 강의 5:04 blog 글자 부분 container 클래스에 의해 do it django 와 같은 간격으로 맞춰짐 --> <!-- 이 아래는 9:3, 좁을때는 8:4 로 나눌거임 --> <div class="row my-3"> <div class="col-md-8 col-lg-9", id="main-area"> {% block main_area %} {% endblock %} </div> <div class="col-md-4 col-lg-3"> <!-- Search widget--> <div class="card mb-4"> <div class="card-header">Search</div> <div class="card-body"> <div class="input-group"> <input class="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" /> <button class="btn btn-primary" id="button-search" type="button">Go!</button> </div> </div> <!-- Categories widget--> <div class="card mb-4", id="categories-card"> <div class="card-header">Categories</div> <div class="card-body"> <div class="row"> <ul> {% for category in categories %} <li> <a href="#!">{{ category.name }} ({{ category.post_set.count }})</a> </li> {% endfor %} <!-- views.py 에 def get_context_data(self, **kwargs): 를 참고한다. --> <li> <a href="#!">미분류 ({{ no_category_post.count }})</a> </li> </ul> </div> </div> </div> </div> </div> </div> {% include 'blog/footer.html' %} <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> </body> </html> views.pyfrom django.shortcuts import render from django.views.generic import ListView, DetailView from .models import Post, Category class PostList(ListView): model = Post # template_name = 'blog/post_list.html' ordering = '-pk' def get_context_data(self, **kwargs): context = super(PostList, self).get_context_data() context['categories'] = Category.objects.all() context['no_category_post.count'] = Post.objects.filter(category=None).count() # 미분류인 애들이 몇개인지 확인한다. filter기능을 이용해 none 인 애를 확인하고 count() 에 숫자를 담아 no_category_post.count에 넣어준다. return context class PostDetail(DetailView): model = Post template_name = 'blog/post_detail.html' # def index(request): # posts = Post.objects.all().order_by('-pk') # # pk는 순서대로 -pk 는 역순으로 최신 쓰레드가 위로 나오도록 조회 # return render( # request, # 'blog/index.html', # { # 'posts': posts, # } # ) # def single_post_page(request, pk): # post = Post.objects.get(pk=pk) # # return render( # request, # 'blog/single_page.html', # { # 'post': post, # } # ) post_list.html{% extends 'blog/base.html' %} {% block main_area %} <h1> Blog </h1> {% if post_list.exists %} {% for p in post_list %} <!-- Blog Post --> <div class="card mb-4", id="post-{{ p.id }}"> {% if p.head_image %} <img class="card-img-top" src="{{ p.head_image.url}}" alt="{{ p.title }}" /> {% else %} <img class="card-img-top" src="https://picsum.photos/seed/{{ p.id }}/600/200" alt="{{ p.title }}" /> {% endif %} <div class="card-body"> <!-- <div class="small text-muted">January 1, 2022</div>--> {% if p.category %} <span class="badge badge-secondary float-right">{{ p.category }} </span> {% else %} <span class="badge badge-secondary float-right">미분류</span> {% endif %} <h2 class="card-title h4">{{ p.title }}</h2> {% if p.hook_text %} <h5 class="text-muted">{{ p.hook_text }}</h5> {% endif %} <p class="card-text">{{ p.content | truncatewords:45 }}</p> <a href="{{ p.get_absolute_url }}" class="btn btn-primary">Read more →</a> </div> <div class="card-footer text-muted"> Posted on {{ p.created_at }} by <a href="#">{{ p.author | upper }}</a> </div> </div> {% endfor %} {% else %} <h1> 아직 게시물이 없습니다. </h1> {% endif %} <!-- Pagination--> <ul class="pagination justify-content-center my-4"> <li class="page-item"> <a class="page-link" href="#!">← Older</a> </li> <li class="page-item disabled"> <a class="page-link" href="#!">Newer →</a> </li> </ul> {% endblock %}
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
메인페이지 출력 오류
안녕하세요 메인 페이지 출력이 안되어서 질문 남깁니다해당 코드와 실행결과 사진으로 첨부했습니다
