172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
강의 따라해서 구글 로그인 연결해서 로컬사이트에서 로그인, 로그아웃이 가능하고 로그인 계정도 admin에 잘 저장되고있습니다. (기능적으로는 문제 없어보입니다.) 근데 test를 돌리면 "allauth.socialaccount.models.SocialApp.DoesNotExist" 에러가 발생하는데.. 어느 부분이 잘못 된 걸까요.. github: https://github.com/Tonynology/django_project/tree/main/blog (여러 번의 삽질로 SITE_ID가 3이 되었습니다.. 3으로 해야 로컬사이트 blog에 들어가지네요.)
HTML/CSS javascript python django bootstrap aws docker tdd
Tony Moon
2023-08-26T04:22:02.700Z
댓글 2
좋아요 1
조회수 1710
해결됨
[코드캠프] 시작은 프리캠프
강사님의 경우 flex-direction: row;와 같은 값을 뒷쪽에 써도 되지만 저의 경우 뒤에쓰면 오류가 나고 맨 위에 써줘야 합니다. 왜 그런 것일까요?
강나현
2023-08-25T11:36:35.615Z
댓글 1
좋아요 0
조회수 293
미해결
재고시스템으로 알아보는 동시성이슈 해결방법
사용자가 많지 않고 일반 커뮤니티 같은 경우에는 좋아요 개수가 많이 몰릴 일이 없다고 생각해서 PessimisticLock을 적용하려고 합니다. 제가 생각했을 땐 인스타나 그런 대규모 사이트의 좋아요는 PessimisticLock을 적용하면 성능 저하가 뚜렷하게 나타난다고 생각합니다. -> 레디스 사용이 베스트 토이프로젝트 규모의 SNS는 PessimisticLock으로 구현하는게 비용도 들지 않고 데이터 정합성이 보장된다고 판단했습니다. 혹시 제가 틀린 거나 더 나은 방법이 있을까요? 항상 감사합니다! 아 추가로 newFixedThreadPool은 왜 32로 설정하는지도 궁금합니다!!
진짜 잘하고싶다
2023-08-25T08:04:02.667Z
댓글 1
좋아요 1
조회수 954
미해결
인터랙티브 웹 개발 제대로 시작하기
예외적으로 플러그인 같이 개별로 작동하는 JS파일은 async로 불러오고 일반적으로 작성한 JS들은 전부 defer로 불러온다고 했을때 발생할 수 있는 문제같은게 있을까요?
HTML/CSS javascript 인터랙티브-웹
Rooftop_Run
2023-08-25T07:24:12.709Z
댓글 2
좋아요 0
조회수 327
해결됨
웹 애니메이션의 새로운 표준, Web Animations API
우선 좋은 강의에 감사드립니다. scroll-timeline을 바탕으로 새로운 프로젝트를 작성하고 있는데요, 특정 시점에 요소 opacity 조절로 노출되게끔 처리했습니다. 그런데 이 노출되는 시점에서부터는 특정 스크롤까지 css keyframes로 혼자 깜빡깜빡 거리는 효과를 주고싶은데요. 자바스크립트로 class를 add / remove 해야할지 고민입니다. 더 효율적이거나 좋은 방법이 있을까요?
HTML/CSS javascript 인터랙티브-웹 frontend web-animations-api
민서
2023-08-25T07:01:24.382Z
댓글 2
좋아요 0
조회수 344
미해결
[웹 퍼블리싱 실습] 웹 표준 사이트 만들기
float:left를 모든 클래스에 넣어야 된다고 했는데 저는 side에만 넣어도 충분히 구현되는데 왜 다 넣어야 되는 건가요?
지원
2023-08-25T05:11:46.503Z
댓글 2
좋아요 0
조회수 411
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>철길마을</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="container"> <div class="main-con"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="center"> <div class="banner"></div> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <div class="right"> <div class="slide"> <div class="slide-cons"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-con"> <div class="link"></div> <div class="copy"></div> </div> <div class="family"></div> </footer> </div> <!-- JS --> <script src="js/jquery-1.12.4.js"></script> <script src="js/script.js"></script> </body> </html> @charset "utf-8"; body { font-size: 15px; margin: 0; padding: 0; color: #333; background-color: #fff; } a { color: #333; text-decoration: none; } /* rayout */ .main-con { border: 1px solid #000; display: flex; } .left { width: 200px; border: 1px solid #000; box-sizing: border-box; } .center { border: 1px solid #000; box-sizing: border-box; width: 400px; } .right { border: 1px solid #000; box-sizing: border-box; flex: 1; } /* header */ header { position: relative; z-index: 10; } header > div { border: 1px solid #000; box-sizing: border-box; } .header-logo { height: 100px; } .navi { height: 350px; } /* banner */ .banner { border: 1px solid #000; height: 150px; box-sizing: border-box; } /* news */ .news { border: 1px solid #000; box-sizing: border-box; height: 200px; } /* gallery */ .gallery { border: 1px solid #000; box-sizing: border-box; height: 200px; } /* shortcut */ .shortcut { border: 1px solid #000; box-sizing: border-box; height: 150px; } /* slide */ .slide { border: 1px solid #000; box-sizing: border-box; width: calc(100vw - 600px); height: calc(100vh - 120px); } /* footer */ footer { display: flex; height: 120px; } footer > div { border: 1px solid #000; box-sizing: border-box; height: 120px; } .footer-logo { width: 200px; } .footer-con { flex: 1; } .footer-con > div { border: 1px solid #000; height: 60px; box-sizing: border-box; } .link {} .copy {} .family { width: 230px; } 위와 같이 레이아웃만 짰을 때 이 사진처럼 .left와 .footer-logo의 너비 값이 같은 200px을 가지는데 레이아웃에선 footer-logo의 너비 값과 같지 않은 것처럼 보입니다. 계속해서 수정해본 결과 main-con의 너비값을 100vw로 주니 해결은 되는데 창에 조금의 스크롤이 생기는데 시험때 창에 스크롤이 생기면 감점 요인이 되는거겠죠..?
한아
2023-08-24T18:02:01.989Z
댓글 1
좋아요 1
조회수 301
미해결
생활코딩 - HTML 기초
4강 예제 어디에 있나요?
d k
2023-08-24T16:44:17.619Z
댓글 1
좋아요 0
조회수 571
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
계속되는 자잘한 질문에 죄송합니다 T.T 이번 주 토요일에 시험을 앞두고 있어서 좀 더 확실하게 알고 넘어가고자 계속해서 질문하게 되는 것 같습니다..! 팝업창 위치 관련해서 궁금한 점이 있습니다. .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0, 0.2); z-index: 11; display: none; } .modal-con { position: absolute; top: 50%; left: 50%; background-color: #fff; width: 500px; transform: translate(-50%, -100%); padding: 20px; border-radius: 20px; } 위치 관련 질문이어서 .modal과 .modal-con 부분만 가져오게 되었습니다. 위와 같이 작성할 경우에 해당 사진처럼 브라우저 중앙에 위치하기는 하는데 안 예쁘기도 하고 시험지(?)에 나와있는 모달 제작 그림에선 팝업창이 슬라이드까지 가리고 있어서 더 올려주고 싶은데 .modal-con { position: absolute; top: 50%; left: 50%; background-color: #fff; width: 500px; transform: translate(-50%, -100%); padding: 20px; border-radius: 20px; } .modal-con h2 { text-align: center; background-color: #000; color: #fff; padding: 10px; border-radius: 10px; } 이런 식으로 .modal-con의 translate 뒷부분에 -50%, -100% 를 주어서 임의로 더 올려도 괜찮은지가 궁금합니다..! 시험을 앞뒀다보니 저는 제 눈의 만족을 위해 저렇게 연습해왔는데 실제 시험에서 저렇게 작업해도 될지, 무조건 브라우저 중앙에 위치시키는 것이 좋을 지 확실하게 알고 가는 것이 좋을 것 같아서 질문드리게 되었습니다. 항상 감사합니다!!
한아
2023-08-23T17:06:38.402Z
댓글 1
좋아요 1
조회수 325
해결됨
[코드캠프] 시작은 프리캠프
21:15초경 작성하신 코드대로 작성하고, 인증번호 전송을 여러번 클릭 할 경우 타이머 숫자가 버벅거리는 현상이 있는데, 이게 클릭 할 때 마다 3:00 타이머가 시작되어 여러개가 동시에 입력되어 발생하는 현상인가요? 맞다면 이 현상은 어떻게 해결하는지 궁금합니다.
b0i4s
2023-08-23T06:28:27.632Z
댓글 1
좋아요 0
조회수 259
미해결
[웹 개발 풀스택 코스] HTML&CSS 기초
표 스타일을 다루는 강의에서, nth-child를 이용해 표의 행을 띄엄띄엄 채색할 때(background-color), 본 강의에서 제공된 코드와 똑같이 작성한 것 같은데 저는 표의 행 전체가 칠해집니다. nth-child 안의 숫자를 바꾸면 행이 전부 칠해졌다가 아예 안칠해졌다가 하는데, 무엇이 잘못되었는지 잘 모르겠습니다. 인터넷을 찾아보면 nth-child가 부모가 어떻든지간에 괄호안에 적힌 숫자번째 줄에 모두 적용하기 때문이라는 내용이 나오는데, 그렇다면 강의에서는 잘 작동된 이유가 뭔지 알고싶습니다. 그리고 제가 빠뜨린 개념이 있는지 혹시 눈치채신 분이 계시다면 알려주시면 감사하겠습니다.
학생
2023-08-23T03:16:22.950Z
댓글 1
좋아요 0
조회수 363
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
시험장에서 네트워크가 끊기는 것으로 알고 있는데 강의에서 영상으로 설명해주신 것은 비주얼 스튜디오 코드가 아니어서 확실한 정보를 얻기 위해 질문하게 되었습니다! 초반 강의에서 말씀하신 필수로 설치해야 하는 익스텐션은 네트워크가 끊겨 있어도 설치가 가능한 건가요?? 또 인터넷이 연결되지 않아도 브라우저 창으로 live server가 가능한 것인지 궁금합니다..!
한아
2023-08-22T16:47:27.266Z
댓글 2
좋아요 1
조회수 309
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
커밋 메시지가 뭔가요? git commit -m "project init" 에서 "project init" 대신 다른 것을 써넣어도 작동하나요? "project init" 이 어떤 역할을 하는지 잘 모르겠습니다.
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
tostarmk
2023-08-22T09:31:50.146Z
댓글 2
좋아요 1
조회수 453
미해결
처음 만난 리액트(React)
스타일콤포넌트 작성 부분에 백틱 다음 문자열 작성에 소플님의 VS 화면의 css 스타일 코드 부분이 하늘색(?)과 노랑색, 갈색으로 보여서 가독성이 좋아 보입니다. 그런데 저는 백틱 다음의 문자열이 모두 갈색으로 보이는데 VS환경설정 기능에 뭔가 있는 건가요? 다른 부분은 색깔 구분에 잘되어져 보이는데, 유독 스타일콤포넌트의 백틱 부부분만 색상 구분이 안됩니다.
Sun-Wook Lee
2023-08-22T07:24:35.688Z
댓글 1
좋아요 1
조회수 327
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
fetch join 시 alias를 사용해서 필터링하는게 왜 안되는걸까요? 이거에 대한 답변으로 디비상태와 객체상태의 일관성이 깨지게 됨을 보통 얘기하시는것같아요 alias를 사용해서 필터링해버리면 실제 디비에 있는 데이터보다 적은 개수가 나오게 되니까요. 근데 어차피 그 필터링된 결과만을 결과로 리턴해주어야한다면 사용해도 괜찮을 것 같은데 디비상태와 객체상태의 일관성이 깨지는게 왜 문제가될까요? 그래서 생각을 해봤는데 크게 다음인것같아요 - 유지관리어려울 수 있음 - 캐싱문제 근데 저 두 문제가 정말 큰 문제가 되는지를 잘 모르겠어요...; 유지관리 어려울수야 있겠지만 그렇게 까지 어려울지도 잘 모르겠고, 캐싱문제(쿼리결과캐싱)도 저 코드에 의해 영향이 얼마나 많이 갈지..도 잘 모르겠어요 저 유지관리/캐싱 문제가 아니라.. 2차캐시때문인가요? 예를들어서 team과 member가 일대다 연관이고 team을 select해온다는 sql이 있다고 가정 1. fetch join + on 절 : 디비에 있는 일부 데이터 불러옴 2. fetch join 만있어서 디비에있는 모든 데이터 불러옴 하나의 트랜잭션에서 1호출 뒤에 2를 호출하면 디비에 쿼리를 날리긴하지만 이미 team_id에 해당하는 객체가 영속성 컨텍스트에있어서 가져온거버림 그래서 추후에 문제가생길 수 있음 --- 인건가요?
김민지
2023-08-22T04:34:56.660Z
댓글 2
좋아요 2
조회수 494
미해결
자바스크립트 : 기초부터 실전까지 올인원
혹시 강의 정리된 자료 없을까요? ㅠ
김희찬
2023-08-22T01:29:17.124Z
댓글 1
좋아요 0
조회수 432
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
보통 200X40 혹은 190X45 픽셀 크기로 작업하라고 로고 세부사항에 지시가 되어있는데 header 폴더에 제공된 로고를 삽입한다. 로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다. 이 부분에서 가로 세로 비율을 유지하라는 것이 정확히 어떤 의미인지 이해가 잘 가지 않습니다. 이러한 지시사항이 있을 땐 로고 작업 크기를 어떻게 하는 것이 좋을까요??
한아
2023-08-21T19:48:21.182Z
댓글 1
좋아요 1
조회수 461
미해결
처음 만난 리액트(React)
실습 코드 그대로 진행한 것 같은데 npm start를 치면 오류는 안 나지만 화면에 아무 내용도 출력되지 않습니다 ㅜㅜ.. 어떤 부분에서 잘 못 된 것인지 여러 번 봐도 모르겠어서 질문 남깁니다
xeonj
2023-08-21T12:31:56.568Z
댓글 1
좋아요 1
조회수 1143
미해결
웹 애니메이션의 새로운 표준, Web Animations API
선생님 안녕하세요 ! 강의를 듣는 중 궁금한 점이 있어 질의 드립니다. section04 - 각각의 객체에 개별 애니메이션 적용하기 영상에서 let bar를 for문 밖에 선언하고 for문 안에서 document.createElement를 할당한 이유가 있을까요? for문 안에 같이 선언하면서 할당하는 코드와 어떤 부분이 다른지 잘 모르겠어서 질의 드립니다. const bars = []; let bar; for(let i = 0; i < 30; i++){ bar = document.createElement('div'); bar.classList.add('bar'); barContainer.appendChild(bar); bars.push(bar); }
HTML/CSS javascript 인터랙티브-웹 frontend web-animations-api
ReKoding
2023-08-21T11:23:45.095Z
댓글 3
좋아요 0
조회수 498
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>d터압 새로 2칼럼 d-1</title> <link rel="stylesheet" href="css/d-1.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="d-1images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-2</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-3</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-4</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="d-1images/slide-d-01.jpg" alt="slide1"></a> <a href="#none"><img src="d-1images/slide-d-02.jpg" alt="slide2"></a> <a href="#none"><img src="d-1images/slide-d-03.jpg" alt="slide3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="d-1images/banner-01.png" alt="bannerimage1"></a> <a href="#none"><img src="d-1images/banner-02.png" alt="bannerimage2"></a> <a href="#none"><img src="d-1images/banner-03.png" alt="bannerimage3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="d-1images/shortcut-01.png" alt="shortcutimage"> <div class="shortcut-content"> <h3> 얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인 </h3> <p> 운영위원장 후보자 추천을 받고 있습니다. 2020.01.09 홈커밍데이 진행위원회 결과를 다운로드 받으세요. 2020.01.07 카드결제 무이자 이벤트 한시적 10월 20일까지 2019.12.31<br> 보안강화 시스템 작업 안내 공지 2019.12.20 부여 가을연꽃축제 10주년 콘서트 축제 <b>기간 : 2022년 12월 18일 ~ 12월 25일</b> </p> </div> <a href="#none"><img src="d-1images/shortcut-02.png" alt="shortcutlink"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b></a> <a href="#none">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a> <a href="#none">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a> <a href="#none">보안강화 시스템 작업 안내 공지 <b>2019.12.20</b></a> <a href="#none">부여 가을연꽃축제 10주년 콘서트 축제 <b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"> <img src="d-1images/gallery-01.png" alt="gallery-01"> </a> <a href="#none"> <img src="d-1images/gallery-02.png" alt="gallery-02"> </a> <a href="#none"> <img src="d-1images/gallery-03.png" alt="gallery-03"> </a> <a href="#none"> <img src="d-1images/gallery-04.png" alt="gallery-04"> </a> <a href="#none"> <img src="d-1images/gallery-05.png" alt="gallery-05"> </a> <a href="#none"> <img src="d-1images/gallery-06.png" alt="gallery-06"> </a> <a href="#none"> <img src="d-1images/gallery-07.png" alt="gallery-07"> </a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="d-1images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="d-1images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="d-1images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="d-1images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <!--modal--> <div class="modal"> <div class="content-modal"> <h2> 부여 가을연꽃축제 팸투어 모집 </h2> <p> 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. 팸투어는 전액 무료로 진행되며 참가비 없습니다.<br> 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! </p> <div class="close-modal">X 닫기</div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; font-size: 15px; } a{ list-style: none; text-decoration: none; color: inherit; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; } .left{ width: 200px; } .right{ flex: 1; } header{} header> div{ } .header-logo{ height: 100px; } .navi{ height: 400px; } /*navigation*/ .menu{ list-style: none; padding: 0; margin: 0; width: 95%; margin: auto; margin-top: 15px; } .menu li { } .menu li > a { display: block; border: 1px solid #000; text-align: center; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .spot-menu{ height: 50px; text-align: center; } .spot-menu a:hover{ text-decoration: underline; } .slide{ height: 400px; } .slide-image{ height: 400px; position: relative; overflow: hidden; } /*slide animation*/ .slid-image-inner{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite; } .slid-image-inner a{} .slid-image-inner a img{} @keyframes slide{ 0%{ top: 0; } 10%{ top: 0; } 35%{ top: -400px; } 65%{ top: -400px; } 70%{ top: -800px; } 90%{ top: -800px; } 100%{ top: 0; } } .slide-banner img{ width: 150px; display: block; } .slide-banner{ position: absolute; top: 0; right: 10px; } .items{} .items > div{ border: 1px solid #000; } .shortcut{ height: 250px; display: flex; align-items: center; margin: 0 15px; gap: 50px; } /*news-gallery*/ .news-gallery{ height: 250px; } .tab-inner{ width: 90%; margin: auto; margin-top: 5px; } .tab-inner .btn{} .btn span{ border: 1px solid #000; width: 150px; padding: 4px; display: inline-block; text-align: center; border-radius: 10px 10px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -2px; background-color: #eee; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{ border: 1px solid #000; padding: 0px 15px; } .tabs>div{ } .tab1{} .tab1 a{ display: block; padding: 10px; border-bottom: 1px dashed #000; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .tab2 img{ margin: 47px 20px; width: 170px; align-items: center; } footer{ display: flex; height: 100px; align-items: center; } footer > div{ text-align: center; } .footer-logo{ width: 200px; } .copyright{ flex: 1; padding-top: 35px; box-sizing: border-box; } .sns{ width: 230px; } .sns img{ width: 70px; border-radius: 5px; } /*modal*/ .modal{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none; } .content-modal{ width: 500px; height: 400px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } h2{ background-color: blue; text-align: center; padding: 5px; color: #fff; } p{ line-height: 2.5em; padding: 0 15px; } .close-modal{ float: right; padding: 5px 7px; border: 1px solid #000; margin-right: 25px; cursor: pointer; } /*navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /*tab-inner*/ $('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) /*modal*/ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) 사진첨부한곳처럼 빈공간이 나오는게 정상인건가요 ? 애니메이션 작동이 안되는데 사진때문에 그런걸까요 object-fit cover 해도 저상태에서 애니메이션 움직이지도 않아요,
jkjk7088
2023-08-21T10:22:09.115Z
댓글 3
좋아요 1
조회수 451
