flex 질문 | 커리어리 현직자 Q&A

7달 전 · chrm 님의 새로운 답변

css flex, grid 질문

풀스택 웹개발자로 현재 공부중인데 레이아웃 관련해서 flex와 grid를 배우고 신세계를 알았습니다. 다만 우리나라에서는 아직도 float, absolute등으로 아직도 레이아웃을 많이 해서 배워도 안쓴다는 이야기를 들었는데 현업에 계신분들 정말인가요?

개발자

#css

답변 1

8달 전 · 전재욱 님의 질문 업데이트

css에서 % 단위

만약 어떤 요소의 width를 % 단위를 사용하면 부모 요소의 width를 기준으로 한 퍼센트 값이 적용되잖아요. 그런데 부모 요소가 width가 지정되어 있지 않고 하위 컴포넌트들을 감싸기만 해서 유동적인 width를 가지는 상황이고 부모의 부모 요소가 고정된 width를 가지는 상황이라면, 부모의 부모 요소의 width를 기준으로 퍼센트 값이 되는건가요? react와 tailwind를 사용한 예시로 다음과 같은 html 구조가 있다고 할 때, 저는 {item}을 감싸는 div의 width에서 %를 쓰면 <div className="flex items-center w-full gap-[30px]"> 요소의 width를 기준으로 될 줄 알았는데 <div className="w-full overflow-hidden"> 요소를 기준으로 한 값이 적용되는 거 같더라구요. 원래 css의 %단위가 무조건 직계 부모의 값을 기준으로 하는게 아니라 직계 부모의 값이 고정된 값이 아니면 더 상위의 부모들 중 고정 값인 요소를 기준으로 하게 되는 건가요?

개발자

#css

답변 0

10달 전 · 비니 님의 새로운 댓글

css flex 질문이요

사진처럼 왼쪽에 nav(메뉴)를 배치하고, 오른쪽에는 해당 메뉴에 대한 컴포넌트를 배치할 건데요 flex를 줘서 구현하려고 했어요. nav에는 너비를 지정하고, 오른쪽 컴포넌트는 너비를 100%로 했더니 왼쪽 nav가 줄어들더라고요.. nav는 정해진 너비(예를 들어 200px)를 유지하고 오른쪽 컴포넌트는 전체로 채우는 방법을 알려주세요.. ㅠㅠ

개발자

#프론트엔드

#css

#flex

#리액트

#화면개발

답변 1

일 년 전 · 영훈 님의 새로운 댓글

리액트 가로 스크롤

리액트에서 가로 스크롤을 구현할 때 flex에 overflow 스크롤로 지정 후 scrollbarWidth를 none으로 지정하면 작동이 잘됩니다. 그런데 서치해보니 마우스 이벤트를 받아와서 구현하던데 제가 놓치고 있는 부분이 있을까요.. 가로 스크롤 구현 시 따로 고려해야되는게 있는지 궁금합니다

개발자

#react

답변 1

일 년 전 · 우엉김밥 님의 질문

nextjs에서 랜더링 시점 바꾸기

