inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

부트스트랩 + *.css 함께 사용하는 이유와 분리 기준이 궁금합니다.

미해결

부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기

안녕하세요. 현재 강의 중 프로젝트 1 단계를 진행중에 궁금점이 생겨 질문 드립니다. index.html 파일 디자인에 부트스트랩 만으로 작업 하지 않고 순수 css 를 함께 이용하시는데요. 분류 원칙이 따로 있으신가요? 예를 들면 section 요소에 배경이미지는 *. css 파일에 position : relative, position : absolute 처리도 *.css 에서 처리를 하시네요.

  • HTML/CSS
  • javascript
  • bootstrap
  • 웹-디자인
엔지개그 댓글 2 좋아요 0 조회수 360

Custom Hook에 관해 질문이 있습니다!

해결됨

처음 만난 리액트(React)

안녕하세요. 소플님. Custom Hook에 대해서 질문이 있어 글을 남깁니다. import {useState, useEffect} from 'react'; // 커스텀 훅 function useUserStatus(userId){ const [isOnline, setIsOnline] = useState(null); useEffect(() =>{ function handleStatusChange(status){ setIsOnline(status.isOnline); } ServerAPI.subscribeUserStatus(userId, handleStatusChange); return () =>{ ServerAPI.unsubscribeUserStatus(userId, handleStatusChange); } }); return isOnline; } function UserStatus(props){ // 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용 const isOnline = useUserStatus(props.user.id); if (isOnline == null) return "대기중..."; return isOnline ? '온라인' : '오프라인'; } function UserListItems(props){ // 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용 const isOnline = useUserStatus(props.user.id); return ( <li style={{color: isOnline ? 'green':'black'}} > {props.user.name} </li> ); } 위 방식은 강의 내용대로 중복된 로직을 추출하여 Custom Hook을 만들고 함수 컴포넌트 내에서 호출하여 사용하는 방식입니다. 강의 내에서 " 여러 개의 컴포넌트에서 하나의 공통된 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다." 라고 말씀하셨는데 Custom Hook도 본질은 JS함수이기에 함수의 선언의 parameter와 사용의 argument는 다른 것과 같기 때문으로 이해해도 될까요? 좋은 리액트 강의 감사합니다. 꼭 완강하겠습니다!

  • HTML/CSS
  • javascript
  • react
이지민 댓글 2 좋아요 2 조회수 230

제 느낌대로 레이아웃을 짜봤는데 이렇게 해도 되는건가요 ?

미해결

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/레이아웃css/02_레이아웃가로100.css" /> </head> <body> <div class="container"> <div class="header-container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="slide-container"> <div class="slide"> <div></div> </div> </div> <div class="items-container"> <div class="items"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> </div> <div class="footer-container"> <footer> <div class="footer-logo"></div> <div class="footer-box"> <div class="footer-navi"></div> <div class="copyright"></div> </div> </footer> </div> </div> </body> </html> -------------------------------------------- .container { } .header-container { border: 1px solid red; } header { margin: auto; border: 1px solid black; height: 100px; width: 1200px; } header > div { border: 1px solid black; height: 100px; box-sizing: border-box; } .header-logo { width: 200px; float: left; } .navi { width: 1000px; float: right; } .slide-container { } .slide { border: 1px solid black; margin: auto; width: 1200px; height: 300px; } .items-container { overflow: hidden; } .items { border: 1px solid black; width: 1200px; margin: auto; } .items > div { border: 1px solid black; width: 400px; height: 200px; float: left; box-sizing: border-box; } .footer-container { border: 1px solid red; } footer { overflow: hidden; border: 1px solid black; width: 1200px; margin: auto; } footer > div { border: 1px solid black; height: 100px; box-sizing: border-box; } .footer-logo { width: 200px; float: left; } .footer-box { width: 1000px; float: right; } .footer-box > div { height: 50px; border: 1px solid black; } 이런식으로 짜도 상관없는건지 물어보고싶습니당.

  • HTML/CSS
  • jquery
  • 웹-디자인
밀꾸 댓글 2 좋아요 2 조회수 203

content-inner는 왜필요한건가요 ??

미해결

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

감이 좀 잘 안잡히는데.. contentinner를 없애고 해도 레이아웃이 잘 나와서,,,,

  • HTML/CSS
  • jquery
  • 웹-디자인
밀꾸 댓글 1 좋아요 2 조회수 179

바인딩 시점에 대한 질문입니다

미해결

처음 만난 리액트(React)

위 소스에서 질문입니다. 생성자에서 this.handleClick 에 값을 대입할때 handleClick 함수가 정의되지않은 상태인데 어떻게 접근하는건지 궁금합니다 !

  • HTML/CSS
  • javascript
  • react
SUNYOUNG JUNG 댓글 1 좋아요 1 조회수 163

html style 속성 질문입니다!

미해결

[웹 개발 풀스택 코스] HTML&CSS 기초

style 속성 강좌 11:41 초 별도의 .css 파일로 만들어서 사용하는 것을 external style 이 문장이 주석으로 지정된 거 같은데 라이브 채널에 왜 표기되는 지 궁금합니다!

  • HTML/CSS
