inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

scrolla 질문

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

안녕하세요, 강사님. 다름이 아니라 스크롤라 반복이 되지 않아서 질문 드립니다. 알려주신대로 펑션으로 스크롤라를 호출하고 인덱스 파일에 애니메이트도 선언했습니다만, 처음에만 애니메이션이 작동하고 스크롤을 내렸다 올릴 땐 작동하지 않습니다. 스크롤을 초기화 해야 되는걸까요? 챕터마다 넣어주신 캡쳐 파일에선 저랑 다른 부분을 찾기가 어려워 질문 남깁니다!

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
febisthe 댓글 2 좋아요 0 조회수 170

섹션 1 - 3강 화면이 안나오는것 같네요

미해결

Tailwind CSS로 만드는 멋진 웹 UI 스타일링

섹션 1 - [필독] CDN 사용법과 비주얼스튜디오코드에서 Tailwind CSS IntelliSense 세팅 강의 화면이 하얀색 배경화면만 나오고 수업내용은 안보이네요. 소리는 정상적으로 들립니다.

  • HTML/CSS
  • 반응형-웹
  • tailwindcss
google pen 댓글 2 좋아요 1 조회수 235

header gnb splitting 적용문제

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

안녕하세요. 오늘 처음 수업을 시작하면서 <header> <nav>영역에 splitting 적용을 해봤는데요. 해당 모션이 적용되지 않아 문의드립니다. 혹시나 싶어 codepen 예제만 따로 만들어봤는데 동일한 현상이 생기고 있어 제가 무엇을 잘못하고 있는지 알 수가 없습니다. 완성본을 따로 받아 볼 수 있을지도 문의드립니다.

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
yeri kim 댓글 3 좋아요 0 조회수 214

동영상 보는 웹페이지에 강의 web-book 보는 방법 알려주세요

해결됨

HTML5 CSS3 기초 & 반응형 웹 템플릿 만들기!

동영상 보이는 곳에서 Web-Book 어떻게 보나요? https://www.books.weniv.co.kr/로 가서 봐야 하나요? 동영상 강의 하는 웹페이지 어디선가 찾아 볼 수 있었으면 좋겠습니다. 제가 못 찾는 건지 모르겠지만.

  • HTML/CSS
  • 반응형-웹
박진섭 댓글 2 좋아요 1 조회수 190

clamp, min max를 활용한 강의도 있나요??

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

선생님 정말 너무 궁금해서 댓글씁니다. 저는 웹퍼블리셔입니다. 요즘들어 clamp(2px, 5.333vw, 2.3rem) 등등 min max도 저런식으로 작업하는 사이트들을 종종봅니다. 계산하기가 너무 어려운데 선생님도 저렇게 작업하시는 경우가 잇나요 보통 여백및 폰트사이즈 갭 넓이 높이를 전부다 clamp, 및 min max로 작업한 사이트들이 점점 많아 지고잇어요 저는 계산법을 도저히 이해하지못해서 멘탈이 나간상태인데 요즘 추세가 저런식으로 작업을 하나요? 댓글 꼭 부탁드립니다. 이론은 알고잇습니다. clamp는 최소값 기본값 최대값 이란것도 알고있구여 선생님도 저렇게 작업을 하시나요????

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
duddnd 댓글 1 좋아요 0 조회수 201

스텝7 분량은어느정도될까요?

해결됨

부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

갠적으로 앞으로 오픈할 강좌로드맵에 스텝7이 관심이가는데 (강의시간)분량이 어느정도될까요?

  • HTML/CSS
  • bootstrap
  • 웹-디자인
  • 반응형-웹
p.cdoomco 댓글 2 좋아요 0 조회수 182

SEO 강의 언제 나올까요?

해결됨

Flutter로 웹 서비스 개발하기 (1) - Responsive Web

seo 강의 인줄 알고 샀는데 아니였네욥.

  • flutter
  • aws
  • 반응형-웹
  • dart
