172만명의 커뮤니티!! 함께 토론해봐요.
미해결
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
강사님이 올려주신 파일 그대로 열었는데 이런식으로 깨집니다. 어떻게 해결해야하나요? <!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>
html/css HTML/CSS 웹 디자인 javascript 웹-디자인 bootstrap
지루한 오리
2023-02-04T08:02:28.299Z
댓글 1
좋아요 0
조회수 1207
미해결
실용적인 웹 프로그래밍
안녕하세요. '자바 스크립트로 뉴스 기사 본문만 보이게 하기' 강의목차를 수강하는 중간에 궁금한 점이 생겨서 이렇게 질문남깁니다. querySelector는 #이나 . 을 이용하는 걸로 알고있는데, 제가 사용하려는 부분이 i 태그인 경우에는 어떻게 입력해야하는지 모르겠습니다..
html/css HTML/CSS javascript
이다민
2023-02-04T07:43:03.991Z
댓글 1
좋아요 0
조회수 499
해결됨
[코드캠프] 시작은 프리캠프
<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 에서 기쁨 뒤에 아이콘 삽입하려는데 코드를 어떻게 짜야 아이콘이 삽입이 되는지 질문합니다
html/css javascript HTML/CSS
frontend
2023-02-04T05:09:22.468Z
댓글 1
좋아요 0
조회수 448
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
vi /etc/nginx/sites-available/default 수정 전에는 정상 작동합니다. 그런데 아래와 같이 수정하면 에러 발생합니다.
html/css aws git javascript rest-api HTML/CSS mysql github
jksyk
2023-02-04T03:32:36.555Z
댓글 3
좋아요 0
조회수 729
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
ngrok 연결도 다 했고 url에다가 POSTMAN으로 GET 요청하면 데이터도 잘 불러와지는데 결과창을 보면 데이터가 불러와지지 않아 화면이 제대로 뜨질 않네요...해결 방법이 있을까요?
html/css tensorflow 머신러닝 배워볼래요? react-native node.js express react 머신러닝 nodejs HTML/CSS javascript
hyj_0327
2023-02-03T13:19:28.232Z
댓글 1
좋아요 0
조회수 757
미해결
파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
강사님 안녕하세요. 강의 잘 듣고 있습니다. 감사합니다. 세가지 질문이 있습니다. 1. 아래와 같이 코드 짜도 되나요? 2. 코드가 맞다면, 제가 탐색 알고리즘 원리로 푼게 맞나요? 3. 강사님 코드가 더 효율이 높다고 보면 되는건가요? 이정도 차이면 코딩테스트에서 큰건가요? - 제 코드 실행시간: 0.00021576881408691406 - 강사님 코드 시간: 0.00020885467529296875
코테 준비 같이 해요! 코딩-테스트 python
홍푸름
2023-02-03T05:07:48.438Z
댓글 2
좋아요 1
조회수 799
해결됨
[코드캠프] 시작은 프리캠프
학습자료를 노션으로 올려주셨는데 해당 학습자료는 다운로드하여 pdf로 사용이 불가능한 것인가요? 링크를 통해서만 접근이 가능한 것일까요?
html/css javascript HTML/CSS
w3w
2023-02-03T03:21:48.129Z
댓글 1
좋아요 0
조회수 280
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
파이참 사용시 좌측처럼 코드가 있는부분은 색상이 다르던데 이건 어떻게 해야할까요? 강의 듣다가 이게 궁금해서 계속 옆길로 빠지게 됩니다 ;;;
히징징
2023-02-01T22:12:03.678Z
댓글 1
좋아요 0
조회수 374
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 axios 코드 실행 하면 아래 사진과 같이 오류가 뜹니다.
html/css 머신러닝 배워볼래요? react node.js express HTML/CSS 머신러닝 react-native nodejs tensorflow javascript
유영
2023-02-01T09:34:04.018Z
댓글 1
좋아요 0
조회수 2457
미해결
그림으로 배우는 HTML/CSS, 입문!
부트스트랩 강의에서 점보트론 을 카피하라고 하셔서 사이트 들어갔는데. 점보트론이 이제 없다네요 ...? 이제 뭘로 해야하나요 ?
hyqooooo
2023-02-01T06:56:32.744Z
댓글 1
좋아요 0
조회수 603
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
Axios로 아래와 같이 요청시 Object가 안나오고 에러가 발생합니다. 에러내용은 아래와 같습니다 참고로 MySQL 데이터는 아래와 같습니다. Axios dummy 테스트는 문제가 없었는데, Network Error는 뭘까요?
html/css aws github rest-api javascript HTML/CSS mysql git
jksyk
2023-01-31T15:11:55.045Z
댓글 3
좋아요 0
조회수 1196
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
안녕하세요. 올려주신 강의 재미있게 수강 하고 있습니다. 그런데 오랫동안 궁금했던 부분이 있어서요, 가능하시다면 답변 부탁 드립니다. "모던 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 을 사용하는 대신 전체선택자를 이용하면 브라우저 렌더링이 느려진다고 하더라구요. 끝으로, 혹시 올려주신 웹 페이지 만들기 실전 프로젝트 부분 클론코딩 한 것을 개인 깃허브에 게시해도 될지 여쭙고도 싶습니다. 감사합니다!
html/css HTML/CSS javascript es6
inflearner
2023-01-31T01:57:11.878Z
댓글 1
좋아요 0
조회수 672
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요 선생님 수업 감사히 잘 듣고 있습니다! 다름이 아니라 숙제 진행 과정에서 질문이 생겨서 여쭤보려고 합니다! 현재 진행사항은 이렇게 되었고, 코드는 <html> <css> 이렇게 작성했습니다! 근데 제목인 '회원 가입을...' 이 부분이 선생님은 왼족으로 잘 정렬이 되있는데 저는 정가운데에 와있습니다! 왜이렇게 되는지 궁금합니다! 또, 전체 박스 크기도 선생님은 여유가 있는데 저는 딱 맞아 떨어집니다! 왜 이렇게 되는지, 어떻게 해결해야 할지 궁금하여 질문드립니다!
html/css javascript HTML/CSS
데싸데분
2023-01-31T01:34:14.265Z
댓글 1
좋아요 0
조회수 1873
해결됨
[코드캠프] 강력한 CSS
안녕하세요 수업을 듣다가 15:41에 나오는 예시가 잘못된것같아서 질문남겨봅니다! 강사님이 써준 코드대로면 grid-column이 적용되는 범위가 첫번째 1fr과 두번째 2fr 사이까지가 아닌가요? 그림으로 보여드리자면 파랑색 부분이지 않나요? 답변해주시면 감사하겠습니다! ++++++ 좋은 강의감사합니다 재밌게 공부중입니다!
정익명
2023-01-30T14:34:18.977Z
댓글 1
좋아요 2
조회수 351
미해결
[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
선생님 안녕하세요 이번에 선생님강의 머신러닝2개, 컴퓨터비젼2개를 모두 완강한 열혈팬 회사원입니다 ㅎㅎㅎ 선생님 강의 덕분에 이번에 회사에서 세그멘테이션을 담당하게 되엇는데, 세그멘테이션강의관련 질문이 잇어서 이렇게 메일을 드립니다 ㅎ 바쁘시겟지만 조언 좀 부탁드리겟습니다 <배경> 이번에 검출할 객체(첨부파일)는 바늘과 같이 아주 가늘고 긴 객체(섬유)인데 이미지1장당 객체전체면적이 0.5 - 2%밖에 없는 아주 미세한 객체입니다. 실제원본데이터에서도 객체는 눈으로 자세히 보아야 검출할수 잇을정도입니다 ㅎ (학습데이터30장, 학습마스크영상 30장, 테스트데이터 5장 ). 사용모델은 깃헙에서 공개한 U-NET모델로 세그멘테이션을 수행햇는데, 첫epoch부터 정확도가 90%이상, 로스가 0.1이하로 상당히 높은 성능을 보엿는데 예측결과이미지영상에는 아무것도 검출이 안된 상태(완전검은영상)입니다. 참고로 다른 이미지데이터를 가지고 U-NET모델로 세그멘테이션을 수행해본결과 예측결과도 상당히 잘되어서 모델에는 문제가없는것으로 판단햇습니다. 여기서 조언을 좀 부탁드리겠습니다. 1> 정확도는 90%이상, 로스가 0.1이하인데 아무것도 검출이 안되엇다는 것은 , 객체가 너무미세해서 검출을 못한걸로 이해해도 되는지요? 2> 이런경우 성능을 올리기 위한방법으로 오그멘테이션방법도 잇는데, 특히 사용해야할 오그멘테이션방법이 잇는지요? 참고로 확대기능등을 사용햇습니다. 3> 다른방법으로 선생님CNN강의에서사용한 mark-rcnn 방법도 해볼려고 하는데, 어떻게 생각하시는지요? 글을 적다보기 글이 너무 길어져서 죄송합니다, 바쁘시겟지만 조언 좀 부탁드리겟습니다 ㅎ
tensorflow 머신러닝 딥러닝 컴퓨터-비전 keras python 컴퓨터-비전 딥러닝 머신러닝 배워볼래요?
anycad11
2023-01-30T14:22:25.706Z
댓글 1
좋아요 0
조회수 422
해결됨
[코드캠프] 강력한 CSS
안녕하세요 <단위 심화> 강의 중 .item2 { background: green; width: calc(100%- 70px); height: 50px; } "- 사이에 공백을 넣지 않았다. 따라서 100% 가로값만 부여가 되었고, 이 때 100%는 입력한 100%가 아니다. item2가 블록요소이기 때문에 자동으로 부모요소의 가로값을 꽉 채워서 들어간다. 그렇기 때문에 100%의 가로줄이 입력된 것이다. 따라서 이 줄은 아무런 기능을 하지 않는다." 이렇게 알려주셨는데 이해가 완벽히 되지 않습니다. 더 쉽게 설명을 해주실 수 있을까요..?
liltjay
2023-01-30T06:57:45.657Z
댓글 1
좋아요 0
조회수 266
미해결
애플 웹사이트 인터랙션 클론!
<!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> 복붙해서 사용하세요.
html/css HTML/CSS svg 웹-디자인 인터랙티브-웹 웹 디자인 인터랙티브-웹 javascript 클론코딩 클론코딩
mill
2023-01-30T00:52:30.300Z
댓글 0
좋아요 0
조회수 677
해결됨
쉽게 배우고, 포트폴리오로 만드는 반응형 웹! #설화수
방금전 선생님의 강의를 완강하고 복습중인데 슬라이드 부분에 대해 질문이 있어서요. 강의하신내용에 vosual 슬라이드부분을 왼쪽으로 부드럽게 animate로 넘기고 싶은데 아직 제가 가진 지식으로는 혼자 작성해도 검색해보고 찾아봐도 안되서 질문드립니다. 코드 어떤부분을 고쳐야 하는지 여쭤봅니다.ㅜㅜ
html/css 클론코딩 HTML/CSS 반응형-웹 반응형-웹 클론코딩
김무준
2023-01-29T16:38:27.465Z
댓글 1
좋아요 1
조회수 438
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
안녕하세요 선생님. 강의 열심히 듣고 있습니다^^; 다름이 아니라 아래와 같이 미분류 카운트가 입력되지 않아 오류가 발생하는 부분때문에 계속 찾아보았으나, 답답한 마음에 질문글을 남깁니다. 우선 카테고리 분류에서 프로그래밍, 문화&예술 까진 카운트가 잘 입력됩니다. 그렇지만 "미분류" 부분은 계속 () 으로 표시됩니다. 분명 미분류 부분이 존재함에도 불구하고, 카운트가 되지 않는 건 무엇이 잘못되었는지 도저히 알기가 어렵습니다. 혹시 확인이 가능할까요?^^;; test.py 실행시 오류화면 미분류() 카운트 부분을 주석처리하면 테스트는 잘 완료됩니다. 총 4개의 페이지에 대한 코드를 올려봅니다. test.py base.html views.py post_list.html test.py from 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.py from 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 %}
html/css django HTML/CSS docker tdd javascript python bootstrap aws
몽상가
2023-01-29T16:02:15.663Z
댓글 1
좋아요 0
조회수 468
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 메인 페이지 출력이 안되어서 질문 남깁니다 해당 코드와 실행결과 사진으로 첨부했습니다
html/css HTML/CSS express node.js 머신러닝 배워볼래요? javascript 머신러닝 react-native tensorflow nodejs react
유영
2023-01-29T11:09:27.614Z
댓글 1
좋아요 0
조회수 572
