여러분의 회사에서는 어떤 CSS 라이브러리를 사용하시나요?

Q. 회사에서 어떤 CSS 라이브러리를 사용하고 계시며, 장점과 단점을 알려주실 수 있나요? Q. 반응형 웹사이트와 유지보수의 관점에서, 어느 css 라이브러리를 선택하는 것이 좋을까요? 회사에서 웹사이트를 개발 중인 신입 프론트엔드 개발자입니다. 기존에 Vue로 작성된 레거시 코드를 React로 마이그레이션하고 있습니다. 기존 코드의 스타일링은 css 파일을 import하는 방식으로 사용되었습니다. 이를 React로 변경했을 때, 클래스명이 중복되는 문제가 있어서, css-module을 사용하는 중입니다. (참고로 디자인은 정해져있는 상태입니다.) 앞으로 웹사이트를 반응형으로 제작해야하고, 기능을 추가해야합니다. 또 추후에 다른 사람이 코드를 보고 디자인을 수정해야하는 상황이 올 때, 쉽게 변경할 수 있게 만들고 싶습니다. 제가 익숙한 css 라이브러리는 Tailwind인데, 이 라이브러리는 클래스명이 복잡성이 있고, className이 길어질 수 있다는 단점 때문에, 일부 개발자들이 기피한다고 들었습니다. 제가 선택할 라이브러리를 앞으로도 회사에서 계속 사용하게 될 것 같은데, 어떤 것이 프로젝트 진행에 도움이 될 지, 혹시나 선택한 라이브러리가 걸림돌이 되진 않을지 불안합니다. 여기 계신 개발자분들은 어떤 css 라이브러리를 사용하고 계시며, 어떤 장점이 있나요?

overflow: hidden > position: fixed 가 iOS 에서 적용되지 않고 있습니다

부모 - overflow: hidden 자식 - position: fixed 이렇게 fixed해서 부모 overflow: hidden을 무시를 하려고 했는데 ios에서만 안먹히는데 혹시 방법 아시는 분 계신가요?

컴퓨터공학과 재학 중이지만 구체적인 진로 방향이 없어요

학교에서 파이썬을 배우고 있긴 한데 프론트엔드나 백엔드, ios 안드로이드 등등 다양한 분야 가운데 저와 맞는 파트를 찾아보고 싶은데 흔히 찍먹이라고 하는 것은 유튜브나 인프런 등으로 강의를 듣는 것을 말하는 것일까요?? 프론트엔드부터 배워보고 싶어서 인프런에서 무료강의 들어보려고 하는데 괜찮은가요?

포트폴리오 클론토딩도 괜찮을까요?

웹퍼블리셔를 준비하고 있습니다 자체제작 포트폴리오 1개가 있고 두번째 포폴을 만들려고 하는데 디자인 구상하는게 힘들어서 클론코딩을 해볼까하는데 클론코딩도 포트폴리오로 제출해도 괜찮은가요? 클론코딩은 연습으로만 하고 포트폴리오는 자체제작으로만 하는게 좋을까요?

MUI 같은 css component library를 현업에서도 쓰나요?

안녕하세요. 현재 FE교육을 받고 있는 학생입니다! 오늘 학원에서 MUI 사용법을 배웠는데 간편하게 css를 사용할 수 있더라고요. 그런데 사용하면서 마음 한 켠에 웬지 모를 죄책감 같은 게 들었습니다. 저번에 FE개발자라면 Bootstrap은 지양하는 것이 좋다 라는 말을 들은 적이 있어서 더욱 혼동이 오는 거 같습니다..! 선배 개발자 여러분 현업에서 css 컴포넌트 라이브러리 같은 걸 사용하는지 또 저와 같은 교육생이 사용해도 도움이 될 지 조언 부탁드립니다!

페이지 열었을 때 css transition

페이지 열었을 때 css transition을 주려면 js에서 window.onload() 시 바꾸는 방법뿐인가요? 다른 방법 알고 계시는 분이 있다면 도와주세요 ㅠ

특정 섹션 호버 이벤트 처리하려고 하는데 css 와 javascript 중 무엇을 사용할지 고민중입니다.

특정 섹션에 호버하면 하위태그인 버튼이 나타나는 기능을 구현하고 있는데요. css 선택자를 이용하는 방법이 좋을까요, 자바스크립트로 조절하는 게 좋을까요? 저는 전자의 방법으로 구현했는데 어떤게 더 괜찮은 방법일까 궁금해서 여쭤봅니당 css 는 `display;none` 사용했어요.

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" ~~~ /> 태그는 예전에 삽입되어있구... 읽어주셔서 감사합니다 !

닫힌 질문 | 님들 저 프론트개발자 독학중인데 질문 좀요!

완전 프로그래밍 초짜입니다.. 코딩애플님 자바스크립트 강의듣고있는데 html,css 기본지식이 필요하더라구요 html,css 먼저 공부할까요??

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

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

로컬 스토리지에 저장한 값이 CSS 에 제대로 적용되지 않는 문제가 있습니다