Jutole Official 댓글 1 좋아요 1 조회수 234

애니메이션 시간차

해결됨

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

animation.css에서 강의대로 animate__fadeInLeftBig을 가져왔는데 첫 슬라이드는 자연스럽게 나옵니다. 두번째 슬라이드에서는 중간에 살짝 덜컹거리듯이 하며 나오는 문제와 next 버튼을 클릭했을 때 다음 화면을 넘어가게 되면 애니메이션 텍스트의 나타나는 시간과 이미지가 슬라이드되서 보여지는 시간 차이가 납니다. 혹시 animatin.css 에서 선언된 애니메이션 옵션이 변경 가능한지 궁금합니다.

  • HTML/CSS
  • bootstrap
  • 웹-디자인
  • 반응형-웹
허혜정 댓글 1 좋아요 0 조회수 220

완성본은 따로 없는건가요?

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

자료를 받으면 이미지랑 캡쳐본만 있는데 완성본은 없는건가요? cctv0820@naver.com 입니다.

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
박종호 댓글 1 좋아요 0 조회수 173

순수 CSS 선택자 중첩(Nesting) - 활용예제 (로그인폼)관련 질문있습니다.

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌3)

scss 작성하다가 궁금한 것이 있어 질문 남깁니다. scss를 작성할 때 띄어쓰기를 어떻게 해야할지 궁금합니다. 예를들어 .status { display: flex; justify-content: space-between; margin: 20px 0; & label { & input[type=checkbox] { display: none; +em { display: inline-block; width: 18px; height: 18px; background-image: url('images/icon-radio.png'); transform: translateY(4px); background-position: left; } &:checked+em { background-position: right; } &:checked+em+span { color: var(--mainColor); } } } & a:hover { text-decoration: underline; } } 선생님과 수업하면서 작성한 띄어쓰기 하지 않은코드인데요. 이쁘게 정렬하고 싶어서 alt + shift + f 를 눌러서 전체 정렬을 했더니 .status { display: flex; justify-content: space-between; margin: 20px 0; & label { & input[type=checkbox] { display: none; +em { display: inline-block; width: 18px; height: 18px; background-image: url('images/icon-radio.png'); transform: translateY(4px); background-position: left; } &:checked+em { background-position: right; } &:checked+em+span { color: var(--mainColor); } } } & a:hover { text-decoration: underline; } } 이렇게 자동으로 띄어쓰기게 되더라구요. 의미없는 띄어쓰기는 하지 않는게 좋다고 들었는데 띄어쓰기를 하지 않으면 scss nesting 특성상 괄호가 많아져서 알아보기 힘들고 비주얼 단축키로 정렬했을 때엔 알아서 띄어쓰게 해주는데, scss는 어떤식으로 코드를 작성해야할지 궁금합니다.

  • HTML/CSS
  • javascript
  • jquery
  • flex
  • 반응형-웹
gysutpflsy 댓글 2 좋아요 1 조회수 202

프로 다운어떻게 요청드리면 되나요?

해결됨

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

어디로 요청드리면 되나요?~

  • HTML/CSS
  • wordpress
  • php
  • 웹-디자인
  • 반응형-웹
박보름 댓글 2 좋아요 0 조회수 187

섹션7에서 막혔어요

해결됨

Flutter로 웹 서비스 개발하기 (1) - Responsive Web

강의 정주행 도중 섹션7에서 강의 내용이 이어지지 않아서 놀랬는데 이미 다른분이 해당 문의 올려주셨네요 내일까지 전체 강의 완주하는게 목표입니다. 말씀하신대로 오늘까지 꼭 좀 수정 부탁드립니다.

  • flutter
  • aws
  • 반응형-웹
  • dart
억새 댓글 3 좋아요 0 조회수 204

섹션4에 있는 4번째 강의 질문(스크롤링)

미해결

반응형 웹사이트 포트폴리오(Architecture Agency)