안녕하세요! nextjs 프로젝트 진행중에 궁금증이 생겼습니다. 현재 Sidebar 컴포넌트에서 카카오맵이 불러와져야 작업을 할 수 있는 상태입니다. 카카오 맵은 children 에서 랜더링되기 때문에 아래와 같이 코드작성시, Sidebar 랜더링 시점에 kakao is not defined 라는 오류가 뜹니다. 혹시 Sidebar를 좀 늦게 랜더링 할 수 있을까요? export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={inter.className}> <div id="login-modal" /> <section className="flex h-screen"> <nav className=" h-full bg-slate-100"> <Sidebar /> </nav> {children} </section> </body> <Script src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${APIKEY}&libraries=services,clusterer`} strategy="beforeInteractive" /> </html> ); }

개발자

#nextjs

#reactjs

답변 0

일 년 전 · 민경배 님의 답변 업데이트

리액트 내비게이션 초기 데이터값 설정

import React, { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { TbArrowBigUpFilled } from "react-icons/tb"; import useScroll from "../utils/useScroll"; import useProductsQuery from "../useProductsQuery"; const Nav = () => { const { isNavFixed } = useScroll(); const [activeButton, setActiveButton] = useState(0); const handleButtonClick = (index) => { setActiveButton(index); }; const categoryNames = { materials: "소재별 품목", purposes: "용도별 품목", }; const [isScrollMenuVisible, setScrollMenuVisible] = useState(false); const handleMouseEnter = () => { setScrollMenuVisible(true); }; const handleMouseLeave = () => { // console.log("마우스 이탈"); setScrollMenuVisible(false); }; const location = useLocation(); const isloginorsignup = location.pathname === "/login" || location.pathname === "/signup"; const { isLoading, isError, errorMessage, materials, purposes } = useProductsQuery(); const [hoveredOnedepth, setHoveredOnedepth] = useState(null); const [onedepthChildren, setOnedepthChildren] = useState([]); const [hoveredDivision, setHoveredDivision] = useState(null); const [twodepthDivision, setTwodepthDivision] = useState([]); const handleOnedepthMouseEnter = (item) => { setHoveredOnedepth(item); // console.log(setHoveredOnedepth) setOnedepthChildren(item.children); }; const handletwodepthMouseEnter = (child) => { setHoveredDivision(child); // console.log(setTwodepthDivision); setTwodepthDivision(child.divisions); // console.log(child.divisions); }; if (isLoading) return <>로딩 중...</>; if (isError) return <>{errorMessage}</>; return ( <> {!isloginorsignup ? ( <> {/* 대메뉴 */} <nav id="nav" className={`nav ${isNavFixed ? "fixed" : ""}`}> <div className="nav_wrap"> <div className="twobutton_wrap"> {["materials", "purposes"].map((category, index) => ( <Link type="button" className={`twobutton ${ activeButton === index ? "active" : "" }`} key={index} onClick={() => handleButtonClick(index)} to={`/${category}`} > {categoryNames[category]} </Link> ))} </div> {/* 내비게이션 1depth */} <div className="scrollnav"> <ul className="materialnav" style={{ display: activeButton === 0 ? "flex" : "none", }} > {materials.map((material) => ( <li key={material.id} className="materialnav_li" onMouseEnter={() => { handleOnedepthMouseEnter(material); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{material.name}</Link> </li> ))} </ul> <ul className="usagenav" style={{ display: activeButton === 1 ? "flex" : "none", }} > {purposes.map((purpose) => ( <li key={purpose.id} className="usagenav_li" onMouseEnter={() => { handleOnedepthMouseEnter(purpose); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{purpose.name}</Link> </li> ))} </ul> </div> <div className="call_wrap"> <div className="call"> <div className="call_title">견적 상담 · 문의 대표전화</div> <div className="top_button"> <TbArrowBigUpFilled className="top_icon" /> <p>TOP</p> </div> </div> </div> </div> </nav> {/* 2&3depth 호버 메뉴 */} <div className={`scrollmenu ${isScrollMenuVisible ? "show" : ""} ${ isNavFixed ? "fixed" : "" }`} style={{ visibility: isScrollMenuVisible ? "visible" : "hidden" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {activeButton === 0 && ( <div className="scrollmenu_top"> <ul className="depth2_wrap"> {onedepthChildren.map((child) => ( <li key={child.id} className="depth2_menu" onMouseEnter={() => { handletwodepthMouseEnter(child); }} > <div className="depth2_menu_img_wrap"> <div className="depth2_menu_img"> <img src={child.images[0]._links.href} alt={child.name} /> </div> </div> <p>{child.name}</p> </li> ))} </ul> </div> )} <div className="scrollmenu_middle"> <div className="depth3_wrap"> {twodepthDivision.map((division) => ( <Link key={division.id} to="/" className="depth3_menu"> <span className="depth3_menu_img"> {/* images 속성이 없거나 비어 있어도 오류를 방지 */} {division.images && division.images.length > 0 && ( <img src={division.images[0]._links.href} alt={division.division_name} /> )} </span> <p>{division.division_name}</p> </Link> ))} </div> </div> <div className="scrollmenu_bottom"></div> </div> </> ) : null} </> ); }; export default Nav; 현재는 depth2_menu 호버해야만 depth3_menu가 보이는데 초기에 scrollmenu가 보일때부터 depth2_menu가 (onedepthChildren.map의 첫번째 순서의 데이터가) 호버되어있어 그에 매칭되는 division의 내용들이 depth3_menu에 보이게 할수있는 방법 있을까요 ?

개발자

#react

답변 1

일 년 전 · 정하승 님의 질문 업데이트

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

개발자

#react

답변 0

2년 전 · 이영준 님의 새로운 답변

리액트 컴포넌트 설계에 대해 질문이 있습니다.

현재 Dropdown 컴포넌트를 compound pattern을 접목하여 구현을 해보고있습니다. ChatRoomHeader 라는곳에있는 DotsIcon을 클릭하면 Dropdown이 랜더링되게끔 구현을 하였는데요. 각 메뉴 리스트들을 배열로 해서 map을 사용하여 렌더링해주고있습니다. 제가 생각하는 문제점은 Dropdown안에 있는 로직들이 뭔가 전혀 상관없는곳에서 정의하고 props로 내려주는것에대해서 약간 문제점이 있어보이는것같습니다.. 혹시 다른방법이 있을까요? 아니면 참고할만한 블로그 알려주시면 감사하겠습니다 (__) 'use client'; import Link from 'next/link'; import ArrowLeftIcon from '@/public/arrow-left.svg'; import FlexBox from '@/components/ui/FlexBox'; import DotsIcon from '@/public/tabler_dots.svg'; import Dropdown from '@/components/ui/Dropdown/Dropdown'; import Divider from '@/components/ui/Divider'; export default function ChatRoomHeader({ title }: { title: string }) { const copyToClipboard = async () => { try { await navigator.clipboard.writeText(window.location.href); alert('복사 성공'); } catch { alert('복사 실패'); } }; const CHAT_ROOM_OPTIONS = [ { name: '공지', }, { name: '사진', }, { name: '링크' }, { name: '공유하기', event: copyToClipboard }, { name: '채팅방 나가기' }, ]; return ( <FlexBox as="header" justify="between" align="center" className=" p-8 h-14 tablet:h-24 w-full gap-4 bg-white border-b-[1px]" > <FlexBox className="gap-1"> <Link href="/community"> <ArrowLeftIcon className="w-7 h-7" /> </Link> <p className="text-xl font-bold">{title}</p> </FlexBox> <Dropdown> <Dropdown.Trigger> <DotsIcon className="w-6 h-6 tablet:w-7 tablet:h-7" /> </Dropdown.Trigger> <Dropdown.Menu> <li className="block tablet:hidden"> <Dropdown.Item>인원</Dropdown.Item> <Dropdown.Item>스케줄</Dropdown.Item> <Divider type="horizontal" /> </li> {CHAT_ROOM_OPTIONS.map((option) => ( <Dropdown.Item key={option.name} event={option.event}> {option.name} </Dropdown.Item> ))} </Dropdown.Menu> </Dropdown> </FlexBox> ); }

개발자

#react

답변 3

추천해요 2

2년 전 · 엄홍재 님의 새로운 답변

Css width height

제가 모니터로 만들때는 전체 화면 채울려고 width 100vw height 100vh로 해서 배경을 검은색으로하면 정확히 채워지고 요소들도 flex로 가운데정렬이 잘되는데 노트북으로 하면 스크롤바가 생기고 요소들도 약간 치우쳐지네요 ㅠ 해결방안이없을까요?

개발자

#css

#react

답변 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

리액트 라우팅을 이렇게 하는게 맞는지 모르겠습니다..

안녕하세요 독학 하고 있는 학생입니다.. 작은 프로젝트로 혼자서 홈페이지를 만들고 있습니다. 우선 로그인 페이지부터 만들고 있는데, 로그인페이지에는 아이디찾기 비밀번호찾기 등등 많은 페이지가 들어가더라구요.. 그래서 리액트 라우터를 공부하고 적용시켰습니다. 코드는 아래와 같습니다. 이렇게 해도 제가 원하는대로 로그인페이지에서 아이디 찾기 페이지로 이동하고 하는 것은 맞는데 App.js에 이렇게 주저리주저리 원하는 것을 다 넣어두면 나중에 전체적으로 페이지를 완성시켰을 때 App.js에 너무 방대한 내용이 들어가지않나..? 싶더라구요.. 그래서 중첩된 라우트도 찾아서 공부했는데 크흡..암만해도 적용이 안됩니다.. 그래서 그냥 이대로 홈페이지를 계속 만들어도 되는지,,아니면 저의 고민을 해결할 방법이 중첩된 라우트가 맞는지 알고싶습니다.. 맞다면 다시 공부해야겠죠 ㅜ.. 답변부탁드립니다 (_ _) import "./App.css"; import { Route, Routes } from "react-router-dom"; import WigTemplate from "./components/wigtemplate"; import FindId from "./components/findId"; import FindPwd from "./components/findPwd"; import SignIn from "./components/signIn"; import NotFound from "./components/notFound"; function App() { return ( <Routes> <Route path="/" element={<WigTemplate />} /> <Route path="/findId" element={<FindId />} /> <Route path="/findPwd" element={<FindPwd />} /> <Route path="/signIn" element={<SignIn />} /> <Route path="*" element={<NotFound />} /> </Routes> ); } export default App; ---------------------------------------------------------- import React from "react"; import styled from "styled-components"; import WigLoginButton from "./wigLoginButton"; import WigHeader from "./wigHeader"; import WigInput from "./wigInput"; import WigFind from "./wigFind"; const WigTemplateContainer = styled.div` height: 100vh; display: flex; align-items: center; justify-content: center; `; const WigTemplateBlock = styled.div` width: 500px; height: 600px; background: #d0ebff; border-radius: 80px; `; function WigTemplate() { return ( <WigTemplateContainer> <WigTemplateBlock> <WigHeader></WigHeader> <WigInput></WigInput> <WigFind></WigFind> <WigLoginButton></WigLoginButton> </WigTemplateBlock> </WigTemplateContainer> ); } export default WigTemplate; ------------------------------------------------------- import React from "react"; import styled from "styled-components"; import { RxDividerVertical } from "react-icons/rx"; import { Link } from "react-router-dom"; const FindBlock = styled.div` display: flex; justify-content: center; `; const ABlock = styled(Link)` color: black; font-size: 0.9rem; text-decoration: none; `; function WigFind() { return ( <FindBlock> <ABlock to="/findId">아이디 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/findPwd">비밀번호 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/signIn">회원가입</ABlock> </FindBlock> ); } export default WigFind;

