inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

Link 적용하기 관련 문의드립니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

Link 수업 듣는 중에 아래 질문과 같이 동일한 문제가 발생했는데요 (상품 클릭 시, 링크 변경은 되는데 페이지 이동이 안되는 현상) https://www.inflearn.com/questions/645148/link-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B4%80%EB%A0%A8%EC%A7%88%EB%AC%B8 질문 확인하고 <React.StrictMode> 을 제거하기 전에는 상품카드를 클릭했을때 url만 변경되고 페이지가 새로고침되지 않았습니다. <React.StrictMode> 제거해야지만 클릭시 url변경 + 페이지 새로고침까지 되었습니다 강의와 동일하게 작성하였는데 왜 <React.StrictMode> 제거 후 문제가 해결된걸까요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
tdragy 댓글 1 좋아요 0 조회수 222

[필독] D,E 강의 설명 중 필수 이론 04 가상 클래스 질문

해결됨

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

안녕하세요 선생님, 저는 spot 메뉴에서 ' | ' 바의 역할이 단어 칸 나누기라고 생각해서 지금까지 키보드 위에 있는 저 바를 html 에 입력하고 a태그로 메뉴를 구성했었거든요, 필독 사항 강의 에서도 반드시 필요한 것은 아니고, 코드 간결을 위해서 사용한다고 말씀해주셨는데, | 부분을 실무에서 코사용할 때 after를 사용하나요? 키보드에 있는 걸 쓰는 것을 쌤은 비추를 하시는지 궁금해서 질문 드립니다..!

  • HTML/CSS
  • jquery
  • 웹-디자인
띵가 댓글 1 좋아요 2 조회수 206

어떤 경우 cascade 를 적용해도 되는지 이해가 되지 않습니다.

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예 [질문 내용] 스프링 cascade 활용도 측면에서 궁금한 것이 있습니다. 영한님 - 인프런 (inflearn.com) 이 질문을 남겼었던 수강생입니다! 잠깐 상황을 요약하면 Program 과 Review 그리고 User 가 다대 1 1대 다 로 묶여 있는 상황입니다. program 에서 program.addReview 메서드를 활용하기 위해 cascade type 을 적용하였었습니다. 하지만 영한 님은 이부분의 코드는 별로 좋은 코드가 아니다! cascade 옵션 질문 - 인프런 (inflearn.com) 를 참고해서 보아라. 라고 하셨습니다. 위 질문의 요약은 강의에서 Order 는 OrderItem 을 개인 소유 하나, Order 와 Delivery 는 Delivery 가 여러 곳에서 참조할 수 있으므로 개인 소유 하지 않는다. 라고 읽었습니다. 참조 하는 것과 Cascade Type .all 이 무슨 관계가 있는지 모르겠습니다. 6줄요약하면: Delivery 와 Review 는 여러 곳에서 참조할 수 있으므로 CascadeType all 을 붙이지 말라고 하신 것 같은데 여러 곳에서 참조가능성이 있으면 CascadeType all 을 왜 붙이지 말아야 하는지 궁금합니다. 단순히 계속 코드를 보며 추적해야 하는 것 때문인가요?? 이 부분이 와닿지 않습니다. 혹시 실제 예를 들어 설명해주실수 있나요??

  • java
  • jpa
dionisos198 댓글 2 좋아요 0 조회수 463

슬라이드가 이상하게 넘어갑니다

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<div class="content-inner"> <div class="slide"> <div class="slide-items"> <a href="#none" class="slide-item"><img src="images/slide-01.jpg" alt="slide 01"></a> <a href="#none" class="slide-item"><img src="images/slide-02.jpg" alt="slide 02"></a> <a href="#none" class="slide-item"><img src="images/slide-03.jpg" alt="slide 03"></a> </div> </div> .slide-items { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-item { position: absolute; top: 0; left: 0; width: 3600px; font-size: 0; } setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}); $('.slide-item:first-child').appendTo('.slide-items'); }); }, 3500); 제 컴퓨터가 이상한 건지는 모르겠는데 코드 확인 해봐도 도저히 다른 곳이 없는데 뭐가 문제일까요ㅠㅠ 사진이 툭툭 끊기면서 넘어가요

  • HTML/CSS
  • jquery
  • 웹-디자인
현빈 댓글 1 좋아요 1 조회수 250

javascript 자동완성 안됨

미해결

코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

vscode에서 html은 자동완성이 되는데 javascript 자동완성이 안됩니다. 해결방법이 있나요?

  • HTML/CSS
  • javascript
  • python
  • django
  • bootstrap
  • linux
  • git
  • jquery
mori 댓글 1 좋아요 0 조회수 1723

