기술
CSS 질문이 있습니다!
화면을 좌우로 2분할해서 각각 엘레먼트를 하나씩 렌더링하려고 하는데요, 이 때 style에 float:left, float: right 속성을 각 엘레먼트에 넣어주면 되나요? 적용을 해도 2분할이 안되어서요 ㅠㅠ
답변 2
2일 전 • 조회 22
기술
CSS 선언 순서가 궁금합니다!
보통 CSS 선언 순서 어떤 순서로 작성하시나요? 베스트 프렉티스가 있을까요?
답변 0
9일 전 • 조회 43
기술
바닐라JS 로그인폼 질문 드립니다.
최근 토이프로젝트겸 친구가 운영하는자영업 웹페이지를 제작하고있습니다. 회원가입기능과 예약기능을 설계하면서 여러 웹사이트를 참고하고자 둘러보았는데 대부분의 기업 (N사 G사등등)로그인버튼 클릭시 모달팝업이 노출되거나 별도의 로그인폼페이지가 로드되었습니다. 하나의 페이지에서 사용자의 입력을받아 로그인이나 회원가입기능을 수행할 수 있다고 생각되는데 위와같은 방법으로 하는 특별한 이유나 디자인패턴이 있는지 질문드립다.
답변 1
10일 전 • 조회 108
기술
CSS) 띄어쓰기 없이 긴 한글 텍스트의 오버플로우 문제
안녕하세요. 텍스트가 길어질 때 단어 단위로 줄바꿈을 해주고 싶습니다. CJK의 경우 word-break: keep-all; 을 쓰면 된다고 알고 있어서 적용해 봤는데 문제는 한글 텍스트가 띄어쓰기 없이 길~어질 경우에는 텍스트가 박스를 튀어나가는 오버플로우가 발생하더라고요.. word-break: break-all; 을 쓰면 오버플로우 문제는 해결되지만 가독성을 위해서는 단어 단위 줄바꿈이 좋다고 들어서요. 단어 단위 줄바꿈을 유지하면서, 띄어쓰기 없어도 오버플로우가 발생하지 않는 방법은 없을까요.?
답변 1
16일 전 • 조회 61
기술
react route css
react routes 경로중 특정 경로에만 적용하고 싶은 css가 있는 경우 어떻게 해야 하나요?? 현재는 index.css에 모든 routes경로의 스타일이 적용되어 있는 상태입니다. 특정 경로를 감싸난 css provider가 있을까요??
답변 3
18일 전 • 조회 108
기술
퍼블 고수분들 도와주세요
현재, 웹브라우저 기반 앱을 만들고 있습니다 각 페이지 마다 em(1em = 16px을 기준)으로 폰트 사이즈를 잡았는데 휴대폰 자체에서 글자 크기를 설정할 경우, 안드로이드 같은 경우에는 글자가 커지더라구요..! 이걸 막거나 대체할 방법이 있을까요? 반응형 땜에 em 을 썼는데 px을 쓰는 게 나을까요..?
답변 1 • Up 1
한 달 전 • 조회 113
기술
아래 사진과 같은 GNB를 만들어야 합니다.
위쪽에 있는 메뉴에 마우스를 올리면 전체 메뉴가 드랍 되는 형태의 헤더 인데 위쪽 메뉴에 마우스를 올리면 텍스트 컬러와 밑줄이 생기고 그 상태가 유지 되면서 하위 메뉴를 컨트롤 해야 하는데 마우스 커서를 하위 메뉴 쪽으로 가져갔을때 위쪽 메뉴의 컬러와 밑줄을 어떻게 컨트롤 해야 할지 잘 몰라서 질문 드립니다.. 사진이 왜케 깨지는지 잘 모르겠네요 ..
답변 0
한 달 전 • 조회 90
커리어
웹 퍼블리싱 실무 교육 추천해주세요
현직 웹 개발자입니다. 프론트엔드 개발자를 지향하고 있으나 css를 잘 알지 못하여 퍼블리셔 없이는 프로젝트를 진행하지 못합니다. 이를 극복하기 위해 따로 웹 퍼블리싱 교육을 받아 관련 실무까지 직접 처리할 수 있는 수준이 되고 싶습니다. css는 물론이고, 구체적으론 아래와 같은 것들을 배우고 싶어요 - 디자인 시안으로부터 퍼블리싱 결과물을 만들어 개발자에게 전달하는 전체 과정 - 반응형 디자인 구축, 웹 표준, 웹 접근성 지켜가며 개발 - 페이지 단위가 아니라, react, vue에서 바로 사용할 수 있는 컴포넌트 단위로 만드는 법 - 퍼블리싱 작업 위한 프로젝트 개발 환경 구축, 작업 폴더 구조, BEM 등의 방법론 - 개발자, 디자이너, 기획자와 커뮤니케이션 하는 법 현직 퍼블리셔 분들은 경력 쌓기 전 어떻게 공부하셨으며 (주변 퍼블리셔분은 다 학원 교육으로 취업하셨다고 합니다) 추천할만한 방법이 있다면 아낌없이 조언해 주셨으면 합니다 다만 직장인이다보니 오프라인 교육인 경우 저녁, 주말에 가능한 곳이면 좋겠습니다.
답변 0
한 달 전 • 조회 47
기술
필기앱 기술에대한 질문
안녕하세요 필기어플을 한번 만들어보고싶어서요 대학생인데 아직 2학년입니다. 필기앱을 만드는데있어서 일렉트론을 사용해서 윈도우앱형식으로 만들고싶은데 들어가는 기술들이 어떤것들이있을지 궁금해서요 필기인식이나 필기속도 이런것들을 어떻게 구현하는지 궁금합니다. 디자인은 html css 기능은 자바스크립트나 여러 라이브러리를 이용해볼까해요 아직 모르는게 많습니다 많이알려주시면 많이검색해보겠습니다!! (인공지능도 들어간다고하는거같은데.. 자세히설명해주시면 감사하겠습니다 ㅠㅠ)
답변 1
한 달 전 • 조회 76
기술
보통 css작성하실때 보통 rem으로 많이 작성하나요?
px로 하다보니 화면 반응형 대응이 안되는거 같은데 현업에 계신 분들 중 px단위를 많이 쓰시는지 궁금합니다 px를 쓰시는 경우엔 반응형에서 대응을 어떻게 하는지도 궁금해요! ㅠ 상황 설명 추가) 이게 데스크탑에서의 비율이 맥북 13인치로 가면 스크롤이 생겨서 전체적인 비율은 rem으로 대응이 가능할거 같아서 도입하려는데 다른 곳에서도 이렇게 사용하시는지 궁금했습니다. 상황 설명 추가 2) 단순 확대,축소할 경우에는 전역으로 미디어쿼리로 적용하면 전체적인 반응형 대응이 쉬워질거라고 생각했습니다. 화면이 작아질 때 html {font-size : 14px} 로 적용해주면 간단히 해결되긴하는데 이런식으로 화면 확대,축소를 대응하시는지가 궁금합니다 ㅠ..
답변 1 • Up 2
한 달 전 • 조회 90
기술
css 해상도에 대한 대응은 어떻게하는게 베스트일까요?
css 해상도에 대한 대응은 어떻게 하고 계시나요? 저는 뷰포트 기준으로 잡고 내부는 %로 처리했는데 pc 기준 웹페이지 개발이면 폰트 등 여러가지 고려할게 많더라고요 ㅠㅠ 현업에선 어떻게 css가 아예 안무너지게 짜나요? 미디어쿼리로 그냥 전부 노가다하는지.. 궁금합니다.
답변 1
한 달 전 • 조회 33
기술
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; } } } } } } }
답변 0
한 달 전 • 조회 52
커리어
(고민)프론트엔드 개발자가 되고자하는 취준생입니다
CSS에 대해서 베이스가 부족한 상태여서 막상 웹사이트를 만들때에 어려움을 많이 겪고 있습니다 어떤 속성을 써야할지 고민이되고, 기존에 알고 있는 속성만 쓰다보니 픽셀을 쓰는 감도 부족한거같고, 이번에 기회가 생겨서 리엑트로 사이드프로젝트를 하게 되었는데, 퍼블리싱 단계에서 css에 대한 기초지식이 부족한것을 느꼈습니다! 디자이너 분에게 디자인을 전달받아서 받은대로 만들어보려고 하는데 막힌다면 어떻게 하는것이 제일 좋은 방법일까요? 여러 선배님께 조언을 구합니다 스타일컴포넌트로 사용하기로했습니다
답변 1
한 달 전 • 조회 160
기술
웹사이트 개발에 G-suite적용
홈페이지를 만들려 하는데 로그인으로 구글 g-suite를 적용시켜서 로그인 시켜보고 싶은데 어떻게 해야하는 지 모르겠어요
답변 0 • Up 1
2달 전 • 조회 47
커리어
독수리 타법에서 정석으로
기술 질문이 아니라는 점 죄송합니다.. 국비학원 수강중인 학생인데 평생 독수리 타법을 쓰다가 현업에서도 이래도 될지 궁금해져서요. 현업에서 독수리 타법을 안좋게 보는 시선이 있는지, 정석대로 고치면 미래를 봤을 때 저에게 이득일지 현업에 계신 분들의 의견이 필요합니다. 현재 독수리 타법으로는 평균 이상은 나오는데 교정하려면 꽤나 큰 시간이 필요할 것 같아서 고민입니다.
답변 3 • Up 3
3달 전 • 조회 213
커리어
html, css를 활용하여
안녕하세요! 프론트엔드 개발자가 되고 싶은 대학생입니다! 이제 막 html과 css 공부를 마쳤습니다. html,css를 활용하여 뭔가 저만의 홈페이지를 만들어보고 싶은데 감이 안잡힙니다.. 막상 공부는 했지만 어떻게 활용을 해야할지 막막합니다.. 클론 코딩을 하며 감을 잡아야할까요. 그렇다면 어떤 강의를 들으면 좋을까요? 아니면 JS를 공부를 다 하고 뭔가를 만들어야할까요..ㅠㅠ 댓글달아주시면 감사하겠습니다!!
답변 3 • Up 3
3달 전 • 조회 309
커리어
자바스크립트 리액트
html css Javascript 를 순수대로 동시에 공부하려 합니다 이중 Javascript는 리액트를 포함한 프레임워크가 있는걸로 아는데 순수 Javascript를 하고 래액트를 하는게 좋을까요 처음부터 리액트로 할까요?
답변 3 • Up 1
3달 전 • 조회 218
커리어
html css Javascript 공부 추천
제목의 3가지를 공부하려 하는데 보기 좋은 유튜브강의나 책이 있으면 추천 부탁드립니다
답변 1 • Up 4
3달 전 • 조회 231
커리어
프론트엔드 개발자 독학 팁
이제 시작해보려고 하는데 책이나 강의 추천해주실수있나요 ??
답변 2 • Down 2
3달 전 • 조회 308