복잡한뇌구조마냥

UI를 개발하다 보면 긴 텍스트가 요소를 넘치는 경우가 생깁니다.이때 깔끔하게 "..." 말줄임표로 표시하려면 CSS의 text-overflow 속성을 사용합니다. text-overflow란?요소 안의 텍스트가 박스(컨테이너) 너비를 초과할 때, 어떻게 보여줄지를 결정하는 속성입니다.ellipsis 옵션을 사용하면 넘친 텍스트를 "..."으로 대체할 수 있습니다.기본 사용법 (한 줄 말줄임표).ellipsis { white-space: nowrap; /* 줄바꿈 없이 한 줄로 표시 */ overflow: hidden; /* 넘치는 부분 숨기기 */ text-overflow: ellipsis; /* 넘치는 부분을 "..."으로 표시 */}예시 HTML 이 텍스트는 너무 ..

프로젝트 개발 중 디자인을 따라 만들었더니 스크롤바가 너무 거슬리는 상황이 발생했다.투박한 스크롤 바가 아닌 디자인에 부합하는 스크롤 바를 만들고 싶어졌다.찾아보던 중 스크롤 바를 커스터마이징 할 수 있는 내용이 있어서 참고했다. 간단한 예제를 만들어 보았다.See the Pen Custom Scrollbar by Dongyeop (@Yoepee) on CodePen. 참고 자료: https://inpa.tistory.com/entry/CSS-%F0%9F%8C%9F-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%B0%94Scrollbar-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%EC%86%8D%EC%84%B1-%EC%B4%9D%EC%A0%95%EB%A6%AC 🌟 스크롤 바(Sc..

개발을 하던 중 중복되는 디자인을 좀 편하게 사용하거나 특정 요소만 선택해서 css를 적용했으면 좋겠다고 생각해서 찾아보다가nth-child라는 의사 클래스를 발견해서 간단하게 해결할 수 있었다.`:nth-child`는 CSS에서 특정 부모 요소의 자식 요소 중 n번째 요소를 선택할 때 사용하는 의사 클래스입니다. 수열 공식(2n, 2n+1 등)을 이용해 짝수, 홀수 또는 특정 패턴으로 요소를 선택할 수 있습니다.주요 사용 예시 - `:nth-child(2)` → 부모 안의 두 번째 요소를 선택 - `:nth-child(2n)` → 부모 안의 짝수 번째 요소를 선택 - `:nth-child(2n+1)` → 부모 안의 홀수 번째 요소를 선택 - `:nth-child(3n)` → 3의 배수 번째 요소를 ..

개발을 하던 중 font size가 특정 구간에 도달하면 더 이상 줄어들지 않는 상황을 발견했다. 일부 브라우저는 브라우저 설정으로 최소 폰트 사이즈를 지정하고 있어서 font-size를 css에서 수정하여도 크기가 변하지않는 경우가 있었다. 간단한 방법으로 이를 해결 할 수 있었다. .font { font-size: 10px; // 10px이 최소 크키라고 가정 zoom: 0.9; // 9px로 줄어든 것 처럼 보이는 효과가 있었음. } zoom을 이용하여 font-size 비율을 낮춰서 디자인에 맞게 수정할 수 있다. zoom 비율을 잘 이용하여 반응형 제작에도 도움을 받을 수 있다.

디자인 팀에서 받은 디자인의 규격이 css가 적용되지 않는 문제가 있었다. border이 1px보다 얇아야하는데 구분선과 비교가 안되는 문제가 있었다. 참조 블로그를 참조하여 꼼수를 얻었다. 실제로 적용해보고 디자인팀에서 괜찮다고 의견을 받아 이대로 적용했다. 1px border 0.75px border 0.5px border 0.25px border (1px) (0.75px) (0.5px) (0.25px) 1. 본인이 수정하려는 요소에 class나 id를 우선 설정하고, .border_100 { border: 1px solid rgba(0,0,255,1); } .border_75 { border: 1px solid rgba(0,0,255,0.75); } .border_50 { border: 1px so..

1. CSS 접두어 - CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 한다. *벤더 프리픽스(Vendor Prefix) : 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix). - CSS 권고안에 포함되지 못한 기능이나, CSS권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 벤더 프리픽스를 사용하게 됩니다. - 권고 전 CSS3의 사양을 웹 브라우저 제조업체가 지원하는 경우 셀렉터 앞에 웹 브라우저 별로 서로 다른 접두사를 붙일 것을 권장 주요 웹 브라우저의 벤더 프리픽스 인터넷 익스플로러 엣지 크롬 파이어..

회사 프로젝트 특성상 svg를 이용한 이미지 출력이 많습니다. svg를 그리다 보면 부분적으로 클릭을 하고 싶거나 앞쪽에 있는 요소를 클릭할 필요가 없는데 클릭되는 경우가 있습니다. 찾아보니 css를 사용하여 클릭이벤트를 제어할 수 있었는데, 그 방법 중 하나가 pointer-events입니다. 해당 속성을 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다. See the Pen Untitled by Dongyeop (@Yoepee) on CodePen. 간단하게 MDN 코드 참고해서 만들어보았습니다. 사용해보면 알겠지만, 옵션에 따라 클릭이 가능한 범위와 클릭이 되지 않는 범위가 나뉩니다. // pointer-events속성이 지정되지 않은 경우와 동일하게 동작 pointer-..