로컬 스토리지에 'nightMode'라는 키로 true/false 값을 사용하여 야간 모드를 구현하려고 합니다. 그런데 문제는 로컬 스토리지에서 'nightMode' 값이 false로 설정되어 있을 때 페이지를 새로 고침하면, CSS 스타일이 야간 모드로 표시됩니다. false로 설정된 경우에는 야간 모드가 적용되지 않은 CSS 스타일로 페이지가 표시되어야 하는데 말이죠..... 토글 버튼을 클릭하여 야간 모드와 주간 모드를 전환하는 건 정상적으로 작동합니다. 하지만 로컬 스토리지의 'nightMode' 값이 false로 설정된 상태에서 페이지를 새로 고침하면, 로컬 스토리지에는 'nightMode' 값이 false임에도 불구하고, 페이지 CSS는 야간 모드로 표시됩니다. 뭐가 문제일까요?

CSS만으로 innerheight 값을 자동으로 구하게는 안되나요?

인덱스 페이지를 새로고침하면 css 적용하기 이전 버전이 보입니다. 자바스크립트로 dom을 조작했더니 HTML 렌더 전이 보여서요... reflow 전에 로딩을 보여주고 싶은 건데, 좋은 방법이 없을까요? 이렇게 저렇게 해보다가 해결을 하긴 했는데 제가 한 방식이 취약한 방식이라서요.. (저는 쌩 html 태그에 <script>로 넣어줬습니다. next js 사용하고 있고 dangerouslysetinnerhtml 넣었어요!)

박스 사이징이 고정되어있는데 바꿀 수 없나요?

간절합니다 ㅠㅠ... Next.js(Typescript)와 TailwindCSS를 활용하여 웹사이트를 만들고 있었는데 처음이라 미숙해서인지 아직 실수가 많습니다. 저기 붉은색 박스와 파란색 박스가 화면에서 100%로 되었으면 하는데 지금 계속 화면 크기를 줄이면 저 현상이 일어납니다... 아직 초보라 많이 미숙한데 해결 방법이 있나요?

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

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

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

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

css에서 sass를 사용하면 각 요소를 컴포넌트화 하기 힘든가요?

안녕하세요, 회사에서 퍼블리싱 하시는 분이 sass로 작업을 하시는데 sass는 각 요소가 컴포넌트화가 힘든건가요?? 모든 요소가 최상단 컨테이너에 종속되어 있어서 컴포넌트 재사용이 아예 안되네요.. 부트스트랩처럼 컴포넌트화가 되는지 궁금합니다..

컴포넌트 중간에 구분을 ">" 이런식의 경계를 넣는 방법이 궁금합니다.

사진 예시처럼 '>' 이런식의 구분선을 css 로 넣으려면 어떤 방법을 쓰시나요? 저는 clip-path: polygon 사용해서 5각형을 만들어서 보더를 주면 되려나 했는데 잘린부분에 보더가 적용이 안되더라구요...

고2 코딩입문자입니다

C언어로 입문한 고2 코딩꿈나무입니다 웹개발을 해서 취업하고싶은데 HTML CSS 자바스크립트 파이썬 중에 뭘먼저 시작해야할까요?

CSS 질문이 있습니다!

화면을 좌우로 2분할해서 각각 엘레먼트를 하나씩 렌더링하려고 하는데요, 이 때 style에 float:left, float: right 속성을 각 엘레먼트에 넣어주면 되나요? 적용을 해도 2분할이 안되어서요 ㅠㅠ

CSS 선언 순서가 궁금합니다!

보통 CSS 선언 순서 어떤 순서로 작성하시나요? 베스트 프렉티스가 있을까요?

바닐라JS 로그인폼 질문 드립니다.

최근 토이프로젝트겸 친구가 운영하는자영업 웹페이지를 제작하고있습니다. 회원가입기능과 예약기능을 설계하면서 여러 웹사이트를 참고하고자 둘러보았는데 대부분의 기업 (N사 G사등등)로그인버튼 클릭시 모달팝업이 노출되거나 별도의 로그인폼페이지가 로드되었습니다. 하나의 페이지에서 사용자의 입력을받아 로그인이나 회원가입기능을 수행할 수 있다고 생각되는데 위와같은 방법으로 하는 특별한 이유나 디자인패턴이 있는지 질문드립다.

CSS) 띄어쓰기 없이 긴 한글 텍스트의 오버플로우 문제

안녕하세요. 텍스트가 길어질 때 단어 단위로 줄바꿈을 해주고 싶습니다. CJK의 경우 word-break: keep-all; 을 쓰면 된다고 알고 있어서 적용해 봤는데 문제는 한글 텍스트가 띄어쓰기 없이 길~어질 경우에는 텍스트가 박스를 튀어나가는 오버플로우가 발생하더라고요.. word-break: break-all; 을 쓰면 오버플로우 문제는 해결되지만 가독성을 위해서는 단어 단위 줄바꿈이 좋다고 들어서요. 단어 단위 줄바꿈을 유지하면서, 띄어쓰기 없어도 오버플로우가 발생하지 않는 방법은 없을까요.?

react route css

