CSS17 [HTML_CSS] 파일 업로드 버튼 만들기 안녕하세요 :)오늘은 사실 간단해 보이는 ui인데 꽤 고민을 하게 만든 파일 업로드 버튼 ui에 대해 포스팅하려고 합니다. react와 tailwind를 사용하는 프로젝트라 아래와 같이 컴포넌트를 만들었습니다. 여기서 저는 업로드 아이콘에서 꽤 애를 먹었는데요, 아이콘이 이벤트 버블을 일으키지 않아서 아이콘 위를 클릭하면 아무런 일이 발생하지 않는 문제가 있었습니다. 찾아보니 css에 pointer-events: none이라는 스타일 속성이 있더라구요. 해당 스타일은 어떤 상황에서 그래픽 엘리먼트가 이벤트의 타깃이 될 수 있는지를 결정할 수 있는 속성입니다. 여기서 저는 none값을 줘서 svg 아이콘이 이벤트 타깃이 아니니 그 뒤에 있는 이벤트를 트리거 시키도록 했습니다. {label && {.. 2024. 5. 10. [HTML_CSS] table에 유연한 ellipsis 적용하기 안녕하세요 :) 포스팅을 올릴 때마다 저의 밑바닥을 보이는 것 같아 부끄럽지만... 저랑 같은 어려움을 겪고 계신 분들을 위해 포스팅을 올려봅니다. 사실 저는 ellipsis를 적용할 때마다 긴장합니다. ellipsis '...' 표시는 일상에서 자주 접하는 문자 overflow 처리 방식인데 이게 아무렇게 사용한다고 "쨘"하고 적용되지는 않습니다 ㅠㅠ block 요소인지 그리고 너비가 있는지 등 함께 적용되어야 하는 스타일이 있습니다. 자세한 내용은 다른 블로그에 자세히 설명되어 있으니 살펴보시길 바랍니다. 저도 매번 찾아보고 있습니다. 오늘은 table 컴포넌트 작업중이었는데요, Saas 웹애플리케이션이다 보니 테이블이 지원해야 하는 기능들이 꽤 많이 있습니다. 그리고 유저 특성상 많은 데이터를 살펴.. 2024. 4. 19. [HTML_CSS] height 속성 애니메이션 적용할 때 주의사항 안녕하세요 :) 오늘은 아래와 같이 버튼을 누르면 높이가 늘어났다 줄었다 하는 애니메이션 작업을 했습니다. 처음에는 그저 hegiht 값을 변경하면 되겠지~ 생각했는데요, 스무스한 애니메이션이 아닌 딱딱 끊기는 높이변화만 적용되었습니다. 원인을 찾아보니 height 값이 auto로 설정되어 있다면 애니메이션이 적용되지 않는다고 합니다. auto 값이란 가변적인 값이기 때문에 애니메이션 연산이 어려운 모양입니다. 자세히 알고 싶었지만 자세한 설명은 찾지 못했습니다 ㅠㅠ 여하튼 중요한 포인트는 height 값이 아닌 max-height 값을 변경해서 이 문제를 해결할 수 있었습니다. 저는 gsap을 이용해 애니메이션을 구현했는데요, 엘리먼트를 펼칠 때의 maxHeight 값을 어떻게 넣으면 좋을지 고민하다가.. 2024. 4. 9. [CSS] woff 폰트 적용하기 안녕하세요 :) 오늘은 woff가 무엇인지 그리고 해당 폰트를 어떻게 적용하는지 알아보도록 하겠습니다. woff란? woff는 웹 폰트 파일형식을 말합니다. 웹 폰트는 시스템 폰트와 반대되는 개념인데요, 시스템 폰트는 사용자의 기기에 기본적으로 설치되어 있는 폰트를 의미합니다. 반면 웹 폰트는 애플리케이션 실행 전 따로 다운로드를 하아야 하죠. 이전에는 웹 폰트로 TTF나 OTF와 같은 파일 형식(OpenType 폰트라고 부른다네요)을 이용했습니다. 하지만 파일의 크기가 너무 컸고 로컬 환경에 설치가 가능했기 때문에 라이센스 문제가 발생했습니다. 따라서 woff와 같이 압축된 형식의 설치가 불가능한 파일 형식을 필요로 하게 된 것이죠. woff 폰트를 다운로드하면 아마 woff2 파일도 같이 받게 되실 .. 2023. 10. 31. [css] flex 아이템 스크롤 상단부분 가림 문제 안녕하세요, 오늘은 이런저런 라이브러리 테스트 도중 위와 같이 스크롤을 위 끝까지 올려도 상단의 텍스트가 잘리는 문제가 발생했습니다. 문제의 원인은 flex 속성 사용중에 아래 두 개의 스타일 때문입니다. align-items: center justify-content: center 위 스타일을 이용하면 flex item을 아주 쉽게 가운데 정렬 할 수 있습니다. 하지만 만약 item이 container의 크기를 벗어난다면 overflow 된 부분에 접근이 불가능 해지는 문제가 발생합니다. 이러한 문제를 해결하기 위해 "safe" 값을 추가할 수 있도록 했다고 하지만, 아직 여러 브라우저에서 지원을 하지 않는 모양입니다. justify-content: safe center align-self: safe .. 2023. 5. 24. [CSS] 텍스트 양쪽라인에 맞추기 안녕하세요, 개발자 Sean입니다. 만약에 텍스트를 아래 사진처럼 양옆에 딱 붙여서 나열하고 싶다면 어떻게 해야 할까요? 그럴 땐 아래와 같이 CSS를 설정해 주면 됩니다. #list-item-wrapper { width: 383px; margin: 0 auto; word-break: break-all; text-align: justify; } 2023. 3. 30. [JS] 주니어 레벨의 프론트엔드 개발자가 되려면? 신입 개발자로 일을 하면서 여러 가지 상황에 부딪힐 때마다 드는 생각은 '이게 최선인 걸까?' 하는 고민이다. 그만큼 아직은 배워야 할게 많다는 뜻일까. 성장에 대한 고민을 하면서 여러 블로그 글을 읽다가 재밌는 글이 있어 번역해 옮겨본다. 2022년에는 주니어 프론트엔드 개발자(리엑트)라고 불릴 수 있을까? 안녕하세요. 많은 사람들이 소프트웨어 엔지니어를 희망하고 발리에서 재택근무와 고소득의 라이프 스타일을 바라고 있습니다. 그렇지 않은 사람이 있을까요? 하지만 몸 값이 높은 주니어 프론트엔드 개발자가 되는 것은 그렇게 쉬운 일은 아닙니다. 해가 갈수록 채용 담당자는 주니어 레벨의 개발자에게 더 많은 요구와 엄격한 잣대를 요구하고 있습니다. 바로 지금 여기서 당신이 주니어 레벨의 FE로 불릴 수 있는지.. 2022. 8. 26. [React] Build 후에 CSS 사라짐 현상? 이번 주 가벼운 마음으로 개인 프로젝트를 진행하다가 배포 업데이트를 하려고 build를 하고 build 된 어플을 실행시켜 보았다. 그런데 이게 뭔 일인지.... 스타일이 몽땅 사라져 있는 것이었다. 이전에 똑같은 방식으로 build 해서 배포할 때는 아무런 문제가 없었는데 갑자기 지금에 와서야 이러는 이유를 모르겠다. 거기다 로컬에서 돌렸을 때는 스타일이 모두 잘 적용되어서 돌아가고 있었다. 무엇이 문제인지 한참을 헤메다가 원인을 찾게 되었다. 원인은 styled-components의 GlobalStyles 컴포넌트 때문이었다. 지금까지 index.js에 컴포넌트보다 상위의 위치에 컴포넌트를 위치시켰는데, 문서를 살펴본 결과 컴포넌트와 같은 위치 혹은 더 아래의 위치에 를 위치시켜야 한다고 한다. im.. 2022. 8. 14. [CSS] 반응형 웹페이지의 높이 설정 오늘 사이드 프로젝트를 반응형으로 업데이트하는 작업을 진행하다가 웹페이지의 높이 설정 문제에 부딪혔다. 콘텐츠가 있는 부분까지만 높이가 설정되다 보니 스타일이 이상하게 적용되는 문제가 있었다. 이 부분 어찌어찌 해결했던 경험이 있는데, 이번에 기왕이면 자세히 알아보려고 구글링을 하다가 좋은 글이 있어 번역해 옮겨보려 한다. HTML vs Body: How to Set Width and Height for Full Page Size CSS는 어렵고 복잡하지만 동시에 유연하다. 그렇기 때문에 어지저찌 하다보면 스타일이 적용되기도 한다. 페이지는 여전히 로딩되며, 에러 또한 나타나지 않는다. 페이지의 높이나 너비에 있어서 HTML 엘리먼트를 어떻게 설정해야 하는지 혹시 알고 있는가? body 엘리먼트는? 혹시.. 2022. 7. 30. [CSS] CSS Glitch Art 효과 CSS은 아무리 공부해도 마스터했다는 느낌이 들지 않는다. 경험 많은 프론트엔드 개발자 분들도 CSS는 마스터라는 개념이 없다고 종종 말씀하시는데, 정말 공감하는 바이다. 하지만 그렇다고 공부를 아예 포기하는 것도 문제가 있다. 결국 디스플레이에 스타일을 입히는 것은 프론트엔드가 해야 하는 주요 업무 중의 하나이기 때문이다. 관련해서 재밌는 포스트가 있어 번역해 옮겨본다. CSS Glitch Art Effect 이번 포스팅의 주제는 Glitch Art이다. Glitch Art가 무엇일까? 사실 Glitch Art는 틱톡 로고에 사용된 아트로 우리에게 친숙하다. 깜빡거리고 진동하는 효과로 우리의 시선을 끄는 마법과 같은 느낌이 있다. Glitch Art는 이미지가 깨지며 흠집이 생기는 느낌을 표현한다. 틱.. 2022. 7. 23. [CSS] Tailwind CSS란 무엇이고 어떻게 사용할 수 있을까? 기존 프로젝트에서 UI 컴포넌트를 라이브러리로 대체하기 위해서 리엑트의 여러 UI 라이브러리를 비교 분석하던 와중에 Tailwind CSS라는 용어가 나왔다. 오늘은 Tailwind CSS가 무엇인지 한번 알아보자. What is Tailwind CSS and How Can I Add it to my Website or React App? CSS는 여러분의 최고의 혹은 최악의 친구가 될수있는 기술이다. 놀라울 정도로 유연하고 마법과 같은 효과를 일으키지만, 올바른 관리와 집중을 하지 않으면 다른 코드와 마찬가지로 유지보수가 어려워진다. 어떻게 Tailwind CSS가 어플리케이션의 스타일 관리를 용이하게 도와주는 것일까? What is Tailwind? Tailwind CSS는 "utility-first.. 2022. 6. 15. [CSS] 두번째 줄에 ellipsis를 어떻게 적용시킬까? 오늘은 뉴스 기사 데이터를 받아와 해당 기사의 첫 두줄만큼만 미리 보기 텍스트로 표시하는 작업을 진행 중이었다. 두 줄 만큼만 미리보기를 지원하는 이유는 저작권을 위반하지 않는 범위가 두 줄 이라고 한다. ㅇㅅㅇ;; 여하튼 속으로 '아니 그냥 ellipsis 사용하면 끝일 텐데?'하고 작업을 시작했는데, 알고 보니 ellipsis 키워드는 한 줄에서만 동작하도록 되어 있는 키워드였다. 그래서 이것저것 고민해보면서 동료 개발자와도 논의를 해보니 '가능할 것 같은' 방안이 총 네 가지가 나왔다. 1. -webkit-line-clamp 키워드 사용하기 예상하는 장점: 많은 커뮤니티에서 해당 방법으로 문제를 해결했다. 예상하는 단점: 웹킷을 사용하지 않는 브라우저에서는 동작하지 않을 것이다. 2. javasci.. 2022. 5. 24. 이전 1 2 다음