개발자

#react

답변 2

2년 전 · 커리어리 AI 봇 님의 새로운 답변

media query가 배포환경 mobile에선 작동을 안해요… ㅜㅜ

안녕하세요 ! Nextjs 를 이용해서 프로젝트를 진행하고있습니다 ! 개발중 크롬 개발자도구에서 모바일버전으로 했을땐 잘 동작하다가 배포환경에서 아이폰으로 접속했을때는 제대로 동작을 안하더라구요... // size.ts const MOBILE_PX = '768px' export const MOBILE_MODE = `(max-width: ${MOBILE_PX}) as const` // index.ts import {MOBILE_MODE} from '~~~' @media (${MOBILE_MODE}) { display:flex; flex-direction: column; } 예를 들어 이런형식으로 구성되어있는데 혹시 문제를 아시는 분 있을까요? ㅠㅠ 구글에 가장 많이나오는 글인 <meta name="viewport" ~~~ /> 태그는 예전에 삽입되어있구... 읽어주셔서 감사합니다 !

개발자

#css

#react

#nextjs

답변 2

2년 전 · 커리어리 AI 봇 님의 새로운 답변

styled-component을 사용할 때 많은 props는 어떻게 해결하시나요?

안녕하세요, 개인 프로젝트를 진행 중에 궁금한 점이 있어 현직의 선배님들께 여쭤보고 싶어 질문을 남깁니다! 현재 React 프로젝트에서 styled-components를 CSS-in-JS로 사용하고 있습니다. 하지만 styled-components를 사용하면서 많아지는 props로 인해 JSX의 복잡도가 높아지는 것 같아 고민이 생겼습니다. 개인 프로젝트에서 사용하고 있는 FlexContainer라는 Flex 스타일(정렬방향, 간격)을 적용하는 컴포넌트입니다. const FlexContainer = styled.div<FlexContainerProps>` display: flex; flex-direction: ${({ col }) => (col ? 'column' : 'row')}; gap: ${({ gap }) => gap && `${gap}rem`}; `; <FlexContainer> 컴포넌트를 '내부 컨텐츠 정렬'을 위해 확장한 <FlexContainerAlign>입니다. const FlexContainerAlign = styled( FlexContainer )<FlexContainerAlignProps>` justify-content: ${({ justifyContent }) => justifyContent}; align-items: ${({ alignItems }) => alignItems}; `; <FlexContainerAlign>을 확장하여 추가적인 style을 적용할 수 있는 <FlexContainerStyle>입니다. const FlexContainerStyle = styled( FlexContainerAlign )<FlexContainerStyleProps>` background-color: ${({ background }) => background && theme.colors.grey}; ${({ styles }) => styles && { ...styles }}; `; FlexContainerStyle 컴포넌트를 사용했을 때 아래처럼 많은 props로 인해 복잡해집니다. <FlexContainerStyle justifyContent="space-between" alignItems="center" background gap={1} styles={{ padding: '1rem 1.5rem', borderRadius: '0.5rem', }}></FlexContainerStyle> 혹시 styled-components를 실무에서 사용하실 때 많은 props를 깔끔하게 정리할 수 있는 팁이 있을까요?