영균 한 댓글 1 좋아요 0 조회수 210

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

미해결

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

square에다가 포지션 absolute를 주고 수직중앙 수평중앙으로하려고했더니 span이 중앙이아닌 우측하단으로 취우쳐져있고 transform으로 수직중앙 시키고 키프레임 애니메이션으로 돌릴려고하니,, transform이 중첩되어있어서 또 걸리네요. flex를 꼭 사용해야할까요 ?

  • HTML/CSS
  • jquery
밀꾸 댓글 1 좋아요 1 조회수 197

안녕하세요. 질문있어서 조심스레 글을 올려봅니다.

미해결

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

page-scroll-effect를 맨 상단 비주얼부분에만 적용하고 나머지 section 들은 높이값을 갖도록 하고싶은대요. 혹시 알수 있을까요? 말주변이 없어서 아래 이미지를 그렸습니다. ㅠㅠ

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

3d 뒤집기 추가효과

미해결

인터랙티브 웹 개발 제대로 시작하기

지금 카드를 3d로 뒤집는데 그냥 뒤집히는게아니라 카드의 뒷면이 무엇인지 왼쪽아래나 왼쪽면부터 조금씩 뒤집어지는 느낌으로 뒤집기 위해선 animation3에서 이미지를 나눠서 보여준것처럼 효과를 줘야할까요? 그냥 카드가 3d로 휙 뒤집히는게 아닌 책장넘길때처럼 구현하고싶은데 뒷면을 확인할때 긴장감을 주기위해서 혹시 어떤 방법이 있을까요?

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
mirage0720 댓글 1 좋아요 0 조회수 265

active 관련 질문

미해결

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

폰트어썸으로 라디오버튼과 체크박스를 커스텀 하는 강의에서, checked 가상클래스는 input[type=checkbox] 에 적용하였으나 (체크박스를 누르는 것이므로 active 또한 input[type=checkbox]에 적용하면 자연스럽다고 생각하여서)active는 label에 적용한 이유를 모르겠습니다.

  • HTML/CSS
  • jquery
lees8351 댓글 2 좋아요 1 조회수 192

단축키 질문입니다!

미해결

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

Typography(2)-글자 서식 및 색상 강의 5:59에서 문장을 드래그 하고 어떤 단축키를 누르셔서 태그로 감싸셨더라구요. 해당 단축키가 무엇인지 혹시 알수 있을까요?

  • HTML/CSS
  • 반응형-웹
  • tailwind-css
  • 단축키
  • vcs
박종민 댓글 1 좋아요 1 조회수 254

다운로드한 교재랑 강의 교재가 달라서 너무 불편하네요.

미해결

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

다운로드한 교재 순서대로 진도 나가는 것도 아니라서 매번 교재 어디인지 찾는 것도 불편하고 막상 없는 자료를 찾다 보니 짜증 납니다. 강의 중에 사용 중인 PPT도 올려주시면 좋겠습니다.

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

임폴트가 안됩니다

미해결

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

import React from 'react'; import Counter from './components/Counter'; // Counter 컴포넌트의 경로를 정확히 입력 function App() { return ( <> <Counter /> </> ); } export default App; 이런 오류가 뜹니다 버전이 달라서일까요? 노드는 최신버전을 쓰고있습니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
코딩의외로 댓글 1 좋아요 0 조회수 205

checked 가상클래스에서 transform 속성을 사용할 때 관련 질문입니다.

미해결

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

'확장선택자 실전 퍼블리싱 5' 강의에서 .heading .text1 을 translateY 로 위치를 이동시켰을 때의 경우 다른 라디오 버튼을 눌렀을 때 이동했던 .text1 이 원래 위치로 돌아가는 모션이 보였는데, 이 강의에서 h1을 이동시켰을 경우에는 이동했던 h1이 이동한 위치에 그대로 머물러 있는 이유를 모르겠습니다.

  • HTML/CSS
  • jquery
lees8351 댓글 1 좋아요 1 조회수 169

부모요소에 자식요소가 겹쳐지는데 이유가 뭔가요?