sticky 추가 css 코드 누락

미해결

구글 애드센스 수익형 워드프레스 블로그 만들기

올려주신 드라이브 파일에서 sticky 관련 파일은 찾을 수가 없는데 누락된건가요? 제가 못찾은거라면 어느부분에 작성되어 있는 지 알 수 있을까요? +추가) 밑줄 없애는 css 코드도 따로 없는것 같은데 확인 부탁드립니다..!

  • HTML/CSS
  • wordpress
  • php
  • 웹-디자인
  • 반응형-웹
kscr37 댓글 1 좋아요 0 조회수 374

파일

해결됨

구글 애드센스 수익형 워드프레스 블로그 만들기

강의에 대한 질문은 인프런 질문하기나 1:1 카카오톡 플러스 친구에서 문의하셔도 가능합니다. (카카오톡 플러스친구 주소 http://pf.kakao.com/_ckMyxj/chat ) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요 글 가져오기 파일.xml은 어디서 다운 받을 수 있나요? 이런 파일들도 하나하나 다 요청해야지 받을 수 있는건가요?

  • HTML/CSS
  • wordpress
  • php
  • 웹-디자인
  • 반응형-웹
kscr37 댓글 1 좋아요 0 조회수 334

단축키자료

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

단축키 자료 올려주신건 비쥬얼스튜디오에도 똑같이 적용이 가능한 부분인가요? 시험전 준비영상도 봤는데 그 영상에서 말씀하신 단축키만 바꾸면 똑같이 써도 되는건지 궁금해서요. ■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.

  • HTML/CSS
  • jquery
  • 웹-디자인
VIVIDAKE 댓글 1 좋아요 1 조회수 167

3.2버전 gradle 설정에 대한 문제

해결됨

실전! Querydsl

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 여기에 질문 내용을 남겨주세요. 이게 현재 프로젝트 이고 plugins { id 'java' id 'org.springframework.boot' version '3.2.3' id 'io.spring.dependency-management' version '1.1.4' 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' developmentOnly 'org.springframework.boot:spring-boot-devtools' runtimeOnly 'com.mysql:mysql-connector-j' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'com.github.gavlyukovskiy:p6spy-spring-boot-starter:1.9.0' //test 롬복 사용 testCompileOnly 'org.projectlombok:lombok' testAnnotationProcessor 'org.projectlombok:lombok' //Querydsl 추가 implementation 'com.querydsl:querydsl-jpa:5.1.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt:5.1.0:jakarta" annotationProcessor "jakarta.annotation:jakarta.annotation-api" annotationProcessor "jakarta.persistence:jakarta.persistence-api" } tasks.named('test') { useJUnitPlatform() } clean { delete file('src/main/generated') } //querydsl 추가 시작 def querydslDir = file('build/generated/querydsl') querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java.srcDir querydslDir } configurations { querydsl.extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations.querydsl } 현재 gradle설정인데 Querydsl 설정과 검증 부분에서 막혔어요 클린해서 q파일 지우고 테스트 코드 런하면 아래 에러가 나타나고 error: Attempt to recreate a file for type study.querydsl.entity.QHello 이후에 q파일이 생성 된 후에는 error: Could not find class file for 'study.querydsl.entity.Hello'. 에러가 반복되네요.. https://www.inflearn.com/questions/1086099 다른분들 설정파일 따라해도 안됩니다..

  • java
  • jpa
먼산 댓글 2 좋아요 3 조회수 2671

2024년 html

해결됨

[코드캠프] 시작은 프리캠프

2024년에 html이 새로 바뀌었다는 얘기를 들었는데 이 강의를 들어도 되나요?

  • HTML/CSS
  • javascript
김서연 댓글 1 좋아요 0 조회수 251

장바구니페이지 관련 질문입니다.

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

수강신청 장바구니 화면에서 항목중 1개라도 선택이 해제되면 전체선택체크박스의 체크도 풀려야 하는거 아닌가요? 어떤 스크립트를 추가해야 적용이 되나요?

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
a2m_designer 댓글 1 좋아요 1 조회수 307

고급 선택자 2탄에서 질문이 있습니다.

미해결

입문자를 위한, HTML&CSS 웹 개발 입문

안녕하세요! 고급 선택자 2탄 영상의 대략 8분 경에서 [data-tooltip]이 relative가 되서 absolute인 [data-tooltip]:hover::after가 저기에 붙었다고 하셨는데, absolute는 부모 요소 중에 static이 아닌 요소에 붙지 않나요? 그러면 :hover::after처럼 의사요소는 붙은 요소의 자손으로 들어가는 걸까요? [data-toolip]과 [data-toolip]:hover::after이 동일 선상에 위치(형제 요소)처럼 보이는데 어떻게 그럴 수 있는지 궁금합니다!

  • HTML/CSS
dopal0426 댓글 1 좋아요 0 조회수 290

네비 세로형 질문

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

서브메뉴가 슬라이드 뒤로 숨고 서브메뉴 배경이 꽉 차는 게 아니라 약간의 여백이 생기는데 왜일까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header-logo"></a> </div> <div class="navi"> <!-- navigation --> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> </ul> </div> </header> <!-- header --> <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> <!-- slide --> <div class="items"> <!-- news --> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> <a href="#none">asisaisdoijsdas <b>2020</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> </div> </div> </div> <!-- news --> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner-01"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <!-- items --> @charset "UTF-8"; body { margin: 0; font-size: 15px; background-color: #fff; color: #222328; display: flex; justify-content: center; } a { color: #222328; text-decoration: none; } .container { border: 1px solid black; width: 1200px; } header { display: flex; justify-content: space-between; } header > div { height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide > div { border: 1px solid black; height: 300px; } .items { display: flex; } .items > div { border: 1px solid black; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* news */ .tab-inner { width: 97%; margin: auto; } .tab-inner .btn {} .tab-inner .btn a{ border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ccc; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .tab-inner .btn a.active { background-color: #fff; } .tabs {} .tabs div { border: 1px solid black; height: 155px; padding: 0 10px; box-sizing: border-box; } .tabs .tab1 {} .tabs .tab1 a { display: block; border-bottom: 1px solid black; padding: 5px } .tabs .tab1 a:last-child { border-bottom: none; } .tabs .tab1 a b{ float: right; font-weight: normal; } .tab2 { display: none; text-align: center; } .tab2 img { width: 120px; padding-top: 20px; } /* slide modal */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-items { position: absolute; font-size: 0; } /* navi */ .menu { list-style: none; padding: 0; margin-top: 30px; display: flex; } .menu li { float: left; width: 150px; box-sizing: border-box; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 3px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { padding: 3px; border: 1px solid #000; background-color: #fff; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: #000; color: #fff; } // slide setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}); $('.slide-item:first-child').appendTo('.slide-items'); }); }, 3500) // news $('.btn > a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn > a: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 () }) // navi $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().fadeIn() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().fadeOut() }) 제이쿼리 부분이 좀 줄이 엉켰는데 양해 부탁드립니다...

  • HTML/CSS
  • jquery
  • 웹-디자인
현빈 댓글 2 좋아요 1 조회수 251

[모던웹페이지 만들기9](1:40)class-desc 카드부분관련

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

안녕하세요. 쉽고 자세한 설명해주셔서 즐겁게 잘 듣고 있습니다. 여기까지는 잘 따라왔는데요. 실행시 화면상에 약간의 차이가 있는 부분이 생겨서 문의드립니다. class-container 부분을 하고 있는데요. 코드는 강사님 내용이랑 동일한데 화면상에서 보이는 카드화면 부분이 제 화면에서는 좁게 나와서요. [강사님화면] [제 화면] 혹시나 코드가 뭐라도 다른 가 해서 전체적으로 살펴보았고, 또 혹시나 해서 강사님 강의자료 ( 05_roadmap_section ) 의 index.html로 golive로 구동을 해보았습니다만. 동일하게 좁은 상태인데... .class-card 폭은 240px 고정이고요. .class-card { width : 240px; /* 요런 건 사이즈를 픽스하는 게 좋다 */ /* box-shadow: 블럭에 그림자를 적용하는 CSS 기능 https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2); border-radius: 8px; margin: 0 10px; } 개발자 모드로 확인시에도 폭이 240px 이고... 혹시 pc의 해상도에 따라서 다른 걸까요?? 이걸 확인을 어떻게 해야 할 지 모르겠습니다. ㅡㅡ;

  • HTML/CSS
  • javascript
  • es6
류재안 댓글 2 좋아요 0 조회수 269

px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?

미해결

CSS Flex와 Grid 제대로 익히기

백엔드 지망생입니다. 개인프로젝트 겸 기본적인 css 지식은 있어야 할 것 같아서 하고 공부하고 있는데, 아직 px와 em rem을 언제 어떻게 써야 할지 잘 모르겠네요.. px em rem의 개념은 잘 알고 있지만 강사님꼐서 어떤 상황에선 px을 쓰시고 em을 쓰시고 rem을 쓰시는데 초보자 입장에서 잘 와닿지 않네요.. 3:42초에 search-form input[type='search']에만 보더라도 한 클래스 안에 3개의 px em rem이 써 있는데 이런 감각적인 것을 어떻게 연습하면 좋을까요? 레이아웃 크기 지정도 그렇지만 또 font크기도 px em rem을 따로 쓰던데 이것도 감을 못잡겟네요..

  • HTML/CSS
  • flex
댓글 2 좋아요 0 조회수 547

부트스트랩, css

미해결

스프링과 JPA 기반 웹 애플리케이션 개발

프로젝트를 받아서 실행시켜보니 이런 메시지가 뜨면서 css가 적용되지 않은것을 확인 했습니다. 해결해 보기 위해서 링크도 추가해보고 했지만 여전히 바뀌지가 않네요 이럴경우는 어떻게 해야할까요..?

  • java
  • spring
  • spring-boot
  • jpa
  • thymeleaf
최정식 댓글 2 좋아요 0 조회수 373

슬라이드가 바뀌는 모션은 보이는데 사진이 안바뀝니다

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

뚝뚝 끊기기만 하고 사진은 아예 안바껴요.. 모션만 보이고 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header-logo"></a> </div> <div class="navi"></div> </header> <!-- header --> <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> <!-- slide --> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner-01"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <!-- items --> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns-01"></a> <a href="#none"><img src="images/sns-02.png" alt="sns-02"></a> <a href="#none"><img src="images/sns-03.png" alt="sns-03"></a> </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; font-size: 15px; background-color: #fff; color: #222328; display: flex; justify-content: center; } a { color: #222328; text-decoration: none; } .container { border: 1px solid black; width: 1200px; } header { display: flex; justify-content: space-between; } header > div { height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide > div { border: 1px solid black; height: 300px; } .items { display: flex; } .items > div { border: 1px solid black; height: 200px; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* 모듈 외 컨텐트 */ .header-logo { line-height: 130px; } .footer-logo { line-height: 130px; } .copyright { text-align: center; padding-top: 30px; } .sns { line-height: 130px; text-align: center; } /* slide modal */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide-items { position: absolute; font-size: 0; } // slide setInterval(function(){ $('.slide-items').animate({top: '-300px'}, function(){ $('.slide-items').css({top: 0}); $('slide-item:first-child').appendTo('.slide-items'); }); }, 3500) 좌우로 넘어가는 거 했을 때도 똑같은 현상이 나타났는데 뭐가 문제일까요..ㅜㅠㅠ

  • HTML/CSS
  • jquery
  • 웹-디자인
댓글 1 좋아요 1 조회수 210

ReactDOM.render .createRoot 질문 드립니다.

미해결

처음 만난 리액트(React)

ReactDOM.render( <React.StrictMode> <CommentList /> </React.StrictMode>, document.getElementById('root') ) 위 내용대로 npm start해서 띄우면 React 18버전부터는 React.createRoot를 사용하라고 나오네요. .render대신에 .createRoot로 사용하면 될까여? 만약 .createRoot로 사용시 예제 간단히 알려주시면 감사하겠습니다.

  • HTML/CSS
  • javascript
  • react
Minkoo Lee 댓글 2 좋아요 1 조회수 569

강의를 보고 똑같이 코드를 쳤는데 a태그가 밑으로 떨어집니다 ㅠㅠ

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

■ 공지사항,갤러리가 별도로 구성되어있는 강의를 듣고있는데 news 클래스 아래로 a태그가 떨어집니다 ㅠㅠ 혹시 잘못된 부분이 있는걸까요? <body> <section class="items"> <article class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none"> 문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> </div> </div> </article> <article class="gallery">갤러리</article> <article class="now">바로가기</article> </section> </body> <css> * { padding: 0; margin: 0; position: relative;} a { color: inherit; text-decoration: none; display: inline-block;} ul,li,ol { list-style: none;} /*와이어프레임정렬*/ .items { border: 3px solid blue; max-width: 1200px; margin: 0 auto; display: flex; } .items div { height: 200px; } .news { width: 350px; background-color: lightblue;} .news .tab-inner { border: 5px solid salmon; } .news .tab a { border: 3px solid slateblue; } .gallery { width: 500px; background-color: coral;} .now { width: 350px; background-color: lightseagreen;} /*tab content*/ -출력화면-

  • HTML/CSS
  • jquery
  • 웹-디자인
dusal 댓글 1 좋아요 1 조회수 211

반복문 문제3 369게임

미해결

자바스크립트 : 기초부터 실전까지 올인원

1부터 50까지 369결과 프린트인데 왜 숫자 2인데 박수 짝치죠?

  • HTML/CSS
  • javascript
­김연성 댓글 1 좋아요 0 조회수 494

인기 태그

인프런 TOP Writers

주간 인기글