스크롤링 권장 스크립트 올려주신 부분으로 했는데 작동이 되지 않아 해결 방법 문의 드립니다. 권장 <script> /* Smooth Scrolling */ $('.menu a').click(function(e) { e.preventDefault(); $.scrollTo(0, 900); }); 문제: 이 스크립트 하기 전에는 menu a를 눌렀을 때 잘 이동했는데 해당 스크립트를 추가하면 작동이 되지 않습니다.. 그래서 일단 아래와 같이 html { scroll-behavior: smooth; } 해결했더니 다음 챕터에서 .gototop부분에서 같이 스크립트 작성해야 하는 부분이 있네요. 혹시 잘못된 부분이 있을까요? <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Archecture Agency</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page Scroll Effect JS& CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <!--FONTASOME CDN--> <script src="https://kit.fontawesome.com/c7f55332cf.js" crossorigin="anonymous"></script> </head> $(function(){ /* Trigger*/ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }); $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }); /* Change CSS with Scroll */ $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header').addClass('active') } else { $('header').removeClass('active') } }); /* Smooth Scrolling */ $('.menu a').click(function(e){ e.preventDefault(); $.scrollTo(0, 900); }); });

  • HTML/CSS
  • jquery
  • 웹-디자인
  • 반응형-웹
댓글 2 좋아요 1 조회수 181

섹션7에 portfolio_screen_dart에서 header와 footer가 붙는 현상 있습니다.

해결됨

Flutter로 웹 서비스 개발하기 (1) - Responsive Web

강의에서는, Container를 OverflowBox 위젯으로 감싸고, 또 그걸 SizedBox위젯으로 감싸라고 하셨습니다. 하지만, header와 footer가 붙는 현상이 생깁니다. OverflowBox와 SizedBox 위젯을 remove하니 붙는 현상은 사라졌지만, 음영 선이 짧아졌습니다.

  • flutter
  • aws
  • 반응형-웹
  • dart
골든보이 GoldenBoy 댓글 2 좋아요 0 조회수 194

섹션 7, 포트폴리오 화면작업과 상세 화면 작업 사이에 강의가 한개 빠진것 같습니다. 확인부탁바래요.

해결됨

Flutter로 웹 서비스 개발하기 (1) - Responsive Web

포트폴리오 화면 작업 수업에서 포트폴리오 상세 화면 작업 수업로 바로 갔는데, onTap : () 부분이나 routePage.dart의 여러부분이 갑자기 추가되어 있어요.

  • flutter
  • aws
  • 반응형-웹
  • dart
골든보이 GoldenBoy 댓글 4 좋아요 0 조회수 264

ctrl+f 기능 관련해서

해결됨

Flutter로 웹 서비스 개발하기 (1) - Responsive Web

안녕하세요, 그래도 플러터 웹으로 만들면 괜찮을 것 같아서 강의 구매후에 문의드립니다. 혹시나, 만드신 웹 사이트에서는, ctrl+f 기능이 어느정도 되는 것 같습니다. 근데, 강의 하신 강의 github 올려주신 것을 클론해서, 단순하게 크롬에서 실행해보니 작동되지 않습니다. 혹시나, aws 환경에서는 작동을 하는 건가요? 아니면 새로운 library 기능이 사용이 된 것 일까요? 만약 사용이 되셨으면, flutter에서, js파일을, Index.html에 넣어서 검색기능을 구현하신 걸까요? 감사합니다!

  • flutter
  • aws
  • 반응형-웹
  • dart
Lee HI 댓글 2 좋아요 0 조회수 345

SSL설정하는 부분이 안보입니다.

해결됨

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

Security 부분에 SSL 설정하는 부분이 안보이는데 바뀐건가요? 설정한적에 없는데 설정이 되어있기는 합니다.

  • HTML/CSS
  • wordpress
  • php
  • 웹-디자인
  • 반응형-웹
명우 댓글 2 좋아요 1 조회수 273

슬릭 슬라이더

미해결

반응형 웹사이트 포트폴리오(App Official Landing Website)