개발자

#react

#styled-components

답변 3

추천해요 1

2년 전 · 김병훈 님의 새로운 답변

flex, grid 스타일 정렬을 맞추기 위해서 empty component를 사용하는건 안티패턴인가요 ?

flex, grid 등을 사용해 나열할 때 자리만 차지하기 위한 empty 컴포넌트를 만들어 쓰시기도 하나요?? 안티패턴 같긴 한데... 편하다고 생각해서 가끔 쓰거든요 다른 분들은 어떤지 궁금합니다.

개발자

#css

#flex

#grid

답변 3

2년 전 · 커리어리 AI 봇 님의 새로운 답변

모바일에서 레이아웃을 풀스크린으로 채우고 싶은데 자꾸 스크롤 바가 생깁니다.

안녕하세요! 화면 정가운데에 로그인폼을 넣으려 하고 있는데요, flex container를 만들고 사이즈는 width: 100vw; height: 100vh를 줘서 꽉 차게 만들었고요, justify-items: center; align-items: center; 로 폼을 가운데 정렬해줬습니다. 개발자 도구에서 responsive 로 봤을 때 화면 사이즈에 상관 없이 항상 중앙에 오는 것을 확인 했는데요.. 실제 기기에 띄워 보니 스크롤 바가 생기고 있습니다 ㅠㅠ 스크롤 바가 왜 생기는지 알려주실 선생님 계실까요?

