inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

검색어 입력 관련

미해결

실습으로 끝장내는 웹 크롤링과 웹 페이지 자동화 & 실전 활용

연습삼아 나라장터의 상단 부분에 셀레니움을 통해 특정 검색어를 입력 후 검색을 실행 하려합니다 관련하여, 해당페이지 접속 후 단순히 find.element를 통해 driver.find_element( By.ID ,"AKCKwd").sendkeys("검색어") 와같이 사용할 수는 없는 것 인지요?

  • beautifulsoup
  • python
  • 웹-크롤링
  • selenium
SANGYUN LEE 댓글 3 좋아요 1 조회수 546

광고상품 외 표기 문의드립니다.

미해결

[신규 개정판] 이것이 진짜 크롤링이다 - 실전편 (인공지능 수익화)

안녕하세요. 답변 감사드립니다. 전체 코드를 첨부하여 다시 문의글 작성하였습니다. 쿠팡 광고상품과 로켓상품도 표기하고자 합니다. if len( link.select (".ad-badge-text")) > 0: print("광고상품") 를 아래와 같이 수정하면 될까요? 해봤는데 아무표기가 안되서요. if len( link.select ("span.badge rocket")) > 0: print("로켓상품") 그리고 광고상품 로켓상품 둘다 표현하고자 하면 아래와 같이 표기하면 될까요? if len( link.select (".ad-badge-text")) > 0: print("광고상품") elif len( link.select ("span.badge rocket")) > 0: print("로켓상품") 광고상품은 광고상품이라고 잘 표기가 되는게 로켓상품은 전혀 결과가 나오지 않아서요.

  • python
  • 웹-크롤링
suki 댓글 2 좋아요 2 조회수 449

4. 벤더프리픽스

미해결

견고한 기본기 HTML&CSS

관리 화면에서 ‘ Autoprefixer: Format On Save’ 설정에 체크합니다. 이제 파일을 저장하면 Autoprefixer가 작동하며 자동으로 벤더프리픽스를 여러분의 코드에 추가합니다. 그리고 하단의 ‘ setting.json에서 편집 ’ 버튼을 눌러 setting.json 편집화면으로 이동합니다. 이때, setting.json 편집화면이 영상에 나오는 코딩과 다른데 그냥 작성해주신 아래 코드를 넣으면 괜찮을까요? "autoprefixer.options": { "browsers": [ "last 4 versions", /* 가장 최신 버전에서 4단계 아래 버전까지 지원합니다. */ "ie >= 9", /* IE9 버전 이상만 지원합니다. */ "> 5%" /* 전 세계 브라우저 사용률 중 5% 를 초과하는 브라우저만 대응합니다. */ ] }

  • HTML/CSS
3pkwon 댓글 1 좋아요 0 조회수 491

업로드 후 홈화면에서 이미지가 보이지 않습니다

미해결

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

데이터 베이스에도 기록이 잘 들어가고 사이트 홈화면에도 잘 뜨는데 화면의 이미지가 안뜹니다. uploads파일에도 이미지 다 잘 들어갑니다. 인강과 데이터베이스를 비교해봤을 때 경로문제인것같긴한데 어떻게 수정을 해야할까요? 근데 DB경로의 역슬래시를 슬래시로 바꾸어도 안뜨고 uploads에는 사진도 잘 들어가고 사진의 경로를 봤을때도 동일해서... 왜 안뜨는걸까요? 단순히 한사진의 오류라고생각했었는데 등록한 것 모두 이렇게 되어서... 어딜 어떻게 수정해야할지모르겠어서... 일단은 깃허브링크 함께올려봅니다... 홈사이트 화면 개발자 툴 상품넣고 난뒤 DB데이터 베이스 물건 등록 후 vscode에 뜨는것 깃허브 링크: https://github.com/Dalrae03/webstudy/commit/7a5981dafabdbf009b40c0c5814e7e7c6f3ea9de https://github.com/Dalrae03/webstudy/commit/c9106654b1d6badba9ae64ce744a11da46b719a5

  • html/css
  • 머신러닝 배워볼래요?
  • express
  • node.js
  • react-native
  • react-native
  • tensorflow
  • 머신러닝
  • react
  • HTML/CSS
  • nodejs
  • javascript
Yoo Seung Hwan 댓글 1 좋아요 0 조회수 602

일정시간마다 자동으로 데이터를 생성하는 코드를 짜려고 합니다.

해결됨

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

