Front-End/HTML_CSS18 [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] 사용하는 글꼴의 숫자 폭이 일정하지 않을때 해결방법 안녕하세요 :) 작업 도중에 아래와 같이 사용하는 글꼴의 숫자 폭이 일정하지 않아 깔끔하게 정렬하는 데 문제를 겪고 있다면, 그 문제를 해결 방법에 대해 포스팅하려고 합니다. 한동안 이 문제로 고생을 했는데, 어느 날 디자이너님께서 아래 참조 블로그 글을 보고 공유 주셨더라고요. (디자이너님께 커피를 대접해 드려야겠습니다 허허) 위 문제는 폰트가 가변글꼴일 때 나타납니다. 고정글꼴이 아니라 가변글꼴이기 때문에 숫자의 너비값이 저마다 다른 것이지요. 해결방법은 정말 간단했습니다. font-variant-numeric: tabular-nums; 위 속성을 부여하면 숫자가 같은 폭을 가지게 됩니다. 이런 기본적인 CSS도 모르다니... 공부를 더 열심히 해야할 것 같습니다. 참조: https://velog.i.. 2023. 11. 7. [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. [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. [HTML] tabindex란? 토이 프로젝트를 진행하다가 엔터를 누르면 로그인 버튼 혹은 ok 버튼이 클릭되도록 설정을 하려고 했다. 근데 input 태그에서는 onKeyDown 속성이 잘 작동하지만 div 태그에서는 작동이 되지 않는 문제가 발생했다. 이것저것 찾아보니 미국 성님들께서 tabindex 속성을 부여해야 한다는 글을 발견했다. 실제로 tabindex 속성을 넣으니 잘 작동되었다. 그렇다면 tabindex란 무엇일까? Use the tabindex attribute tabindex는 HTML 엘리먼트가 포커스를 받을 수 있도록 하는 글로벌 특성을 말한다. 엘리먼트에 접근하기 위해 tabindex의 값에 0 혹은 음의 값을 넣어주어야 한다. tabindex의 값이 0 혹은 양의 수를 넣으면 해당 엘리먼트는 tab키를 이용해.. 2022. 4. 23. 이전 1 2 다음