개발자

#css

답변 2

2년 전 · 커리어리 AI 봇 님의 새로운 답변

flex-grow 스타일이 제대로 먹지 않는 것 같은데 이유 아시는 분 계실까요?

flex-grow를 쓰면 아이템이 화면에 꽉 차게 늘어나는 것으로 알고 있는데요. 아이템들의 사이즈가 동일하게 늘어나지 않는데 왜그런걸까요? 텍스트 길이에 따라 크기가 달라지는 것 같습니다.. 아이템의 개수가 2~3개로 가변적일 수 있어 컬럼을 쓰기엔 컬럼 개수를 지정해줄 수 없어 애매한 상황이에요.

개발자

#css

#flex

답변 1

2년 전 · 손정현 님의 답변 업데이트

페이지 레이아웃을 어떻게 해야할까요?

안녕하세요 질문드립니다 저는 그동안 사실 국비에서 백엔드 쪽을 배워서 프론트는 그냥 부트스트랩에서 제공하는 css 12 그리드로 작업했었거든요 좌우 여백 주고 싶으면 col-md-2, col-md-8, col-md-2 이런 식으로 나눠서요 그런데 프론트를 공부하려고 부트스트랩 css, js를 빼고 인프런 페이지를 만들어보고 있는데 사진처럼 좌우 고정 여백을 어떻게 줘야 하는지 잘 모르겠어요 이건 flex 로 하는건가요? 개발자 도구 보는데도 잘 이해가 안되네요 ㅠ 답변 부탁드려요!

개발자

#frontend

#flex

#플랙스

#layout

#페이지레이아웃

답변 2

추천해요 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

display:-webkit-box 왜 적용이 안될까요?

1. p태그에 말줄임css(display:-webkit-box 포함)를 적용했습니다만 적용이 되지 않고 overflow:hidden처리만 되더라구요... display:box 나 display:block를 적용하거나 display속성을 아예 지워버리면 나오는데 webkitbox가 먹히지 않는 이유가 있을까요? (개발자도구에는 찍힙니다) display:flex로 코드를 짜고 있는데 이것도 영향이 있을까요? 2. 그리고 css에서 display: box와 display: block 두 가지의 차이점이 무엇인가요?? html, css구조 같이 올릴게요! -webkit-box 적용이 안되는 이유 알려주세요 html구조 <section> <div> <div> <div> <div> <p></p> <span></span> </div> </div> </div> </div> </section> css구조(scss) @mixin shortening($line, $lineHeight){ overflow: hidden; text-overflow: ellipsis; @if($line == 1){ white-space: nowrap; }@else{ line-height: $lineHeight; max-height :$lineHeight * $line; -webkit-line-clamp: $line; -webkit-box-orient: vertical; display: -webkit-box; } } section { margin-bottom: 160px; div { div { display: flex; justify-content: space-between; div { width: 200px; div { p { margin: 20px 0 10px; font-size: 18px; color: $titleColor; @include shortening(2, 18px); } div { display: flex; justify-content: space-between; align-items: center; p { font-size: $subTextFont; color: #ff4e43; } span { //아이콘 font-size: 20px; color: #efd942; cursor: pointer; } } } } } } }

개발자

#css

#말줄임표

#display속성

답변 1

2년 전 · won 님의 새로운 답변

CSS flex로 레이아웃을 나눌때

중구난방처럼 박스들이 원하지 않는 위치에 배치되거나 원하는 위치로 레이아웃을 나누기가 쉽지가 않습니다ㅠㅠ 고수님들 혹시 꿀팁공유 가능하신가요??

개발자

#프론트엔드

답변 1