외부 api 에서 ajax를 통해 데이터를 받아오고, 받아온 데이터를 카피해서 mysql 에 삽입하고자 합니다. 일정시간마다 반복하는 것은 setInterval 을 활용하면 되는것까지는 구글링을 통해 알아냈는데 본 강의에서는 데이터 생성을 postman 을 사용해 수동으로 데이터를 입력하고 전송하셔서 코드 상으로는 어떻게 구현해야 할지 궁금해서 여쭤봅니다! 1줄요약! postman을 통해 했던 데이터 삽입을 코드로 하는 방법이 궁금합니다!

  • HTML/CSS
  • rest-api
  • git
  • aws
  • javascript
  • github
  • mysql
전예준 댓글 1 좋아요 0 조회수 512

섹션 4 -> 그리디 , 결정문제 질문

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

안녕하세요! 강의 정말 잘 듣고 있습니다. 섹션 4를 풀다가, 어떤 문제를 그리디를 쓰고, 어떤문제를 결정알고리즘을 써야하는지 감이 잡히지 않아서 질문 드립니다. 답변해주시면 정말 감사하겠습니다!

  • 코딩-테스트
  • 코테 준비 같이 해요!
  • python
깨위 댓글 1 좋아요 0 조회수 268

image 파일에서 vscode로 드래그 앤 드롭을 처리할 수 없다고 합니다

미해결

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

압축을 푼뒤 진행해도 에러가 납니다 The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.라고 나오고요 hexeditor를 깔아도 해결이 안됩니다 찾아보니 50mb를 넘는 자료를 vs코드에서 지원을 못한다고 하는데요 참고로 집에 컴퓨터가 없어 pc방 컴퓨터로 배우는 중입니다

  • html/css
  • javascript
  • tensorflow
  • node.js
  • HTML/CSS
  • nodejs
  • react-native
  • 머신러닝
  • react
  • 머신러닝 배워볼래요?
  • express
tostarmk 댓글 1 좋아요 0 조회수 1037

선생님 익스는 사라지지 않았나요?

미해결

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

선생님 익스플로러는 사라지지 않았나요? 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기6 이번 강의 들어야 되는지.. 헷갈리네요. 오직 익스 호환성을 위한거라면.. 그냥 스킵해도 되나요?

  • html/css
  • es6
  • javascript
  • HTML/CSS
소희 댓글 1 좋아요 0 조회수 460

유튜브 썸네일 따는 과정에서 오류가 생겨요 숏츠는 다른 방법이 있나요?

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

유튜브 숏츠의 썸네일을 사용하려고 합니다 인포윈도우 가공하기 단계에서 똑같이 하는데도 섬네일이 오류표시가 나요ㅜㅜ 숏츠는 방법이 다른건가요?

  • html/css
  • rest-api
  • mysql
  • HTML/CSS
  • github
  • aws
  • javascript
  • git
박선희 댓글 1 좋아요 0 조회수 846

Contact 설정 관련해서 질문이 있어요

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

제가 html, css 등 까지 수강하고 배포 등 다음 과정으로 넘어가려고 하는데 Contact를 활용하는 강의를 못 본거 같아서요 혹시 제가 놓친 부분이 있을까요? 감사합니다..!

  • html/css
  • HTML/CSS
  • rest-api
  • github
  • aws
  • git
  • javascript
  • mysql
박선희 댓글 1 좋아요 0 조회수 330

auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.

미해결

CSS Flex와 Grid 제대로 익히기

Q1: auto-fill 에 대해 질문드립니다. <Grid #3 강의의 4:30초> 에서 셀이 2개 있고, grid-template-columns에 minmax(200px, auto)가 설정되어 있으며 auto-fill이 적용되어 있을때 grid-template-columns: repeat(auto-fill, minmax(200px, auto)) 전체 Grid Container의 넓이가 500px 일때에, 셀의 column 길이가 200px 이상이 되어지게 됩니다. 제가 알기로는 minmax(최솟값, auto) 라면 셀의 길이가 최솟값 보다 커지려면 셀이 가지는 컨텐츠의 길이가 최솟값보다 커야된다고 알고 있는데요. 그런데 왜 auto-fill이 설정되어 있을때에는 컨텐츠의 column 길이가 200px 보다 작은데 왜 Grid Container의 넓이 만큼 늘어나는 것인가요? 이것이 auto-fill을 적용하여 Grid의 기본 성질인 꽉 차게 늘어나는 성질때문에 그런가요? Q2 auto-fill 적용불가에 대해 질문드립니다. 저의 브라우저에서 테스트 해본결과, auto-fill이 적용이 되지 않는 부분은 셀이 2개가 있고, column의 길이가 minmax(200px, auto) 이며, auto-fill을 사용하고, Grid Container의 넓이가 600px 초과 된다면, 셀이 가지는 column의 길이가 원래는 Grid Container의 길이만큼 꽉차게 늘어나다가 200px이 가질 수 있는 크기를 넘어서게 되니 꽉차지 않게 되는 것 같습니다. 위의 질문과 동일한 것같습니다만, 자동으로 늘어나는 것은 400px (200px 셀 2개) 의 크기보다 Grid Container의 길이에서 뺀것의 크기가 200px 이상이라면 자동으로 늘어나는 것이 중단되고, 200px 이하라면 늘어나는 것이 되는 것인데, 왜 200px 이하라면 늘어나는 것입니까? Grid Container의 넓이를 200px으로 나눌때 나머지가 200px 보다 작다면 그냥 Grid의 성질에 의해 늘어나는 것인가요? Flex만 사용하던 사람이라 minmax의 대한 성질과 auto-fill을 공부하니 약간 했갈리네요...

  • html/css
  • flex
  • HTML/CSS
  • flex
