날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요 선생님, 같은 방식으로 날짜 대신 오늘 시간까지 "시간"이 롤링되며 카운팅되는 효과로 적용해볼 수 있을까요??
- HTML/CSS
- javascript
- jquery
- 인터랙티브-웹
173만명의 커뮤니티!! 함께 토론해봐요.
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요 선생님, 같은 방식으로 날짜 대신 오늘 시간까지 "시간"이 롤링되며 카운팅되는 효과로 적용해볼 수 있을까요??
미해결
스프링 시큐리티
Cookie 값을 삭제 하며 여러 동작을 해보던 도중, 로그인을 하기 전부터 JSSESSIONID 값이 cookie 에 들어가 있는 것을 확인하였습니다. 처음에는 오류인가 싶어 값을 삭제하고 로그인하였더니, 로그인이 동작하지 않고 그냥 페이지가 reload 된 다음 임의의 JSSESSIONID 값을 가져왔습니다. 왜 reload 할 때마다 JSSESSIONID 값을 가져오는 걸까요? 그리고 왜 JSSESSIONID 값 없이는 로그인 동작 자체가 안 되는 걸까요?
해결됨
실전! Querydsl
plugins { id 'java' id 'org.springframework.boot' version '3.1.5' id 'io.spring.dependency-management' version '1.1.3' id "com.ewerk.gradle.plugins.querydsl" version "1.0.10" } group = 'study' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral () } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt: $ { dependencyManagement.importedProperties [ 'querydsl.version' ]} :jakarta" annotationProcessor "jakarta.annotation:jakarta.annotation-api" annotationProcessor "jakarta.persistence:jakarta.persistence-api" testImplementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' } tasks. named ( 'test' ) { useJUnitPlatform () } clean { delete file ( 'src/main/generated' ) } tasks. named ( 'bootBuildImage' ) { builder = 'paketobuildpacks/builder-jammy-base:latest' } tasks. named ( 'test' ) { useJUnitPlatform () } //querydsl 세팅 시 def querydslDir = " $buildDir /generated/querydsl" querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java. srcDir querydslDir } configurations { querydsl. extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations. querydsl } 인프런에서 질문 & 답변을 보고 gradle 설정했는데도 오류가 계속 발생됩니다. Build and run using : Gradle 로 변경하면 발생 되는 오류 입니다. 오류 : Attempt to recreate a file for type study.querydsl.entity.QHello
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
터미널에 이렇게만 뜨는데 어떻게 해야할까요? 화면에 잘린 하단에도 특별한건 없습니다
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
지금은 마커만 눌르면 해당 정보만 보이는데, 마커를 눌렀을때 html안에 해당 음식점의 상세 페이지 정보를 만들어보려고 하는데.. 너무 막막해서요.. 이럴때는 어찌해야 할지 조금 말씀 부탁드려도 될까요?
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
원핫 인코딩 코드에서 괄호 안에 [cols]를 쓸 때와 columns=cols를 쓸 때의 차이가 궁금합니다. 3-4 Feature engineering에서와 3-6 Regression에서 작성법이 달라서요. 3-6 Regression에서는 train[cols]로 썼더니 에러가 나네요ㅠ # 3-4 Feature engineering c_train[col] = le.fit_transform(c_train[col]) c_test[col] = le.transform(c_test[col]) # 3-6 Regression train = pd.get_dummies(train, columns=cols) test = pd.get_dummies(test, columns=cols)
해결됨
[코드캠프] 시작은 프리캠프
피그마에서는 번호와 곡명이 붙어 있어 밑에 노래 제목들이 깔끔하게 정렬되어있는데 수업시간에서는 곡명과 번호를 붙이지 않더라구요 이부분은 어떻게 해야 할까요? 강의에서 보면 따로 th부분을 제어하지 않던데, 4개의 열이 차지하는 공간은 어떻게 지정이 되는건지 원리가 궁금합니다!
해결됨
처음 만난 리액트(React)
안녕하세요 선생님 현재 chapter_03 진행 중인데요, jsx 실습 진행중인데, 제 코드는 이렇구요, jsx는 이렇게 작성하였습니다. 그리고 npm start로 react-app 실행 시 요렇게 한글이 깨지는데요 혹시 해결 방안을 알 수 있을까요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
B유형 세로슬라이드 실습중에 오류가 있어 문의 드립니다. 마크업은 다 맞는 것 같은데 아예 움직이지를 않아요... 오늘 시험인데 갑자기 안되서 너무 속상합니다ㅠㅠ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>웹디자인기능사(유형B)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> </div> </body> </html> @charset "utf-8"; body { margin: 0; } .container {} .header-inner { background-color: #eee; display: flex; justify-content: center; } header { border: 1px solid #000; width: 1200px; display: flex; justify-content: space-between; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .content-inner {} .slide { width: 1200px; margin: auto; } .slide > div { border: 1px solid #000; height: 300px; } .items { width: 1200px; display: flex; margin: auto; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { width: 1200px; display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: 1000px; } .sns { width: 200px; } /* Slide */ .slide { position: relative; height: 300px; font-size: 0; } .slide-items { position: absolute; top: 0; left: 0; } .slide-item {} /* Slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000)
미해결
재고시스템으로 알아보는 동시성이슈 해결방법
안녕하세요 강사님 강의를 보고 토이 프로젝트에서 주문 시 재고 감소 및 메뉴 주문량 증가 로직에서 낙관적락 기법을 적용해 보았는데요, 강의에서 해주신 내용 그대로 파사드 패턴 까지 적용을 해보면서 시도했는데 무한 루프가 돌았습니다. hikariCP pool을 40으로 설정해주니 그제서야 해결이 되었는데요, 강의에선 네임드락에서 커넥션풀을 지정해주었는데요 저는 낙관적락인데도 해당 설정을 해서 해결된 이유가 있을까요? @Service @RequiredArgsConstructor public class OrderService { @Transactional public Order orderWithOptimisticLock(Long memberId, LocalDateTime now) { Cart cart = cartRepository.findByMember(memberId); List<CartItem> cartItems = cart.getCartItems(); cartItems.stream() .map(CartItem::getMenu) .forEach(menu -> { decreaseStockWithOptimisticLock(menu.getId(), 1); increaseMenuOrderCountWithOptimisticLock(menu.getId(), 1); }); Money money = calculator.calculateMenus(cart.getMember(), cart.convertToMenus()); Order order = Order.createOrder(cart, money, now); return orderRepository.save(order); } public void decreaseStockWithOptimisticLock(Long menuId, int quantity) { Menu menu = menuRepository.findByIdForOptimisticLock(menuId); menu.decrease(quantity); } public void increaseMenuOrderCountWithOptimisticLock(Long menuId, int quantity) { Menu menu = menuRepository.findByIdForOptimisticLock(menuId); menu.increaseOrderCount(quantity); } } ``` @Component @RequiredArgsConstructor public class OptimisticLockStockFacade { private final OrderService orderService; public Order order(Long memberId, LocalDateTime localDateTime) throws InterruptedException { while (true) { try { return orderService.orderWithOptimisticLock(memberId, localDateTime); } catch (Exception e) { Thread.sleep(50); } } } } ``` public interface JpaMenuRepository extends JpaRepository<Menu, Long> { @NotNull @Lock(LockModeType.OPTIMISTIC) @Query("select m from Menu m where m.id = :id") Optional<Menu> findByIdForOptimisticLock(@NotNull @Param("id") Long id); }
해결됨
[코드캠프] 시작은 프리캠프
선생님과 똑같이 코드를 입력했는데 계속해서 정의되지 않은 단어라고 뜨면서 코드가 실행되지 않습니다. 이부분에서 뭐가 문제인지 잘 모르겠는데 알려주시면 감사하겠습니다
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
const {studentName} = req.query; const {studentIdx} = req.params; 여기서 req.query와 req.params의 차이가뭔가요?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
들어가서 찾아보고 싶은게 있는데 새소식에 없어져서요..
미해결
자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
앞 문제에서 Collection.sort를 쓰면 문제에서 효율적이지 못하다는 댓글을 봐서 처음부터 Array.sort를 해서 정렬하는 방법을 생각을 못했는데 어떤 문제에선 사용하고 사용하지말고 구분이잘 안되는데 이럴땐 어떻게 하나요...
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. 우측고정 네비게이션에서 'Sub-menu' 부분에 높이 200px을 줬는데 크기 늘어나지 않아 문의 드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>C2_세로슬라이드, 네비(왼쪽개별우측고정)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a class="open-modal" href="#none">협회소개</a> <div class="sub-menu"> <a href="#none">인사말</a> <a href="#none">명인</a> <a href="#none">오시는길</a> </div> </li> <li> <a href="#none">행사안내</a> <div class="sub-menu"> <a href="#none">요리경연대회</a> <a href="#none">전시참가</a> <a href="#none">참가신청</a> </div> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <a href="#none">축제소식</a> <a href="#none">보도자료</a> <a href="#none">레시피</a> </div> </li> <li> <a href="#none">회원마당</a> <div class="sub-menu"> <a href="#none">Q&A</a> <a href="#none">사진갤러리</a> <a href="#none">공지사항</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"></div> <div class="footer-content"> <div class="sns"></div> <div class="family-site"></div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container { display: flex; } .container > div { border: 1px solid #000; } .left { width: 200px; } .right { width: 800px; } header { position: relative; z-index: 1000; } header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } /* Slide */ .slide { position: relative; width: 800px; height: 350px; overflow: hidden; } .slide > div { border: 1px solid #000; height: 350px; } .slide-items { font-size: 0; position: absolute; top: 0; left: 0; } .items { display: flex; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 300px; } .gallery { width: 250px; } .shortcut { width: 250px; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .copyright { width: 600px; } .footer-content { width: 200px; } .footer-content div { border: 1px solid #000; height: 50px; } .sns {} .family-site{} /* Navigation */ .menu { width: 90%; margin: auto; list-style: none; padding: 0; padding-top: 10px; position: relative; } .menu li { text-align: center; border: 1px solid #000; } .menu li > a { padding: 5px; display: block; border: 1px solid #000; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { display: none; width: 100%; height: 200px; position: absolute; top: 0; left: 100%; } .sub-menu a { padding: 6px; display: block; background-color: #000; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color: #000; } /* Slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({top: '-350px'}, function(){ $('.slide-items').css({top: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000) /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
인코딩을 할때 선생님이 어쩔때는 원핫인코딩을 하시고 어쩔때는 레이블인코딩을 하시던데 그 인코딩을 정하시는 기준을 잘 모르겠습니다! 인코딩을 정하실때 그 경우에 대해서 자세히 알려주시면 감사하겠습니다 그리고 인코딩을 할때 컬럼도 몇개 정하셔서 하시던데 그 컬럼고르는 기준도 잘 모르겠습니다 그 기준에 대해서도 선택하는 방법을 알려주시면 감사하겠습니다 ㅠㅠ
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요. B4 실습 중에 안되는 기능이 있어 문의 드립니다. appendTo 기능이 작동하지 않습니다. 어떻게든 해결 해보려고 클래스네임, 점 하나까지 다 확인 했는데 도저히 모르겠어서 질문 남겨요. 되던게 안되니까 너무 당황스러워요... <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>B4_슬라이드 최종본</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div class="slide-items"> <a class=".slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class=".slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class=".slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="banner"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-content"> <div class="footer-menu"></div> <div class="copyright"></div> </div> <div class="family-site"></div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .header-inner { background-color: #eee; display: flex; justify-content: center; } header { border: 1px solid #000; display: flex; justify-content: space-between; width: 1200px; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .content-inner {} /* Slide */ .slide { position: relative; width: 1200px; height: 300px; margin: auto; } .slide > div { border: 1px solid #000; } .slide-items { width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; } .items { width: 1200px; display: flex; margin: auto; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 400px; } .gallery { width: 400px; } .banner { width: 400px; } .footer-inner { background-color: #ddd; display: flex; justify-content: center; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-content { width: 1000px; } .footer-content > div { border: 1px solid #000; height: 50px; } .footer-menu {} .copyright {} .family-site { width: 200px; } /* slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000)
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
애니메이션 효과 animation: slide 10s linear infinite;로 주라고 하셨는데 어떤 강의에선 .animate 속성으로 주라고 하는데 무슨 차이이고 어느 것이 맞습니까?
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
보통 작업형2에서는 예측값을 물어보는 문제가 나오던데요. 문제가 나올때 어느문제는 분류모델을, 어느문제는 회귀모델을 사용해야하는지 궁금합니다. 지금까지 강의+기출문제를 보면서는 분류/회귀를 결정하는 부분이 평가 모델을 통해 진행된다는 느낌을 받았는데요. 1) roc_auc_score, accuracy_score 이 평가모델로 쓰일 경우, 분류형 모델 사용(Classifier) 2) rmse, mean_squared_error 이 평가모델로 쓰일 경우, 회귀모델 사용(Regressor) 이렇게 생각하면서 작업형2를 접근하는게 맞는지 궁금합니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
현재 E1 실습 중에 안되는 부분이 있어 문의 드립니다. CSS에서 'shortcut-01' 이미지 조절 중인데 사이즈가 안줄어들어요.ㅠㅠ 왜이럴까요..? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E1_최종본_영상시청</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"></div> <div class="spot-menu"> <a href="#non3">로그인</a> <span>l</span> <a href="#non3">회원가입</a> </div> </header> </div> <div class="content"> <div class="shortcut"> <a class="shortcut-image" href="#none"><img src="images/shortcut-01.png" alt="shortcut-01"></a> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br>더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> <b>기간: 2022년 12월 18일~ 12월 25일</b></p> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news"></div> <div class="gallery"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/banner-02.png" alt="banner-02"></a> <a href="#none"><img src="images/banner-03.png" alt="banner-03"></a> <a href="#none"><img src="images/banner-04.png" alt="banner-04"></a> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-e-01.jpg" alt="slide-e-01"></a> <a class="slide-item" href="#none"><img src="images/slide-e-02.jpg" alt="slide-e-02"></a> <a class="slide-item" href="#none"><img src="images/slide-e-03.jpg" alt="slide-e-03"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">기업소개 제휴 및 입점 문의</a> <a href="#none">개인정보처리방침</a> <a href="#none">이메일무단수집거부</a> <a href="#none">사이트맵</a> <a href="#none">인재채용</a> </div> <div class="copyright"> <p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스</p> </div> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .content { width: 400px; } .right { width: calc(100% - 600px); } header {} header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; text-align: center; } .content {} .content > div { border: 1px solid blue; } /* Shortcut */ .shortcut { height: 150px; display: flex; } .shortcut .shortcut-image { height: 80px; } /* News & gallery */ .news { height: 250px; } .gallery { height: 250px; } .banner { height: 150px; display: flex; } .banner img { width: 100% } /* Slide */ .slide { display: flex; } .slide-image { flex: 1; height: calc(100vh - 120px); position: relative; overflow: hidden; } /* Slide Animation */ .slide-items { width: 300%; height: inherit; font-size: 0; position: absolute; } .slide-items a { display: inline-block; height: inherit; width: calc(100% / 3); } .slide-items a img { width: 100%; height: inherit; object-fit: cover; } footer { display: flex; } footer > div { border: 1px solid green; height: 120px; } .footer-logo { width: 200px; } .footer-content { width: calc(100% - 200px); } .footer-content div { border: 1px solid #000; height: 60px; } .footer-link {} .footer-link a:after { content: 'l'; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .copyright {}