미해결

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

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <script src="jquery-3.7.1.min.js"></script> <title></title> <style> <!-- .parent{ position:relative; width:800px; height:800px; border: 1px solid #ddd; } .child{ position:absolute; /*수직수평중앙 시작*/ left:50%; top:50%; transform:translate(-50%,-50%); /*수직수평중앙 끝*/ background-color:skyblue; width:100px; height:100px; } --> .parent{ position:relative; width:600px; height:300px; border: 5px solid red; } .child{ position:absolute; top:100%; left:100%; background-color:skyblue; width:150px; height:100px; } </style> </head> <body> <!-- <div class="parent"> <div class="child"></div> </div> --> <div class="parent"> <div class="child"></div> </div> </body> </html>

  • HTML/CSS
  • jquery
mmeekk 댓글 1 좋아요 1 조회수 144

컴포넌트 합성과 추출에서 props에 관해 질문이 있습니다!

미해결

처음 만난 리액트(React)

안녕하세요. 소플님. 강의 정말 잘 듣고 있습니다. 컴포넌트 합성과 추출에서 props에 관련하여 질문이 있어 질문을 드립니다. // Component 추출 전 function Comment(props){ return ( <div className = "comment"> <div className = "user-info"> <img className = "avatar" src = {props.author.avatarUrl}, alt = {props.author.name} /> <div className = "user-info-name"> {props.author.name} </div> </div> <div className = "comment-text"> {props.text} </div> <div className = "comment-date"> {formatDate(props.date)} </div> </div> ); } 첫 코드가 Component를 추출하기 전의 코드이고 /* Component 추출 후 */ // 1. Avatar Component 추출 function Avatar(props){ return( <img className = "avatar" src = {props.user.avatarUrl}, alt = {props.user.name} {/* 재사용성을 측면을 높이기 위해 보편적인 단어인 user를 사용 */} /> ); } // 2. UserInfoName Component 추출 function UserInfoName(props){ return( <div className = "user-info-name"> {props.user.name} </div> ); } // 3. UserInfo 추출하기 function UserInfo(props){ return( <div className = "user-info"> {/* 이미 추출한 Avatar Component도 적용 */} <Avatar user = {props.user} /> {/* 이미 추출한 UserInfoName Component도 적용 */} <UserInfoName user = {props.user}/> </div> ); } // 4. CommentText 추출하기 function CommentText(props){ return( <div className = "comment-text"> {props.text} </div> ); } // 5. CommentDate 추출하기 function CommentDate(props){ return( <div className = "comment-date"> {formatDate(props.date)} </div> ); } // 6. 추출한 Component들로 Comment 재합성 function Comment(props){ return( <div className = "comment"> <UserInfo user = {props.user}/> <CommentText text = {props.text}/> <CommentDate date = {props.date}/> </div> ); } 이 코드가 강의에서 작성해주신 코드를 제 나름대로 완성한 컴포넌트를 추출한 형태입니다. userData가 아래의 형태라고 가정하겠습니다. const commentData = { user: { avatarUrl: "https://example.com/avatar.jpg", // 아바타 이미지 URL name: "Soaple" // 사용자 이름 }, text: "안녕 리액트!", date: new Date() // 댓글 작성 날짜 }; 처음 Comment Component에 Props로는 CommentData 자체가 전달될 것이고, 그 다음 UserInfo의 props로는 props.user, 여기서는 아래의 commentData.user가 전달이 되는 것까지는 논리적 흐름대로 이해를 했습니다. // UserInfo가 받은 props(commentData.user) user: { avatarUrl: "https://example.com/avatar.jpg", name: "Soaple" } 그런데 Avatar의 props로는 props.user가 전달되어야 하는데 그렇게 되면 Avatar에 전달하는 props가 commentData.user.user가 되어 전달할 수 없지 않나요? UserInfoName도 commentData.user.user 가 되어 이상하다는 생각이 드는데... chatGPT나 뤼튼과 AI에 물어봐도 이상이 없는 정상 코드라는 답변을 받았습니다. React에서 props가 굉장히 중요하다고 강조하신 만큼 이 부분은 꼭 집고 넘어가야겠다는 생각이 듭니다. 답변 부탁드립니다!

  • HTML/CSS
  • javascript
  • react
이지민 댓글 1 좋아요 1 조회수 211

강의 내용 pdf가 제공되나요?

미해결

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

강의 내용 pdf가 제공되나요?

  • HTML/CSS
  • javascript
  • jquery
munsoi 댓글 1 좋아요 1 조회수 206

활성화 중인 scss 하나만 css 로 컴파일 가능할까요?

미해결

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

동일한 폴더 내에 있는 파일 중 style.scss만 css로 컴파일 하고 싶습니다 하단의 Watch Sass 클릭하여 컴파일 진행시 style.scss 뿐 아니라 common.scss도 동시에 css로 컴파일 되어 방법을 찾다 문의 남깁니다 하나의 파일만 컴파일 가능한지 궁금합니다

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
design_team 댓글 2 좋아요 1 조회수 364

강의에서 알려주신 Properties for the flex container 복습 사이트, 검색 발견되어서 공유드립니다~

미해결

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

- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다) - 이외의 문의등은 평생강의이므로 양해를 부탁드립니다 - 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다 - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강의 영상에서 알려주신 사이트인데, 자료에서는 서비스 종료로 유사 사이트 안내 되어 있었어요. 제가 궁금해서 구글에서 'properties for the flex container' 로 검색해서 이미지탭에서 발견하여서 링크 공유드립니다. https://codepen.io/osublake/pen/dMLQJr 항상 좋은 자료 제공해주시는 강사님 감사합니다~~

  • HTML/CSS
  • javascript
  • es6
박수연 댓글 1 좋아요 0 조회수 191

slick slider 이미지 개수

미해결

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

slick slider 로 slideToShow: 4로 해도 화면에는 이미지가 하나 밖에 안떠요 ㅠㅠ 전체 코드 복사해서 올리겠습니다..!

  • HTML/CSS
  • jquery
jm_0512 댓글 4 좋아요 1 조회수 289

인기 태그

인프런 TOP Writers

주간 인기글