chebread 댓글 1 좋아요 0 조회수 585

이 문제에서 궁금한게있습니다.

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

ch[i] != 0라서 if문을 탐색하지않는다면 L에 해당하는 dfs함수는 뭘 반환하는건가요?? 반환하는게 안보일때는 return이 생략됐다고 생각하는건가요?

  • python
  • 코딩-테스트
  • 코테 준비 같이 해요!
코딩코딩코딩코 댓글 1 좋아요 0 조회수 355

upload 페이지에 아무것도 안 뜨는 현상

미해결

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

안녕하세요. 그랩님 매일 같이 열정적으로 댓글 달아주셔서 항상 감사드립니다. 모든 것이 그러하듯 강의를 운영하는 것도 엄청난 공수가 든다는 것을 깨달았네요. 현재 오류가 생겼는데, useHistory를 이용해서 upload 페이지로 이동한 후 Upload 클라이언트 쪽에서 아무 반응도 일어나지 않고 있습니다. 아무리 코드랑 구글링을 해봐도 해결이 안되는데요. upload페이지가 console창을 보면 /upload/index.js의 html 코드가 아무것도 불러와지지 않고 있는 것 같아요. 혹시 조언좀 구할 수 있을까요? 1. 현상 : 클라이언트에 아무것도 뜨지 않음 Elements 창을 클릭해도 upload.js 작성한 HTML이 없습니다. 2.App.js에 제가 작성한 코드입니다. History와 import 란에 모두 정확하게 작성하였는데요. 3. upload/index.js 파일 코드도 같이 첨부드립니다. 한번만 봐주실 수 있을까요? ㅠ useHistory가 만료가 되어서 작동을 안 하는걸까요.. https://github.com/promotionX/Grabmarket-clinet

  • html/css
  • react
  • HTML/CSS
  • node.js
  • nodejs
  • tensorflow
  • 머신러닝 배워볼래요?
  • 머신러닝
  • react-native
  • express
  • javascript
promotion 댓글 1 좋아요 0 조회수 460

flex-grow IE 질문드립니다.

미해결

CSS Flex와 Grid 제대로 익히기