제가 슬릭 슬라이더 pc를 모바일로 바꾸려고 하는데요.. 제이쿼리에서 바꿀 방법 없을까요??? 아래 같이 추가햇는데 안먹어서 질문합니다 ㅠㅠ /* product */ $('.sales-presentation').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정 draggable : true, //드래그 가능 여부 responsive: [ // 반응형 웹 구현 옵션 { breakpoint: 960, //화면 사이즈 960px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:3 } }, { breakpoint: 768, //화면 사이즈 768px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:2 } } ] });

  • HTML/CSS
  • jquery
  • 반응형-웹
SH 댓글 2 좋아요 1 조회수 195

text가 border 밖에 형성되는 이유와 해결방법을 알고싶습니다

미해결

Tailwind CSS로 만드는 멋진 웹 UI 스타일링

안녕하세요 강의 재미있게 잘 듣고 있습니다 제가 궁금한 것은 예제 삼아 다른 코드를 테스트해보고 있는데 문제는 붙임 코드를 실행하면 4열로 형성된 카드 안에 더미 텍스트와 버튼들이 있어야 하는데 border 밖에 형성되어서 아무리 옵션을 바꿔도 변화가 없습니다 강사님의 명쾌한 해답을 듣고 싶어요 <div className="grid grid-cols-12 gap-6"> <div className="col-span-12 lg:col-span-6 xxxl:!col-span-3"> <div className="box border-t-[5px] border-t-danger dark:border-t-danger"> <div className="box-header"> <h5 className="font-semibold text-xl text-danger text-center">New Project <span className="font-normal text-xs text-gray-500 dark:text-white/70">(03)</span></h5> </div> <div className="box-body overflow-auto"> <div className="gap-4 grid" id="task-left"> <div ref={leftContainerRef} onMouseEnter={OnDivChange} className='firstdrag' id="new-tasks-draggable" data-view-btn="new-tasks"> <div className="box task-box"> <div className="box-body space-y-4"> <div className="flex"> <div className="flex space-x-3 rtl:space-x-reverse"> <img src={"../../assets/img/logos/4.png"} className="p-1 h-full avatar avatar-sm bg-gray-100 dark:bg-black/20 rounded-sm" alt="logo" /> <div className="my-auto hidden sm:block"> <h5 className="text-base font-semibold w-44 truncate">Zanex Laravel Project</h5> <p className="text-gray-500 dark:text-white/70 text-xs my-auto flex space-x-1 rtl:space-x-reverse"><i className="ri-calendar-line"></i><span>05-12-2022</span></p> </div> </div> <div className="ltr:ms-auto rtl:mr-auto hs-dropdown ti-dropdown [--placement:left-top]"> <Link aria-label="anchor" href="#!" scroll={false} className="hs-dropdown-toggle ti-dropdown-toggle hover:bg-transparent dark:hover:bg-transparent inline-flex !p-0 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border-0 font-medium text-gray-500 shadow-none align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 transition-all dark:text-white/70"> <i className="ri ri-more-2-line text-lg leading-none"></i> </Link> <div className="hs-dropdown-menu w-40 min-w-[10rem] mt-0 transition-none ti-dropdown-menu"> <Link className="ti-dropdown-item" href="#!" scroll={false} ><i className="ri-eye-line"></i>View</Link> <Link className="ti-dropdown-item" href="#!" scroll={false} ><i className="ri-edit-2-line"></i>Edit</Link> <Link className="task-remove ti-dropdown-item" href="#!" scroll={false} ><i className="ri-delete-bin-6-line"></i>Delete</Link> </div> </div> </div> <div> <p className="mb-2">Justo kasd duo sanctus et elitr et, sed diam clita lorem sed eirmod, clita labore tempor et sanctus et ipsum stet, eos.</p>

  • HTML/CSS
  • 반응형-웹
  • tailwind-css
fbhhk 댓글 1 좋아요 1 조회수 197

인기 태그

인프런 TOP Writers

주간 인기글