react routes 경로중 특정 경로에만 적용하고 싶은 css가 있는 경우 어떻게 해야 하나요?? 현재는 index.css에 모든 routes경로의 스타일이 적용되어 있는 상태입니다. 특정 경로를 감싸난 css provider가 있을까요??

퍼블 고수분들 도와주세요

현재, 웹브라우저 기반 앱을 만들고 있습니다 각 페이지 마다 em(1em = 16px을 기준)으로 폰트 사이즈를 잡았는데 휴대폰 자체에서 글자 크기를 설정할 경우, 안드로이드 같은 경우에는 글자가 커지더라구요..! 이걸 막거나 대체할 방법이 있을까요? 반응형 땜에 em 을 썼는데 px을 쓰는 게 나을까요..?

아래 사진과 같은 GNB를 만들어야 합니다.

위쪽에 있는 메뉴에 마우스를 올리면 전체 메뉴가 드랍 되는 형태의 헤더 인데 위쪽 메뉴에 마우스를 올리면 텍스트 컬러와 밑줄이 생기고 그 상태가 유지 되면서 하위 메뉴를 컨트롤 해야 하는데 마우스 커서를 하위 메뉴 쪽으로 가져갔을때 위쪽 메뉴의 컬러와 밑줄을 어떻게 컨트롤 해야 할지 잘 몰라서 질문 드립니다.. 사진이 왜케 깨지는지 잘 모르겠네요 ..

웹 퍼블리싱 실무 교육 추천해주세요

현직 웹 개발자입니다. 프론트엔드 개발자를 지향하고 있으나 css를 잘 알지 못하여 퍼블리셔 없이는 프로젝트를 진행하지 못합니다. 이를 극복하기 위해 따로 웹 퍼블리싱 교육을 받아 관련 실무까지 직접 처리할 수 있는 수준이 되고 싶습니다. css는 물론이고, 구체적으론 아래와 같은 것들을 배우고 싶어요 - 디자인 시안으로부터 퍼블리싱 결과물을 만들어 개발자에게 전달하는 전체 과정 - 반응형 디자인 구축, 웹 표준, 웹 접근성 지켜가며 개발 - 페이지 단위가 아니라, react, vue에서 바로 사용할 수 있는 컴포넌트 단위로 만드는 법 - 퍼블리싱 작업 위한 프로젝트 개발 환경 구축, 작업 폴더 구조, BEM 등의 방법론 - 개발자, 디자이너, 기획자와 커뮤니케이션 하는 법 현직 퍼블리셔 분들은 경력 쌓기 전 어떻게 공부하셨으며 (주변 퍼블리셔분은 다 학원 교육으로 취업하셨다고 합니다) 추천할만한 방법이 있다면 아낌없이 조언해 주셨으면 합니다 다만 직장인이다보니 오프라인 교육인 경우 저녁, 주말에 가능한 곳이면 좋겠습니다.

필기앱 기술에대한 질문

안녕하세요 필기어플을 한번 만들어보고싶어서요 대학생인데 아직 2학년입니다. 필기앱을 만드는데있어서 일렉트론을 사용해서 윈도우앱형식으로 만들고싶은데 들어가는 기술들이 어떤것들이있을지 궁금해서요 필기인식이나 필기속도 이런것들을 어떻게 구현하는지 궁금합니다. 디자인은 html css 기능은 자바스크립트나 여러 라이브러리를 이용해볼까해요 아직 모르는게 많습니다 많이알려주시면 많이검색해보겠습니다!! (인공지능도 들어간다고하는거같은데.. 자세히설명해주시면 감사하겠습니다 ㅠㅠ)

보통 css작성하실때 보통 rem으로 많이 작성하나요?

px로 하다보니 화면 반응형 대응이 안되는거 같은데 현업에 계신 분들 중 px단위를 많이 쓰시는지 궁금합니다 px를 쓰시는 경우엔 반응형에서 대응을 어떻게 하는지도 궁금해요! ㅠ 상황 설명 추가) 이게 데스크탑에서의 비율이 맥북 13인치로 가면 스크롤이 생겨서 전체적인 비율은 rem으로 대응이 가능할거 같아서 도입하려는데 다른 곳에서도 이렇게 사용하시는지 궁금했습니다. 상황 설명 추가 2) 단순 확대,축소할 경우에는 전역으로 미디어쿼리로 적용하면 전체적인 반응형 대응이 쉬워질거라고 생각했습니다. 화면이 작아질 때 html {font-size : 14px} 로 적용해주면 간단히 해결되긴하는데 이런식으로 화면 확대,축소를 대응하시는지가 궁금합니다 ㅠ..

css 해상도에 대한 대응은 어떻게하는게 베스트일까요?

css 해상도에 대한 대응은 어떻게 하고 계시나요? 저는 뷰포트 기준으로 잡고 내부는 %로 처리했는데 pc 기준 웹페이지 개발이면 폰트 등 여러가지 고려할게 많더라고요 ㅠㅠ 현업에선 어떻게 css가 아예 안무너지게 짜나요? 미디어쿼리로 그냥 전부 노가다하는지.. 궁금합니다.

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; } } } } } } }