안녕하세요 선생님. 강의에서 menu-item에 길이를 width 혹은 flex-grow를 넣을 수 있는데 인터넷 익스플로어 때문에 width를 사용하셨는데 caniuse에서 확인하면 IE 버전10이상부터는 flex-grow를 지원하는게 맞을까요? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>CSS Flex</title> <link rel="stylesheet" href="default.css" /> <!-- <link rel="stylesheet" href="ui.css" /> --> <style> .menu { display: flex; } .menu-item { width: 25%; /* flex-grow: 1; */ background: gold; } .menu-item:hover { width: 35%; /* flex-grow: 1.5; */ background: crimson; transition: all 0.5s ease-in-out; } .menu-link { display: block; /* 클릭하는 버튼 영역을 키우기 위해서 */ padding: 1em; font-size: 1.2rem; font-weight: bold; color: #555; text-decoration: none; text-align: center; } .menu-link:hover { color: #ffffff; } </style> </head> <body> <ul class="menu"> <li class="menu-item"> <a href="#" class="menu-link">Home</a> </li> <li class="menu-item"> <a href="#" class="menu-link">About</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Product</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Contact</a> </li> </ul> </body> </html>

  • html/css
  • flex
  • HTML/CSS
박종규 댓글 2 좋아요 0 조회수 655

로그인 폼을 만들고 로컬 스토리지에 jwt저장하기 강의에서 질문입니다!

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

import React, { useState } from "react"; import { Card, Button, Form, Input, notification } from "antd"; import { useHistory } from "react-router-dom"; import Axios from "axios"; import { SmileOutlined, FrownOutlined } from "@ant-design/icons"; import useLocalStorage from "utils/useLocalStorage"; export default function Login() { const history = useHistory(); const [jwtAccessToken, setJwtAccessToken] = useLocalStorage( "jwtAccessToken", "" ); console.log("loaded Token: ", jwtAccessToken); // 왜 이게 두번이나 출력되는 것이지? const onFinish = (values) => { async function fn() { const { username, password } = values; const data = { username, password }; try { //응답을 꼭 받아야 한다. 토큰을 받아야 하니까 const response = await Axios.post( "http://127.0.0.1:8000/accounts/token/", data, { headers: { "Content-Type": "application/json" } } ); // const { data: token } = response; 이런 방식은 아래랑 다르다 response에서 data을 꺼내서 이름을 token이라 짓는 것 // const token = response.data 와 일치하며 밑에 녀석은 // const jwtAccessToken = response.data.access 과 일치한다 const { data: { access: jwtAccessToken }, } = response; setJwtAccessToken(jwtAccessToken); notification.open({ message: "로그인 성공!", icon: <SmileOutlined style={{ color: "#108ee9" }} />, }); // history.push("/accounts/login"); //TODO: 이동주소 } catch (error) { console.log(error); if (error.response) { notification.open({ message: "로그인 실패!", icon: <FrownOutlined style={{ color: "#ff3333" }} />, description: "아이디/암호를 확인해 주세요.", onClick: () => { console.log("Notification Clicked!"); }, }); } } } fn(); }; return ( <Card title="login"> <Form labelCol={{ span: 8 }} //부트스트랩은 한 행이 12 컬럼인데 antd는 24컬럼임 wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} onFinish={onFinish} autoComplete="off" > <Form.Item label="Username" name="username" rules={[{ required: true, message: "Please input your username!" }]} //rules을 통해 유효성검사로직이 들어가 잇다 > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[ { required: true, message: "Please input your password!" }, { min: 5, message: "5자리 이상 해주세요" }, // 한글자 한글자 들어갈때마다 검사해준다. ]} > <Input.Password /> </Form.Item> {/* //8칸 이동하고 16칸을 쓰겠다 */} <Form.Item wrapperCol={{ offset: 8, span: 16 }}> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> </Card> ); } 안녕하세요 강사님!! 위에서 15번째 줄에 있는 console.log("loaded Token: ", jwtAccessToken); 이 부분이 페이지의 콘솔창에서 두번이나 나타납니다... 왜 그런지 알 수 있을까요?? 새로고침을 했을때도 두번 나타나고 submit을 했을 때도 2번 출력됩니다. 아 ! 그리고 simplejwt토큰을 사용중 입니다!

  • docker
  • django
  • python
  • react
꺼넝 댓글 1 좋아요 0 조회수 714

안녕하세요. 다른 풀이도 풀었는데 괜찮을까요?

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

정답은 제대로 나오긴 했는데 시간 초과라던가 하는 문제가 없을까요? 4중 for문은 생각지도 못했네요..ㅠㅠ sudoku = [list(map(int, input().split())) for _ in range(9)] def solution(sudoku): length = len(sudoku) a, b, c, = list(), list(), list() # 행열 검사 for i in range(length): row, col = list(), list() for j in range(length): row.append(sudoku[i][j]) col.append(sudoku[j][i]) if len(set(row)) != 9 or len(set(col)) != 9: return "NO" # 3x3 격자판 검사 a.extend(row[0:3]) b.extend(row[3:6]) c.extend(row[6:]) if i == 2 or i == 5 or i == 8: if len(set(a)) != 9 or len(set(b)) != 9 or len(set(c)) != 9: return "NO" a, b, c, = list(), list(), list() return "YES" print(solution(sudoku))

  • python
  • 코딩-테스트
  • 코테 준비 같이 해요!
HTCho1 댓글 1 좋아요 0 조회수 461

1068번: 트리

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

제가 다음과 같이 코드를 작성했는데, 100%까지 가다가 틀립니다.. 어떤게 문제일까요? 반례를 제시해주실 수 있나요? 감사합니다. https://www.acmicpc.net/problem/1068 import sys input = sys.stdin.readline n = int(input()) g = list(map(int, input().split())) m = int(input()) cnt = 0 def DFS(x): g[x] = -1 for i in range(n): if g[i] == x: DFS(i) DFS(m) for i in range(n): if g[i] != -1 and i not in g: cnt += 1 print(cnt)

  • python
  • 코딩-테스트
  • 코테 준비 같이 해요!
이도열 댓글 1 좋아요 1 조회수 377

search icon 오류

미해결

따라하며 배우는 HTML, CSS

선생님 저는 왜 서치 부분이 이렇게 되는 걸까요?

  • html/css
  • HTML/CSS
yh 댓글 1 좋아요 0 조회수 388

질문있습니다.

미해결

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

선생님 강의에서 테마를 변경 후 작업중입니다. 슬릭슬라이드를 적용 하였는데 마지막 사진의 위치가 내려갔습니다. 사진을 변경하여 작업을 해봐도 같은 현상이 발생합니다. <!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, initial-scale=1.0"> <title>다울건축사무소</title> <!--jquery--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <!--Slick slider--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" /> <!--Custom CSS & js --> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/resposive.css"> <script src="js/custom.js"></script> </head> <body> <div class="container"> <!--section : header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"> <img src="/images/logo.png"> </a> </div> <div class="gnb"> <a href="#none">ABOUT</a> <a href="#none">RPOJECTS</a> <a href="#none">NEWS</a> <a href="#none">CONTACT</a> </div> </div> </header> <!--section : home --> <section class="home"> <div class="home-inner"> <ul class="imgbox"> <li class="item-bg" style="background-image: url(/images/강원대농업생명과학대학개축설계제안공모\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울대학교문화관재건축공사현상설계.jpg)"> <div class="text-area"> <h3 class="eng">서울대학교 문화관 재건축공사 현상설계</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울출입국·외국인청\(설계공모안\).jpg)"> <div class="text-area"> <h3 class="eng">서울출입국·외국인청</h3> <p>(설계공모안)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/수성행복드림센터\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">수성행복드림센터</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화\ MTV\ 초중통합학교\(우수상\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 초중통합학교</h3> <p>(우수상)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화mtv지하주차장\ \(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 지하주차장</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/한수원새울본부복지관신축.jpg)"> <div class="text-area"> <h3 class="eng">한수원 새울본부 복지관 신축</h3> </div> </li> </ul> </div> </section> <section class="about"></section> <section class="award"></section> <footer></footer> </div> </body> </html> /*CSS*/ /* Web Font - Kanit */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap'); /* Web Font - S-CoreDream */ @font-face { font-family: 'S-CoreDream-3Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #333; } button, input { outline: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } ul, li { padding: 0; list-style: none; } /* Default CSS */ body { font-family: 'Kanit'; line-height: 1.7em; margin: 0; background-color: #fff; color: #333; } /*section - header*/ .header-inner { width: 1300px; margin: auto; padding-top: 20px; padding-bottom: 10px; overflow: hidden; } .logo { float: left; } .gnb { margin-top: 10px; float: right; } .gnb a { font-size: 20px; margin-left: 80px; } /*section - home*/ ul.imgbox { overflow: hidden; margin: 0; } .item-bg { display: inline-block; top: 0; background-size: cover; background-position: center; height: 100vh; } /*Custom JS*/ $(document).ready(function(){ $('.imgbox').slick({ infinite: true, dots: true, speed : 3000, autoplay: true, autoplaySpeed: 5000, swipe: true, arrows: false, fade : true, zIndex:50, pauseOnFocus: false, pauseOnHover: false, }); });

  • html/css
  • jquery
  • HTML/CSS
  • 반응형-웹
  • 반응형-웹
황재중 댓글 2 좋아요 2 조회수 687

Flex-grow가 적용되는 영역에 대해 질문드립니다.

미해결

CSS Flex와 Grid 제대로 익히기

혹시 Flex-direction: row이고, Flex-wrap이 Wrap으로 설정되어 있고, 아이템들은 width: 33.3333%의 크기를 가지며, Height들은 서로서로 다 다를때, Wrap되어 행이 2개가 생길때에 Flex-grow가 1로 Item들에 설정되어 있다면 모든 행의 높이가 가장 큰 높이에 맞춰지게 되는데요. https://blogpack.tistory.com/863 여기나 이 강의에서 학습한 대로 1행에서는 flex-grow의 이해가 쉽게 됬습니다. 그치만, 제가 언급한 지금 이 예처럼 2열이고 높이가 서로다른 3개의 아이템들일 경우에는 Flex-grow가 한 행의 영역에서 남은 여백을 참조하여 모든 높이를 최대까지 늘리는 것인가요? flex-grow 또는 flex-shrink가 적용되는 영역은 한 행이나 열에서 적용되나요? 각각의 Item들에 적용하는 속성이니 이해가 조금 어렵네요... 많은 조언 부탁드립니다.

  • flex
  • flex
  • HTML/CSS
chebread 댓글 1 좋아요 0 조회수 455

인기 태그

인프런 TOP Writers

주간 인기글