html11 [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] 텍스트 양쪽라인에 맞추기 안녕하세요, 개발자 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. [HTML] tabindex란? 토이 프로젝트를 진행하다가 엔터를 누르면 로그인 버튼 혹은 ok 버튼이 클릭되도록 설정을 하려고 했다. 근데 input 태그에서는 onKeyDown 속성이 잘 작동하지만 div 태그에서는 작동이 되지 않는 문제가 발생했다. 이것저것 찾아보니 미국 성님들께서 tabindex 속성을 부여해야 한다는 글을 발견했다. 실제로 tabindex 속성을 넣으니 잘 작동되었다. 그렇다면 tabindex란 무엇일까? Use the tabindex attribute tabindex는 HTML 엘리먼트가 포커스를 받을 수 있도록 하는 글로벌 특성을 말한다. 엘리먼트에 접근하기 위해 tabindex의 값에 0 혹은 음의 값을 넣어주어야 한다. tabindex의 값이 0 혹은 양의 수를 넣으면 해당 엘리먼트는 tab키를 이용해.. 2022. 4. 23. [HTTP] What happens when you type Google? 기술의 발달로 일반인들은 인터넷 웹페이지를 별다른 수고 없이 사용하고 있다. 하지만 그 내부에서는 수많은 일들이 처리되고 있다. 오늘은 웹상에 구글 페이지를 띄우기까지 어떤 일이 내부적으로 일어나고 있는지 알아보자. 관련해서 잘 쓰여진 블로그가 있어서 번역해 옮겨본다. 원본: https://medium.com/@maneesha.wijesinghe1/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a What happens when you type a URL in the browser and press enter? If you are in any technical profession, I am sure someone a.. 2022. 3. 21. HTML 태그 오늘은 마크업언어 HTML에서 자주사용되는 태그들에 대해 알아보자 자주 사용되는 태그 리스트 태그 설명 Division Span Image Link & Unordered List & List Item Input (Text, Radio, Checkbox) Multi-line Text Input Button HTML태그는 수십개가 넘지만 다른 언어의 메소드와 마찬가지로 우선은 자주사용하는 것들을 위주로 배우고, 필요한 기능이 있으면 그때 그때 찾아서 사용하는게 좋다. div vs span div와 span태그는 웹페이지의 공간을 나눌 때 사용한다. 이전에는 많이 사용된 태그이지만 HTML5 이후 시멘틱 태그가 소개되면서 이후 Section태그로 대체되고 있다. 이 둘의 차이점은 대략 다음과 같다. div는 .. 2021. 10. 9. HTML 기본구조 이번에는 HTML의 구조에 대해 알아보자 HTML 요소(element) 콘텐츠내용 위의 구성요소들을 모두 HTML의 요소라고 부른다. 그리고 위와같이 시작과 끝을 알리는 태그를 시작태그(opening tag) 종료태그(closing tag)라고 한다. class="클래스명" 시작태그 내에서 클래스나 스타일 등을 설정하는 것을 속성( attribute)이라고 부른다. 속성은 다시 두가지로 나눠질 수 있는데, 속석의 이름(attrbute name)과 속성의 값(attribute value)이다. 위의 예제를 통해 알아보자면, class는 속성의 이름(attribute name) 그리고 "클래스명"은 속성의 값(attribute value)가 된다. 2021. 10. 9. 이전 1 다음
